Chrome DevTools è un insieme di strumenti per sviluppatori web integrati direttamente nel browser GoogleChrome. DevTools può aiutarti a modificare le pagine on-the-fly e a diagnosticare rapidamente i problemi, il che in definitiva ti aiuta a costruire siti web migliori, più velocemente.
Guarda il video per le dimostrazioni dal vivo dei flussi di lavoro principali di DevTools, tra cui il debug dei CSS, la prototipazione dei CSS, il debug di JavaScript e l’analisi delle prestazioni di carico.
Aprire DevTools
Ci sono molti modi per aprire DevTools, perché diversi utenti vogliono un accesso rapido a diverse parti dell’interfaccia utente di DevTools.
- Quando vuoi lavorare con il DOM o il CSS, clicca con il tasto destro del mouse su un elemento della pagina e seleziona Inspectto per saltare nel pannello Elements. Oppure premi Command+Option+C (Mac) o Control+Shift+C (Windows, Linux, Chrome OS).
- Quando vuoi vedere i messaggi registrati o eseguire JavaScript, premi Command+Option+J(Mac) o Control+Shift+J (Windows, Linux, Chrome OS) per saltare direttamente nel pannello Console.
Vedi Open Chrome DevTools per maggiori dettagli e flussi di lavoro.
Iniziare
Se sei uno sviluppatore web più esperto, ecco i punti di partenza consigliati per imparare come DevTools può migliorare la tua produttività:
- Visualizza e modifica il DOM
- Visualizza e modifica gli stili di una pagina (CSS)
- Debug JavaScript
- Visualizza i messaggi ed esegue JavaScript nella Console
- Ottimizzare la velocità del sito
- Ispettare l’attività di rete
Scoprire DevTools
L’interfaccia utente di DevTools può essere un po’ travolgente…. ci sono così tante schede! Ma, se ti prendi un po’ di tempo per familiarizzare con ogni scheda per capire cosa è possibile fare, potresti scoprire che DevTools può seriamente aumentare la tua produttività.
Modalità dispositivo
Simulare i dispositivi mobili.
- Modalità dispositivo
- Testare Viewport responsive e specifiche del dispositivo
- Emulare i sensori: Geolocalizzazione & Accelerometro
Pannello Elementi
Visualizza e modifica il DOM e il CSS.
- Iniziare con la visualizzazione e la modifica del DOM
- Iniziare con la visualizzazione e la modifica del CSS
- Ispezionare e modificare le tue pagine
- Modificare gli stili
- Modificare il DOM
- Ispetta le animazioni
- Trova i CSS inutilizzati
Pannello Console
Visualizza i messaggi ed esegui JavaScript dalla Console.
- Iniziare con la console
- Utilizzare la console
- Interagire dalla linea di comando
- Console API Riferimento
Pannello fonti
Debug JavaScript, persistere le modifiche fatte in DevTools attraverso i ricarichi delle pagine, salvare ed eseguire frammenti di JavaScript, e salvare su disco le modifiche fatte in DevTools.
- Iniziare con il debug di JavaScript
- Mettere in pausa il codice con i punti di interruzione
- Salvare le modifiche su disco con gli spazi di lavoro
- Eseguire frammenti di codice da qualsiasi pagina
- Riferimento sul debug JavaScript
- Persistenza delle modifiche attraverso i ricarichi di pagina con le sovrascritte locali
- Trova il JavaScript inutilizzato
Pannello rete
Visualizza e fai il debug dell’attività di rete.
- Iniziare
- Guida ai problemi di rete
- Riferimento al pannello di rete
Pannello delle prestazioni
Trovare modi per migliorare il carico e le prestazioni di runtime.
- Ottimizzare la velocità del sito web
- Iniziare con l’analisi delle prestazioni di runtime
- Performance Analysis Reference
- Analizzare le prestazioni di runtime
- Diagnostica i Layout Forzati Sincroni
Pannello Memoria
Profila l’utilizzo della memoria e rintraccia i leak.
- Fix Memory Problems
- JavaScript CPU Profiler
Pannello applicazioni
Esaminare tutte le risorse caricate, inclusi i database IndexedDB o Web SQL, lo storage locale e di sessione, i cookie, la cache dell’applicazione, le immagini, i font e i fogli di stile.
- Debug delle Progressive Web Apps
- Ispetta e gestisci lo storage, i database, e cache
- Ispetta e cancella i cookie
- Ispetta le risorse
Pannello sicurezza
Debug di problemi di contenuto misto, problemi di certificati e altro.
- Capire i problemi di sicurezza
Comunità
Fai segnalazioni di bug e richieste di funzionalità in Crbug, che è il bug tracker del team di ingegneri.
Crbug
Se vuoi avvisarci di un bug o di una richiesta di funzionalità ma non hai molto tempo, sei il benvenuto a mandare un tweet a @ChromeDevTools. Rispondiamo e inviamo regolarmente annunci dall’account.
Per aiuto nell’uso di DevTools, Stack Overflow è il canale migliore.
Stack Overflow
Per segnalare bug o richieste di funzionalità sui documenti di DevTools, apri un problema su GitHub nel repository Web Fundamentals.
Docs Issues
DevTools ha anche un canale Slack, ma il team non lo monitora costantemente.
Slack