Chrome DevTools è un insieme di strumenti per sviluppatori web integrati direttamente nel browser Google Chrome. DevTools può aiutarti a modificare le pagine all'istante e a diagnosticare rapidamente i problemi, contribuendo a creare 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 del codice JavaScript e l'analisi delle prestazioni del caricamento.
Apri DevTools
Esistono molti modi per aprire DevTools, in quanto utenti diversi vogliono accedere rapidamente a diverse parti dell'interfaccia utente di DevTools.
- Per lavorare con il DOM o il CSS, fai clic con il tasto destro del mouse su un elemento della pagina e seleziona Ispeziona per passare al riquadro Elementi. In alternativa, premi Comando+Opzione+C (Mac) o Ctrl+Maiusc+C (Windows, Linux, ChromeOS).
- Per visualizzare i messaggi registrati o eseguire JavaScript, premi Comando+Opzione+J (Mac) o Ctrl+Maiusc+J (Windows, Linux, ChromeOS) per accedere direttamente al riquadro Console.
Per ulteriori dettagli e flussi di lavoro, vedi Aprire Chrome DevTools.
Inizia
Se hai uno sviluppatore web più esperto, di seguito sono riportati i punti di partenza consigliati per scoprire in che modo DevTools può migliorare la produttività:
- Visualizzazione e modifica del DOM
- Visualizzare e modificare il CSS
- Debug di JavaScript
- Visualizza i messaggi ed esegui JavaScript nella console
- Ottimizzare la velocità del sito web
- Controllare l'attività di rete
Scopri DevTools
L'interfaccia utente di DevTools può essere un po' troppo complessa... ci sono tantissime schede. Tuttavia, se dedichi un po' di tempo ad acquisire familiarità con ogni scheda per capire cosa è possibile, potresti scoprire che DevTools può aumentare notevolmente la tua produttività.
Modalità dispositivo
Simulazione di dispositivi mobili.
Riquadro degli elementi
Visualizza e modifica il DOM e il CSS.
- Iniziare a visualizzare e modificare il DOM
- Iniziare a visualizzare e modificare il CSS
- Modificare il CSS
- Modifica il DOM
- Trovare CSS non validi, sostituiti, non attivi e altri CSS
- Identificare potenziali miglioramenti al CSS
- Emula temi chiari/scuri, contrasto e altre funzionalità multimediali del CSS
- Trovare il CSS inutilizzato
- Esaminare le animazioni
Riquadro della console
Visualizza i messaggi ed esegui JavaScript dalla console.
Riquadro delle origini
Esegui il debug di JavaScript, mantieni le modifiche apportate in DevTools durante i ricaricamenti delle pagine, salva ed esegui snippet di JavaScript e salva le modifiche apportate in DevTools nelle origini locali.
- Iniziare a eseguire il debug di JavaScript
- Mettere in pausa il codice con i punti di interruzione
- Modificare e salvare i file in uno spazio di lavoro
- Esegui snippet di JavaScript
- Riferimento per il debug JavaScript
- Esegui l'override delle intestazioni dei contenuti web e delle risposte HTTP localmente
Riquadro Network
Visualizzare ed eseguire il debug dell'attività di rete.
- Controllare l'attività di rete
- Informazioni sulle funzionalità di rete
- Visualizzazione delle risorse della pagina
Riquadro Registratore
Registra, ripeti e misura i flussi degli utenti.
- Registrare, riprodurre e misurare i flussi di utenti
- Personalizzare Registratore con le estensioni
- Informazioni sulle funzionalità di Registratore
Riquadro Rendimento
Scopri come migliorare le prestazioni di carico e runtime.
- Ottimizzare la velocità del sito web
- Analizzare le prestazioni del runtime
- Informazioni sulle funzionalità relative al rendimento
Riquadro della memoria
Trova e risolvi i problemi di memoria che influiscono sulle prestazioni della pagina, ad esempio le perdite di memoria.
Riquadro dell'applicazione
Ispeziona tutte le risorse caricate, inclusi database IndexedDB o SQL web, spazio di archiviazione locale e di sessione, cookie, cache applicazione, immagini, caratteri e fogli di stile.
- Debug delle app web progressive
- Visualizzare e modificare lo spazio di archiviazione locale
- Visualizzare, aggiungere, modificare ed eliminare i cookie
- Visualizzare le informazioni sulla prova dell'origine
Pannello di sicurezza
Esegui il debug di problemi relativi a contenuti misti, certificati e altro ancora.
Community
Invia segnalazioni di bug e richieste di funzionalità in Crbug, che è il tracker dei bug del team di tecnici.
Se vuoi segnalarci un bug o una richiesta di funzionalità, ma non hai molto tempo, puoi inviare un tweet a @ChromeDevTools. Rispondiamo e inviamo regolarmente annunci dall'account.
Per ricevere assistenza sull'utilizzo di DevTools, Stack Overflow è il canale migliore.
Per segnalare bug o richieste di funzionalità sui documenti di DevTools, apri un problema GitHub.
DevTools ha anche un canale Slack, ma il team non lo monitora in modo coerente.