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 per i singoli riquadri.
Per impostare le preferenze, apri 
Impostazioni > Preferenze e scorri fino a una delle sezioni descritte di seguito.
Per scoprire la funzione di ogni impostazione, cerca il nome dell'impostazione in questa pagina ed espandi la descrizione.
Questo riferimento indica le diverse impostazioni con le seguenti icone:
caselle di controllo- Elenchi a discesa
deprecato
Per ripristinare le preferenze predefinite, scorri fino alla fine della scheda Preferenze e fai clic su Ripristina impostazioni predefinite e ricarica.
Aspetto
Questa sezione elenca le opzioni che personalizzano l'aspetto di DevTools.
Temi 
imposta un tema a colori per l'UI di DevTools.
Layout del riquadro 
organizza i riquadri in pannelli.
Interessa Elementi > Stili e schede secondarie e il riquadro Origini > Debugger. L'opzione auto fa sì che il layout dipenda dalla larghezza di DevTools.
Lingua 
imposta le impostazioni internazionali per la UI di DevTools.
Per applicare questa impostazione, ricarica DevTools.
Attiva la scorciatoia Ctrl/Cmd + 0-9 per passare da un pannello all'altro ti consente di aprire i pannelli utilizzando la tastiera.
Questo video mostra come passare da una scheda all'altra utilizzando 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 ciascun aggiornamento apre automaticamente la scheda del riquadro Novità dopo ogni aggiornamento di Chrome.
Fonti
Questa sezione elenca le opzioni che personalizzano il riquadro Origini.
Cerca in script anonimi e di contenuti 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 del testo nel file di origine di un'estensione.
Rivela automaticamente i file nella barra laterale seleziona i file nel riquadro Origini > Pagina quando passi da una scheda all'altra nell'Editor.
Questo video mostra come, con questa opzione attivata, il riquadro Origini seleziona i file nella struttura ad albero di navigazione quando passi da una scheda all'altra.
Attiva le mappe di origine di JavaScript consente a DevTools di trovare le origini dei file JavaScript generati o minimizzati.
Attiva lo spostamento dello stato attivo con Tab consente al tasto 
Tab di spostare lo stato attivo all'interno di DevTools anziché inserire un carattere Tab nell'editor.
Richiede il ricaricamento di DevTools.
Questo video mostra innanzitutto i caratteri Tab inseriti con il tasto Tab. Quando attivi 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.
È necessario ricaricare DevTools.
Questo video mostra innanzitutto l'indentazione predefinita di otto spazi. Quando abiliti questa opzione, il rientro predefinito viene sostituito con quello del file di origine.
Il completamento automatico attiva utili suggerimenti nell'Editor.
Questo video non mostra alcun suggerimento. Quando attivi questa opzione, Editor mostra i suggerimenti per il completamento dei comandi.
Parentesi chiusa automatica aggiunge automaticamente una parentesi o un tag di chiusura quando ne digiti uno di apertura.
Questo video mostra la digitazione di parentesi aperte prima e dopo l'attivazione della chiusura automatica delle parentesi.
La corrispondenza tra parentesi sottolinea ed evidenzia in rosso chiaro nell'Editor una parentesi quadra, una parentesi graffa o parentesi senza coppia.
La riduzione del codice ti consente di comprimere e espandere i blocchi di codice tra parentesi graffe nell'editor.
Richiede il ricaricamento di DevTools.
Questo video mostra come eseguire blocchi di codice quando attivi questa opzione.
Mostra spazi vuoti 
mostra spazi vuoti nell'Editor.
Richiede il ricaricamento di DevTools. Le opzioni includono quanto segue:
- Tutto indica tutti gli spazi vuoti come punti (
...). Inoltre, nell'Editor il carattere Tab è una linea (—). - Finali evidenzia i caratteri di spazio vuoto alla fine delle righe in rosso chiaro.
Mostra i valori della variabile in linea durante il debug mostra i valori delle variabili accanto agli statement di assegnazione mentre l'esecuzione è in pausa.
Imposta lo stato attivo per il riquadro delle sorgenti quando viene attivato un punto di interruzione apre Origini > Editor nella riga con il punto di interruzione che ha messo in pausa l'esecuzione.
Questo video mostra innanzitutto il riquadro Origini fuori fuoco quando è in pausa in un punto di interruzione. Quando abiliti questa opzione, DevTools apre l'Editor nel riquadro Origini e mostra la riga di codice con il punto di interruzione.
Formatta automaticamente il codice delle fonti minimizzate rende leggibili queste fonti.
Quando è stampato uno strato, l'Editor può mostrare una singola riga di codice lungo su più righe, preceduta da - per indicare che si tratta di una continuazione di riga.
Attiva le mappe di origine del CSS consente a DevTools di trovare le origini dei file CSS generati, ad esempio .scss, e mostrarteli.
Consenti lo scorrimento 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 mappe di origine, da percorsi di file remoti. Opzione disabilitata per impostazione predefinita per motivi di sicurezza.
Se non viene attivata, DevTools registra nella console messaggi simili al seguente:
Rientro predefinito 
ti consente di scegliere il numero di spazi inseriti dal tasto Tab 
nell'Editor.
Questo esempio mostra come impostare il rientro predefinito a otto spazi e poi a un carattere di tabulazione.
Elementi
Questa sezione elenca le opzioni che personalizzano il riquadro Elementi.
Mostra DOM shadow dello user agent mostra i nodi DOM shadow nella struttura DOM.
A capo automatico spezza le righe lunghe nell'albero DOM e le inserisce nella riga successiva.
Mostra commenti HTML mostra i commenti HTML nell'albero DOM.
Mostra nodo DOM al passaggio del mouse consente di selezionare 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 nella struttura DOM. Se attivi 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.
L'opzione Mostra righelli al passaggio del mouse consente di mostrare 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 rimanda a un riferimento CSS MDN sulla proprietà.
Rete
Questa sezione elenca le opzioni che consentono di personalizzare il riquadro Rete. La maggior parte delle opzioni è la stessa delle impostazioni del riquadro.
Mantieni log corrisponde a Conserva log nel riquadro Rete. Salva le richieste tra i caricamenti pagina.
Questo video mostra prima il log delle richieste aggiornato al ricaricamento della pagina e poi mantenuto quando attivi 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 blocco richieste di rete blocca le richieste corrispondenti ai pattern nel riquadro a scomparsa Blocco 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 li blocca.
Disattiva cache (quando DevTools è aperto) equivale a Disattiva cache nel riquadro Rete. Disattiva la cache del browser.
Consenti di generare file HAR con dati sensibili aggiunge opzioni al pulsante Esporta HAR che ti consentono di esportare con o senza dati sensibili (sanitizzati).
I dati sensibili sono quelli nelle intestazioni Cookie, Set-Cookie e Authorization.
I tipi di risorse di codifica colore evidenziano le richieste in colori diversi a seconda del tipo nella colonna Struttura a cascata del log di rete.
Raggruppa log di rete per frame è uguale 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 nella pagina mentre DevTools è aperto.
Prestazioni
Questa sezione elenca le opzioni che personalizzano il riquadro Rendimento.
L'azione della rotellina del mouse sul grafico a dispersione 
assegna l'azione di scorrimento o zoom alla rotellina del mouse quando navighi nel grafico a dispersione.
Questo esempio mostra le azioni di scorrimento e zoom della rotellina del mouse su un grafico a forma di fiamma nel riquadro Rendimento.
Console
Questa sezione elenca le opzioni che consentono di personalizzare la console. La maggior parte delle opzioni è la stessa utilizzata nelle Impostazioni della console.
Nascondi messaggi di rete nasconde i messaggi di rete nella Console.
Questo video mostra come nascondere i messaggi della rete con questa opzione sia in 
Impostazioni sia in Impostazioni della console.
Solo contesto selezionato consente alla console di mostrare i messaggi solo per il contesto selezionato: principale, iframe, worker o estensione.
Questo video mostra come attivare questa opzione sia nelle Impostazioni di 
sia in Console > Impostazioni e selezionare il contesto nella Console.
Registra XMLHttpRequests consente di registrare XHR e richieste di recupero nella console.
Questo video mostra come attivare questa opzione sia in 
Impostazioni che in Console > Impostazioni e come registrare i messaggi XHR finished loading nella console.
Mostra timestamp consente di mostrare i timestamp nella console accanto ai messaggi.
Con il completamento automatico dalla cronologia, i comandi della Console vengono suggeriti in precedenza durante la digitazione.
Puoi trovare la stessa opzione in Console > Impostazioni.
Accetta il suggerimento di completamento automatico alla pressione del tasto Invio per fare in modo che la console accetti il suggerimento selezionato dal menu a discesa di completamento automatico quando premi Invio.
Questo video mostra cosa succede quando premi Invio prima e dopo aver abilitato questa opzione.
Raggruppa messaggi simili nella console consente di raggruppare i messaggi simili nella console.
Puoi trovare la stessa opzione in Console > Impostazioni.
Mostra gli errori CORS nella console consente alla console di mostrare gli errori CORS registrati.
Puoi trovare la stessa opzione in Console > Impostazioni.
La valutazione anticipata 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 dell'output.
Considera la valutazione del codice come azione dell'utente trasforma qualsiasi comando eseguito nella console in interazione dell'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.
Espandi automaticamente i messaggi console.trace() consente alla console di visualizzare i messaggi console.trace() espansi quando li registra.
Con conservazione del log al momento della navigazione, nella console viene registrato un messaggio Navigated to per ogni navigazione e il salvataggio dei log in tutte le pagine.
Puoi trovare la stessa opzione in Console > Impostazioni.
Estensione
Questa sezione elenca le opzioni che consentono di personalizzare la gestione dei link per le estensioni di Chrome DevTools.
Gestione dei 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
Questa sezione elenca le opzioni che controllano il modo in cui DevTools salva le modifiche apportate.
Attiva override locali consente a DevTools di mantenere le modifiche apportate alle origini durante i caricamenti della pagina.
Per saperne di più, consulta Override locali.
Debugger
Questa sezione elenca le opzioni che controllano il comportamento di Debugger.
Disattiva JavaScript ti consente di vedere 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 l'icona di avviso 
accanto a Origini.
Disabilita analisi dello stack asinc nasconde la "storia completa" dell'operazione asincrona nello stack di chiamate.
Per impostazione predefinita, il Debugger tenta di tracciare le operazioni asincrone se il framework in uso supporta questa funzionalità.
Per ulteriori informazioni, consulta Visualizzare le tracce dello stack asincrone.
Globale
Questa sezione elenca le opzioni con effetti globali in DevTools.
L'apertura automatica di DevTools per i popup apre DevTools quando fai clic sui link che aprono nuove schede. ovvero tutti i link con target=_blank.
Questo video mostra innanzitutto come fare clic su un link e aprire una nuova scheda *senza* DevTools. Quando abiliti questa opzione, si apre una nuova scheda *con* DevTools.
Con la ricerca durante la digitazione, DevTools "passa" al primo risultato di ricerca mentre digiti la query di ricerca. Se l'opzione è disattivata, DevTools ti porta al risultato solo quando premi Invio.
Questo video mostra innanzitutto come DevTools "salta" durante la digitazione di una query di ricerca. Quando abiliti questa opzione, DevTools ti porta al primo risultato quando premi Invio.
Sincronizza
Questa sezione ti consente di configurare la sincronizzazione delle impostazioni tra i dispositivi.
Abilita la sincronizzazione delle impostazioni ti consente di sincronizzare le impostazioni di DevTools su più dispositivi.
Per utilizzare questa impostazione, devi prima attivare la Sincronizzazione Chrome. Per ulteriori informazioni, vedi Impostazioni di sincronizzazione.