Apri Chrome DevTools

Kayce Basques
Kayce Basques
X GitHub
Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

Esistono molti modi per aprire Chrome DevTools. Scegli il tuo modo preferito da questo riferimento completo.

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

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

Aprire DevTools dai menu di Chrome

Se preferisci la UI, puoi accedere a DevTools dai menu a discesa di Chrome.

Apri il riquadro Elementi per esaminare il DOM o il CSS

Per ispezionare, 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 Elementi e seleziona l'elemento nell'albero DOM. Nella scheda Stili puoi visualizzare le regole CSS applicate all'elemento selezionato.

Un elemento selezionato nel riquadro Elementi.

Aprire l'ultimo riquadro utilizzato dal menu principale di Chrome

Per aprire l'ultimo riquadro di DevTools, fai clic sul pulsante 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 sezione successiva.

Apri i riquadri con le 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 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 indica la tua scelta.

La scorciatoia C apre il riquadro Elementi in modalità di ispezione . Questa modalità mostra utili descrizioni comando quando passi il mouse sopra gli elementi di una pagina. Puoi anche fare clic su un elemento qualsiasi per visualizzare il relativo CSS nella scheda Elementi > Stili.

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

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

Con DevTools aperto, ricarica la pagina con o senza cache

Con DevTools aperto, puoi ricaricare la pagina in tre modi. Nella barra delle azioni principale della finestra di Chrome, tieni premuto il pulsante Ricarica e scegli una delle opzioni:

Tre opzioni di ricarica con DevTools aperto.

  • Ricarica normale. Utilizza la cache per velocizzare il tempo di ricaricamento.

    Scorciatoia: Cmd+R (macOS) o Ctrl+R (Windows/Linux).

  • Ricarica forzata. Ignora la cache, ma non la svuota.

    Scorciatoia: Cmd+Maiusc+R (macOS) o Ctrl+Maiusc+R (Windows/Linux).

  • Svuota la cache e ricarica manualmente. Svuota la cache di tutti i siti prima di ricaricarli.

Apertura automatica di DevTools in ogni nuova scheda

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

  1. Chiudi le istanze di Chrome in esecuzione.

  2. Esegui la tua applicazione di terminale o riga di comando preferita.

  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 chiudi Chrome.

Passaggi successivi

Poi, guarda il seguente video per scoprire alcune scorciatoie e impostazioni utili per navigare più rapidamente in DevTools.

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