Preferenze

Sofia Emelianova
Sofia Emelianova

Configura l'aspetto e il comportamento di DevTools e dei relativi riquadri utilizzando Impostazioni. Impostazioni > Preferenze. In questa scheda sono elencate sia le opzioni di personalizzazione generali sia quelle specifiche del riquadro.

Per impostare le preferenze, apri Impostazioni. Impostazioni > Preferenze e scorri fino a una delle sezioni descritte di seguito.

La sezione Aspetto nella scheda Preferenze.

Per capire la funzione di ogni impostazione, cerca in questa pagina il nome dell'impostazione e add_circle espandi la descrizione corrispondente.

Questo riferimento indica impostazioni diverse con le seguenti icone:

  • Casella di controllo. caselle di controllo
  • Elenchi a discesa Menu a discesa.
  • Deprecato. Deprecato

Per ripristinare le preferenze predefinite, scorri fino alla fine della scheda Preferenze e fai clic su Ripristina le preferenze predefinite e ricarica.

Aspetto

In questa sezione sono elencate le opzioni che consentono di personalizzare l'aspetto di DevTools.

Temi Menu a discesa. imposta un tema a colori per l'interfaccia utente di DevTools.

Combinazioni: Modifica il tema DevTools dalla preferenza di sistema a quella da scuro a chiara.
  • Preferenza di sistema
  • Leggero
  • Scuro

Layout del riquadro Menu a discesa. 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.

Layout del riquadro: Modifica del layout del riquadro dell'elemento da orizzontale a verticale.
  • orizzontale
  • verticale
  • Automatica

Lingua Menu a discesa. imposta le impostazioni internazionali per la UI di DevTools.

Per applicare questa impostazione, ricarica DevTools.

Lingua: Il riquadro Impostazioni in cinese.
  • Lingua UI del browser
  • Una delle opzioni locali, in questo esempio, cinese

Casella di controllo. 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.

Casella di controllo. Disattiva overlay stato in pausa nasconde l'overlay In pausa nel debugger Pulsanti di riproduzione e passaggio. nell'area visibile quando l'esecuzione del codice è in pausa.

Casella di controllo. Mostra le novità dopo ogni aggiornamento apre automaticamente la scheda del riquadro a scomparsa Novità dopo ogni aggiornamento di Chrome.

La scheda del riquadro a scomparsa Novità.

Origini

In questa sezione sono elencate le opzioni che consentono di personalizzare il riquadro Origini.

Casella di controllo. 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.

Casella di controllo. 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.

Casella di controllo. Attiva le mappe di origine JavaScript consente a DevTools di trovare le origini dei file JavaScript generati o minimizzati.

Il riquadro Origini mostra un link al file minimizzato nella barra di stato.

Casella di controllo. Attiva lo stato attivo dello spostamento della scheda consente al tasto Tab di Tasto Tab. 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.

Casella di controllo. 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.

Casella di controllo. 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.

Casella di controllo. La parentesi quadra chiusa automaticamente aggiunge automaticamente una parentesi di chiusura o un tag quando ne digiti uno di apertura.

Questo video mostra la digitazione di parentesi di apertura prima e dopo l'attivazione della chiusura automatica.

Casella di controllo. 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.

Una parentesi graffa senza un paio sottolineata di rosso.

Casella di controllo. 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 Menu a discesa. 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.
Mostra spazi vuoti: Opzioni selezionate: Tutte e finali.
  • Nessun valore
  • Tutte (...)
  • Sentiero

Casella di controllo. 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 debugger è stato messo in pausa durante l'esecuzione della funzione mostra i valori della variabile accanto alle istruzioni di assegnazione.

Casella di controllo. 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.

Casella di controllo. Le fonti minificate automaticamente, per la stampa di immagini, rendono leggibili tali fonti.

Se la formattazione è formattata, l'Editor potrebbe mostrare una singola lunga riga di codice in più righe, preceduta da - per indicare che si tratta di una continuazione di riga.

Codice ben stampato nel riquadro Origini.

Casella di controllo. Attiva le mappe di origine CSS consente a DevTools di trovare le origini dei file CSS generati, ad esempio .scss, e di mostrartele.

Nel riquadro Origini vengono visualizzati i file .scss nella sezione Creato dell'albero di navigazione. Il riquadro Stili nel riquadro Elementi mostra i link alle origini .scss accanto alle regole CSS.

Casella di controllo. 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.

Casella di controllo. 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:

Un messaggio nella console che informa che il caricamento da un percorso di file remoto è vietato per motivi di sicurezza.

Rientro predefinito Menu a discesa. consente di scegliere il numero di spazi che il tasto Tab Tasto Tab. inserisce nell'Editor.

Rientro predefinito: Disattivazione delle opzioni di override e modifica del rientro predefinito da due spazi a otto, quindi al tasto Tab.
  • 2 spazi
  • 4 spazi
  • 8 spazi
  • Carattere Tab

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.

Casella di controllo. Mostra shadow DOM dello user agent mostra i nodi shadow DOM nell'albero DOM.

Il riquadro Elementi mostra i nodi DOM shadow.

Casella di controllo. Il ritorno a capo automatico interrompe le lunghe righe nell'albero DOM e le inserisce nella riga successiva.

Il riquadro Elementi spezza le lunghe righe in base alle parole e le inserisce nella riga successiva.

Casella di controllo. Mostra commenti HTML consente di visualizzare i commenti HTML nell'albero DOM.

Il riquadro Elementi mostra i commenti HTML.

Casella di controllo. 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 Ispeziona..

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.

Casella di controllo. Mostra descrizione comando di ispezione dettagliata: mostra la descrizione comando nell'area visibile in modalità di ispezione Ispeziona. quando passi il mouse sopra un elemento.

La descrizione comando dettagliata mostrata in modalità di ispezione.

Casella di controllo. Mostra righelli al passaggio del mouse mostra i righelli nell'area visibile quando passi il mouse sopra gli elementi dell'albero DOM.

Righelli mostrati nell'area visibile.

Casella di controllo. 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à.

La descrizione comando con la documentazione su una proprietà CSS.

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.

Casella di controllo. 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.

Casella di controllo. Registra log di rete corrisponde a Registra log di rete. Registra log di rete nel riquadro Rete. Avvia o interrompe la registrazione delle richieste nel log di rete.

Il pulsante Registra log di rete nel riquadro Rete.

Casella di controllo. 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.

Casella di controllo. Disattiva cache (mentre DevTools è aperto) corrisponde a Disattiva cache nel riquadro Rete. Disattiva la cache del browser.

La casella di controllo Disabilita cache.

Casella di controllo. 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.

La colonna con struttura a cascata nella scheda Rete senza e con codifica a colori.

Casella di controllo. Raggruppa log di rete per frame corrisponde a Raggruppa per frame nel riquadro Rete. Questa opzione raggruppa le richieste avviate da frame in linea.

Il log delle richieste di rete con le richieste raggruppate per frame in linea.

Casella di controllo. Forza il blocco degli annunci su questo sito blocca gli annunci rilevati sulla pagina mentre DevTools è aperto.

Una richiesta di rete relativa all'annuncio mostrata nel riquadro Rete con il filtro Richieste bloccate attivato.

Rendimento

In questa sezione sono elencate le opzioni che consentono di personalizzare il riquadro Rendimento.

Azione della rotellina del mouse del diagramma a fiamma Menu a discesa. assegna l'azione di scorrimento o zoom alla rotellina del mouse quando ti sposti nel grafico a fiamme.

Azione della rotellina del mouse del grafico a fiamme: Modifica dell'azione della rotellina del mouse dallo scorrimento allo zoom per il grafico a fiamme.
  • Scorri
  • Zoom

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.

Opzioni simili nella Console e nelle Impostazioni.

Casella di controllo. 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 Impostazioni. e nelle Impostazioni della console.

Casella di controllo. 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. Impostazioni che in Console > Impostazioni e seleziona il contesto nella console.

Casella di controllo. Registra XMLHttpRequests consente alla console di registrare XHR e richieste di recupero.

Questo video mostra come attivare questa opzione in Impostazioni. Impostazioni e Console > Impostazioni e registrare i messaggi XHR finished loading nella console.

Casella di controllo. Mostra timestamp consente di visualizzare i timestamp accanto ai messaggi nella console.

Messaggi con timestamp elencati nella Console.

Casella di controllo. 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.

Menu a discesa di completamento automatico con un'opzione di comando dalla cronologia della console.

Casella di controllo. 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.

Casella di controllo. Raggruppa messaggi simili nella console consente di raggruppare i messaggi simili nella console.

Puoi trovare la stessa opzione in Console > Impostazioni.

Messaggi simili nella console raggruppati.

Casella di controllo. Mostra errori CORS nella console consente di visualizzare nella console gli errori CORS registrati.

Puoi trovare la stessa opzione in Console > Impostazioni.

La console mostra gli errori CORS.

Casella di controllo. 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.

Casella di controllo. 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.

Casella di controllo. L'espansione automatica dei messaggi console.trace() consente di visualizzare i messaggi console.trace() espansi nella console quando li registra.

Un messaggio console.trace() espanso nella console.

Casella di controllo. 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.

Nella console vengono visualizzati i messaggi "Navigazione verso" e i log vengono salvati in pagine diverse.

Estensione

In questa sezione sono elencate le opzioni che personalizzano la gestione dei link per le estensioni Chrome DevTools.

Gestione dei link: È in corso la scelta di un'opzione con cui aprire i link.
  • Automatico Apre i file nel riquadro Origini per impostazione predefinita.
  • Opzione arbitraria che può essere aggiunta da un'estensione DevTools.

Persistenza

In questa sezione sono elencate le opzioni che controllano il modo in cui DevTools salva le modifiche apportate.

Casella di controllo. 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.

Casella di controllo. 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 JavaScript disattivato. corrispondente nella barra degli indirizzi, mentre DevTools mostra un'icona di avviso Avviso. accanto a Origini.

Un'icona nella barra degli indirizzi e un'icona di avviso accanto a Origini in DevTools.

Casella di controllo. 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.

L'operazione asincrona nello stack di chiamate.

Per maggiori informazioni, consulta Visualizzare le analisi dello stack asincrone.

Globali

In questa sezione sono elencate le opzioni con effetti globali in DevTools.

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.

Casella di controllo. 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.

Casella di controllo. Attiva la sincronizzazione delle impostazioni ti consente di sincronizzare le impostazioni DevTools su più dispositivi.

Per utilizzare questa impostazione, devi prima attivare Sincronizzazione Chrome. Per ulteriori informazioni, vedi Impostazioni di sincronizzazione.