Apri Chrome DevTools

Kayce Basques
Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

Esistono molti modi per aprire Chrome DevTools. Scegli il tuo metodo preferito da questa guida di riferimento completa.

Puoi accedere a DevTools utilizzando l'interfaccia utente o la tastiera di Chrome:

Inoltre, scopri come aprire automaticamente DevTools per ogni nuova scheda.

Apri DevTools dai menu di Chrome

Se preferisci l'interfaccia utente, puoi accedere a DevTools dai menu a discesa in Chrome.

Apri il riquadro Elementi per ispezionare il DOM o CSS

Per esaminare, fai clic con il tasto destro del mouse su un elemento di una pagina e seleziona Ispeziona.

L'opzione Ispeziona in un menu a discesa di Chrome.

DevTools apre il riquadro Elements e seleziona l'elemento nell'albero DOM. Nel riquadro Stili, puoi visualizzare le regole CSS applicate all'elemento selezionato.

Un elemento selezionato nel riquadro Elementi.

Apri l'ultimo riquadro utilizzato dal menu principale di Chrome

Per aprire l'ultimo riquadro DevTools, fai clic sul pulsante Menu con tre puntini. a destra della barra degli indirizzi e seleziona Altri strumenti > Strumenti per sviluppatori.

L'opzione Strumenti per sviluppatori selezionata dal menu con tre puntini.

In alternativa, puoi aprire l'ultimo riquadro con una scorciatoia. Per saperne di più, consulta la prossima sezione.

Aprire i riquadri con scorciatoie: Elementi, Console o l'ultimo riquadro

Se preferisci la tastiera, premi una scorciatoia in Chrome a seconda del sistema operativo:

Sistema operativo Elementi Console Il tuo ultimo riquadro
Windows o Linux Ctrl+Maiusc+C Ctrl+Maiusc+J F12
Ctrl+Maiusc+I
Mac Cmd + Opzione + C Cmd + Opzione + J Fn + F12
Cmd + Opzione + I

Ecco un modo semplice per memorizzare le scorciatoie:

  • C sta per CSS.
  • J per JavaScript.
  • I determina la tua scelta.

La scorciatoia C apre il riquadro Elementi in modalità di ispezione Ispeziona.. Questa modalità ti mostra descrizioni comando utili quando passi il mouse sopra gli elementi di una pagina. Puoi anche fare clic su qualsiasi elemento per visualizzarne il CSS in Elements > Riquadro Stili.

Il riquadro Elementi in modalità di ispezione con una descrizione comando.

Per l'elenco completo delle scorciatoie di DevTools, vedi Scorciatoie da tastiera.

Apri automaticamente DevTools in ogni nuova scheda

Esegui Chrome dalla riga di comando e passa il flag --auto-open-devtools-for-tabs:

  1. Esci da qualsiasi istanza di Chrome in esecuzione.

  2. Esegui il tuo terminale o l'applicazione della riga di comando che preferisci.

  3. A seconda del sistema operativo, esegui questo comando:

  • macOS:

    open -a "Google Chrome" --args --auto-open-devtools-for-tabs

  • Windows:

    start chrome --auto-open-devtools-for-tabs

  • Linux:

    google-chrome --auto-open-devtools-for-tabs

DevTools si aprirà automaticamente per ogni nuova scheda finché non chiuderai Chrome.

Passaggi successivi

Ora guarda il video seguente per scoprire alcune scorciatoie e impostazioni utili per una navigazione più rapida in DevTools.

Per un'esperienza di apprendimento più pratica, scopri come personalizzare DevTools.