Configura l'aspetto e il comportamento di DevTools e dei relativi riquadri utilizzando 
Impostazioni > Preferenze. In questa scheda sono elencate sia le opzioni di personalizzazione generali sia quelle specifiche del riquadro.
Per impostare le preferenze, apri 
Impostazioni > Preferenze e scorri verso il basso fino a una delle sezioni descritte di seguito.
Per capire la funzione di ogni impostazione, cerca il nome dell'impostazione in questa pagina e espandi la descrizione.
Questo riferimento indica impostazioni diverse con le seguenti icone:
caselle di controllo- Elenchi a discesa
Deprecato
Per ripristinare le preferenze predefinite, scorri verso il basso fino alla fine della scheda Preferenze e fai clic su Ripristina le impostazioni predefinite e ricarica.
Aspetto
In questa sezione sono elencate le opzioni che consentono di personalizzare l'aspetto di DevTools.
Temi 
imposta un tema a colori per l'interfaccia utente di DevTools.
Layout del riquadro 
dispone i riquadri nei riquadri.
Interessa Elementi > Stili e le schede affiliate e il riquadro Origini > Debugger. L'opzione auto fa sì che il layout dipenda dalla larghezza di DevTools.
Formato colore 
imposta il formato dei valori colore CSS in Elementi > Stili.
DevTools converte automaticamente qualsiasi valore di colore valido nel formato scelto.
Lingua 
imposta le impostazioni internazionali per la UI di DevTools.
Per applicare questa impostazione, ricarica DevTools.
Attiva la scorciatoia Ctrl/Cmd + 0-9 per cambiare riquadro ti consente di aprire i riquadri tramite la tastiera.
Questo video mostra come passare da una scheda all'altra usando le scorciatoie da tastiera corrispondenti.
Disattiva overlay stato in pausa nasconde l'overlay In pausa nel debugger 
nell'area visibile quando l'esecuzione del codice è in pausa.
Mostra le novità dopo ogni aggiornamento apre automaticamente la scheda del riquadro a scomparsa Novità dopo ogni aggiornamento di Chrome.
Fonti
In questa sezione sono elencate le opzioni che consentono di personalizzare il riquadro Origini.
Cerca in script di contenuti e anonimi ti consente di cercare in tutti i file JavaScript caricati, inclusi quelli nelle estensioni di Chrome, utilizzando la scheda Cerca.
Questo video mostra come cercare testo in un file di origine di un'estensione.
Mostra automaticamente i file nella barra laterale seleziona i file nel riquadro Origini > Pagina quando passi da una scheda all'altra dell'Editor.
Questo video mostra come, con questa opzione attivata, il riquadro Origini seleziona i file nell'albero di navigazione quando passi da una scheda all'altra.
Attiva le mappe di origine JavaScript consente a DevTools di trovare le origini dei file JavaScript generati o minimizzati.
Attiva lo stato attivo dello spostamento della scheda consente al tasto Tab di 
di spostare lo stato attivo all'interno di DevTools invece di inserire un carattere Tab nell'Editor.
Richiede il ricaricamento di DevTools.
In questo video vengono mostrati innanzitutto i caratteri Tab inseriti con il tasto Tab. Quando abiliti questa opzione e ricarichi DevTools, il tasto Tab sposta lo stato attivo.
Rileva rientro imposta il rientro su quello del file di origine aperto nell'Editor.
Richiede il ricaricamento di DevTools.
Questo video mostra inizialmente il rientro predefinito di otto spazi. Quindi, quando abiliti questa opzione, il rientro predefinito viene sostituito con quello del file di origine.
Il completamento automatico attiva suggerimenti pratici nell'Editor.
Per prima cosa questo video non mostra suggerimenti. Quando attivi questa opzione, l'Editor mostra i suggerimenti per il completamento dei comandi.
La corrispondenza della parentesi quadra evidenzia ed evidenzia in rosso chiaro nell'Editor una parentesi quadra, una parentesi graffa o una parentesi senza una coppia.
La funzionalità di piegatura del codice consente di piegare e aprire blocchi di codice tra parentesi graffe nell'Editor.
Richiede il ricaricamento di DevTools.
Questo video mostra come comprimere i blocchi di codice quando attivi questa opzione.
Mostra spazi vuoti 
consente di visualizzare gli spazi vuoti nell'Editor.
Richiede il ricaricamento di DevTools. Le opzioni disponibili sono le seguenti:
- Tutti indica gli spazi vuoti come punti (
...). Inoltre, l'Editor indica il carattere Tab come una riga (—). - All'inizio evidenzia gli spazi vuoti alla fine delle righe in rosso chiaro.
Visualizza i valori della variabile in linea durante il debug mostra i valori della variabile accanto alle istruzioni di assegnazione mentre l'esecuzione è in pausa.
Il riquadro Origini dello stato attivo quando si attiva un punto di interruzione apre Origini > Editor sulla riga con il punto di interruzione che ha messo in pausa l'esecuzione.
Questo video mostra inizialmente il riquadro Fonti non attivo quando viene messo in pausa in un punto di interruzione. Quando attivi questa opzione, DevTools apre l'Editor nel riquadro Origini e mostra la riga di codice con il punto di interruzione.
Attiva le mappe di origine CSS consente a DevTools di trovare le origini dei file CSS generati, ad esempio .scss, e di mostrartele.
Consenti di scorrere oltre la fine del file consente di scorrere oltre l'ultima riga nell'Editor.
Questo video mostra come scorrere oltre la fine del file quando attivi questa opzione.
Consenti a DevTools di caricare risorse, ad esempio le mappe di origine, dai percorsi dei file remoti. Disabilitata per impostazione predefinita per motivi di sicurezza.
Se questa opzione è disattivata, DevTools registra i messaggi della console simili ai seguenti:
Rientro predefinito 
consente di scegliere il numero di spazi che il tasto Tab 
inserisce nell'Editor.
Questo esempio mostra come impostare il rientro predefinito a otto spazi prima e poi a un carattere Tab.
Elementi
In questa sezione sono elencate le opzioni che consentono di personalizzare il riquadro Elementi.
Mostra shadow DOM dello user agent mostra i nodi shadow DOM nell'albero DOM.
Il ritorno a capo automatico interrompe le lunghe righe nell'albero DOM e le inserisce nella riga successiva.
Mostra commenti HTML consente di visualizzare i commenti HTML nell'albero DOM.
Mostra nodo DOM al passaggio del mouse seleziona il nodo corrispondente nell'albero DOM quando passi il mouse sopra un elemento nell'area visibile in modalità di ispezione 
.
Questo video mostra innanzitutto che i nodi DOM non sono selezionati nell'albero DOM. Quando abiliti questa opzione, il riquadro Elementi seleziona i nodi al passaggio del mouse.
Mostra descrizione comando di ispezione dettagliata: mostra la descrizione comando nell'area visibile in modalità di ispezione 
quando passi il mouse sopra un elemento.
Mostra righelli al passaggio del mouse mostra i righelli nell'area visibile quando passi il mouse sopra gli elementi dell'albero DOM.
Mostra descrizione comando della documentazione CSS: mostra una descrizione comando con una breve descrizione quando passi il mouse sopra una proprietà nel riquadro Stili.
Il link Scopri di più ti fornisce un riferimento CSS MDN nella proprietà.
Rete
In questa sezione sono elencate le opzioni che consentono di personalizzare il riquadro Rete. La maggior parte delle opzioni è la stessa delle impostazioni del riquadro.
Conserva log corrisponde a Conserva log nel riquadro Rete. Salva le richieste nei caricamenti delle pagine.
Questo video mostra inizialmente il log delle richieste aggiornato al ricaricamento della pagina e poi mantenuto quando abiliti questa opzione.
Registra log di rete corrisponde a 
Registra log di rete nel riquadro Rete. Avvia o interrompe la registrazione delle richieste nel log di rete.
Abilita il blocco delle richieste di rete blocca le richieste corrispondenti ai pattern nel riquadro a scomparsa Blocco delle richieste di rete.
Questo video mostra innanzitutto che le richieste non sono bloccate. Successivamente, dopo aver attivato questa opzione, un pattern nel riquadro a scomparsa Blocco richieste di rete le blocca.
Disattiva cache (mentre DevTools è aperto) corrisponde a Disattiva cache nel riquadro Rete. Disattiva la cache del browser.
I tipi di risorse per la codifica dei colori evidenziano le richieste con colori diversi a seconda del tipo nella colonna Struttura a cascata del log di rete.
Raggruppa log di rete per frame corrisponde a Raggruppa per frame nel riquadro Rete. Questa opzione raggruppa le richieste avviate da frame in linea.
Forza il blocco degli annunci su questo sito blocca gli annunci rilevati sulla pagina mentre DevTools è aperto.
Esibizione
In questa sezione sono elencate le opzioni che consentono di personalizzare il riquadro Rendimento.
Azione della rotellina del mouse del diagramma a fiamma 
assegna l'azione di scorrimento o zoom alla rotellina del mouse quando ti sposti nel grafico a fiamme.
Questo esempio mostra le azioni della rotellina del mouse sia sullo scorrimento che lo zoom su un grafico a fiamme nel riquadro Prestazioni.
Console
In questa sezione sono elencate le opzioni che consentono di personalizzare la console. La maggior parte delle opzioni è la stessa delle Impostazioni della console.
Nascondi messaggi di rete nasconde i messaggi di rete nella console.
Questo video mostra come nascondere i messaggi di rete con questa opzione nelle Impostazioni di 
e nelle Impostazioni della console
Solo contesto selezionato consente di mostrare nella console i messaggi solo per il contesto selezionato: superiore, iframe, worker o estensione.
Questo video mostra come attivare questa opzione sia in 
Impostazioni che in Console > Impostazioni e seleziona il contesto nella console.
Registra XMLHttpRequests consente alla console di registrare XHR e richieste di recupero.
Questo video mostra come attivare questa opzione in 
Impostazioni e Console > Impostazioni e registrare i messaggi XHR finished loading nella console.
Mostra timestamp consente di visualizzare i timestamp accanto ai messaggi nella console.
Con il completamento automatico dalla cronologia, la console suggerirà i comandi che hai eseguito in precedenza durante la digitazione.
Puoi trovare la stessa opzione in Console > Impostazioni.
Accetta il suggerimento di completamento automatico alla pressione del tasto Invio consente alla console di accettare il suggerimento selezionato dal menu a discesa del completamento automatico quando premi Invio.
Questo video mostra cosa succede quando premi Invio prima e dopo aver attivato questa opzione.
Raggruppa messaggi simili nella console consente di raggruppare i messaggi simili nella console.
Puoi trovare la stessa opzione in Console > Impostazioni.
Mostra errori CORS nella console consente di visualizzare nella console gli errori CORS registrati.
Puoi trovare la stessa opzione in Console > Impostazioni.
La valutazione Eager consente alla console di mostrare un'anteprima di un output durante la digitazione di un comando.
Puoi trovare la stessa opzione in Console > Impostazioni.
Questo video mostra varie anteprime di output.
Considera la valutazione del codice come azione dell'utente trasforma qualsiasi comando eseguito nella console in un'interazione utente.
In altre parole, imposta navigator.userActivation.isActive su true al momento della valutazione. Puoi trovare la stessa opzione in Console > Impostazioni.
Questo video mostra il risultato della valutazione di navigator.userActivation.isActive prima e dopo l'attivazione di questa opzione.
L'espansione automatica dei messaggi console.trace() consente di visualizzare i messaggi console.trace() espansi nella console quando li registra.
Conserva log durante la navigazione consente alla console di registrare un messaggio Navigated to a ogni navigazione e di salvare i log in tutte le pagine.
Puoi trovare la stessa opzione in Console > Impostazioni.
Estensione
In questa sezione sono elencate le opzioni che personalizzano la gestione dei link per le estensioni Chrome DevTools.
Gestione link 
imposta un'opzione per aprire i file quando fai clic su un link a un file di origine, ad esempio nel riquadro Elementi > Stili.
Persistenza
In questa sezione sono elencate le opzioni che controllano il modo in cui DevTools salva le modifiche apportate.
Abilita gli override locali consente a DevTools di rendere persistenti le modifiche apportate alle origini nei vari caricamenti di pagine.
Per ulteriori informazioni, consulta la sezione Override locali.
Debugger
In questa sezione sono elencate le opzioni che controllano il comportamento di Debugger.
Disattiva JavaScript ti consente di verificare l'aspetto e il comportamento della tua pagina web quando JavaScript è disattivato.
Ricarica la pagina per vedere se e come dipende da JavaScript durante il caricamento.
Se JavaScript è disattivato, Chrome mostra l'icona 
corrispondente nella barra degli indirizzi, mentre DevTools mostra un'icona di avviso 
accanto a Origini.
Disattiva analisi dello stack asincrone nasconde la "storia completa" dell'operazione asincrona nello stack di chiamate.
Per impostazione predefinita, Debugger tenta di tracciare le operazioni asincrone se il framework che stai utilizzando supporta tale tracciamento.
Per saperne di più, consulta Visualizzare le analisi dello stack asincrone.
Globale
In questa sezione sono elencate le opzioni con effetti globali in DevTools.
Apri automaticamente DevTools per i popup apre DevTools quando fai clic sui link che aprono nuove schede. In altre parole, tutti i link con target=_blank.
Questo video mostra innanzitutto come fare clic su un link e aprire una nuova scheda senza DevTools. Quando attivi questa opzione, si apre una nuova scheda con DevTools.
La ricerca durante la digitazione fa sì che DevTools "passi" al primo risultato di ricerca durante la digitazione della query di ricerca. Se disattivato, DevTools ti indirizza ai risultati solo quando premi Invio.
Questo video mostra innanzitutto come DevTools "salta" durante la digitazione di una query di ricerca. Se attivi questa opzione, DevTools ti mostra il primo risultato quando premi Invio.
Sincronizzazione
Questa sezione consente di configurare la sincronizzazione delle impostazioni tra dispositivi.
Attiva la sincronizzazione delle impostazioni ti consente di sincronizzare le impostazioni di DevTools su più dispositivi.
Per utilizzare questa impostazione, devi prima attivare Sincronizzazione Chrome. Per ulteriori informazioni, vedi Impostazioni di sincronizzazione.