Preferenze

Sofia Emelianova
Sofia Emelianova

Configura l'aspetto e il comportamento di DevTools e dei relativi riquadri utilizzando Impostazioni. Impostazioni > Preferenze. Questa scheda elenca sia le opzioni di personalizzazione generali sia quelle specifiche per il pannello.

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 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:

  • 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 valori predefiniti e ricarica.

Aspetto

Questa sezione elenca 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.

Temi: Modifica del tema di DevTools dalle preferenze di sistema al tema scuro e viceversa.
  • Preferenza di sistema
  • Chiaro
  • Scuro

Layout del riquadro Menu a discesa. organizza i riquadri in pannelli.

Interessano Elementi > Stili e le relative schede, nonché 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 l'interfaccia utente di DevTools.

Per applicare questa impostazione, ricarica DevTools.

Lingua: Il riquadro delle impostazioni in cinese.
  • Lingua dell'interfaccia utente del browser
  • Una delle opzioni di impostazioni internazionali, in questo esempio cinese

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

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

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

La scheda del riquadro Novità.

Fonti

Questa sezione elenca le opzioni che consentono di personalizzare il riquadro Origini.

Casella di controllo. 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 in un file sorgente dell'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 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.

Casella di controllo. Attiva le mappe di origine di 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. Abilita lo spostamento dello stato attivo con Tab consente al tasto Tasto Tab. Tab di spostare lo stato attivo all'interno di DevTools anziché inserire un carattere Tab nell'editor.

Richiede la ricarica 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.

Casella di controllo. Rileva rientro imposta il rientro su quello del file di origine aperto nell'Editor.

Richiede la ricarica di DevTools.

Questo video mostra innanzitutto l'indentazione predefinita di otto spazi. Se attivi questa opzione, l'indentazione predefinita viene sostituita da quella del file di origine.

Casella di controllo. Completamento automatico attiva utili suggerimenti in Editor.

Questo video non mostra alcun suggerimento. Quando attivi questa opzione, Editor mostra i suggerimenti per il completamento dei comandi.

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

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

Casella di controllo. Corrispondenza delle parentesi sottolinea e mette in evidenza in rosso chiaro nell'Editor una parentesi tonda, una parentesi graffe o una parentesi senza una coppia.

Una parentesi graffa senza una coppia sottolineata in rosso.

Casella di controllo. La riduzione del codice ti consente di comprimere e espandere i blocchi di codice tra parentesi graffe nell'editor.

Richiede la ricarica di DevTools.

Questo video mostra come comprimere i blocchi di codice quando attivi questa opzione.

Mostra spazi vuoti Menu a discesa. mostra gli spazi vuoti nell'editor.

Richiede la ricarica di DevTools. Le opzioni consentono di:

  • Tutti indica tutti i caratteri di spazio vuoto come puntini (...). Inoltre, l'editor indica il carattere Tab come una riga ().
  • Finali evidenzia i caratteri di spazio vuoto alla fine delle righe in rosso chiaro.
Mostra spazi vuoti: Opzioni selezionate: Tutte e Finale.
  • Nessuno
  • Tutte (...)
  • Trailer

Casella di controllo. Mostra i valori della variabile in linea durante il debug mostra i valori delle variabili accanto agli enunciati di assegnazione mentre l'esecuzione è in pausa.

Il debugger in pausa durante l'esecuzione della funzione mostra i valori delle variabili accanto agli enunciati di assegnazione.

Casella di controllo. 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 inizialmente il riquadro Origini fuori fuoco quando viene messa 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. Formatta automaticamente il codice delle fonti minimizzate per renderle leggibili.

Quando è attiva la visualizzazione in formato, l'editor potrebbe mostrare una singola riga di codice lunga in più righe, preceduta da - per indicare che si tratta di una continuazione di riga.

Codice con formattazione a capo nel riquadro Origini.

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

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

Casella di controllo. Consenti scorrimento oltre la fine del file ti 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 mappe di origine, da percorsi di file remoti. Opzione disabilitata per impostazione predefinita per motivi di sicurezza.

Se non viene attivato, DevTools registra nella console messaggi simili al seguente:

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

L'opzione Ritiro predefinito Menu a discesa. ti consente di scegliere il numero di spazi inseriti dalla chiave Tasto Tab. Tab nell'editor.

Rientro predefinito: Disattivare le opzioni di override e modificare il rientro predefinito da due spazi a otto, quindi sulla barra Tab.
  • 2 spazi
  • 4 spazi
  • 8 spazi
  • Carattere Tab

Questo esempio mostra come impostare l'indentation predefinito su otto spazi e poi su un carattere Tab.

Elementi

Questa sezione elenca le opzioni che consentono di personalizzare il riquadro Elementi.

Casella di controllo. Mostra shadow DOM dell'agente utente mostra i nodi shadow DOM nella struttura DOM.

Il riquadro Elementi mostra i nodi DOM shadow.

Casella di controllo. A capo automatico spezza le righe lunghe nell'albero DOM e le inserisce nella riga successiva.

Il riquadro Elementi suddivide le righe lunghe in parole e le inserisce nella riga successiva.

Casella di controllo. Mostra commenti HTML mostra 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 Ispeziona.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 quando passi il mouse sopra.

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 nell'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 reindirizza a una pagina di riferimento CSS di MDN sulla proprietà.

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

Rete

Questa sezione elenca 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 durante i caricamenti di pagina.

Questo video mostra innanzitutto il log delle richieste aggiornato al ricaricamento della pagina, quindi mantenuto quando attivi questa opzione.

Casella di controllo. Registra log di rete corrisponde a Registra il 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. Attiva blocco richieste di rete blocca le richieste corrispondenti ai pattern nel riquadro Blocco richieste di rete.

Questo video mostra innanzitutto che le richieste non sono bloccate. Dopo aver attivato questa opzione, un pattern nel riquadro Blocco richieste di rete le blocca.

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

La casella di controllo Disattiva cache.

Casella di controllo. Consenti di generare HAR con dati sensibili aggiunge opzioni al pulsante di Esporta HAR che ti consentono di esportare con o senza dati sensibili (convalidati come corretti).

I dati sensibili sono i dati nelle intestazioni Cookie, Set-Cookie e Authorization.

Le due opzioni per il pulsante Esporta HAR.

Casella di controllo. Tipi di risorsa con codice colore evidenzia le richieste in diversi colori a seconda del tipo nella colonna Cascata del log di rete.

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

Casella di controllo. Raggruppa log di rete per frame è uguale 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 nella pagina mentre DevTools è aperto.

Una richiesta di rete correlata agli annunci visualizzata nel riquadro Rete con il filtro Richieste bloccate attivato.

Prestazioni

Questa sezione elenca le opzioni che consentono di personalizzare il riquadro Rendimento.

L'azione della rotellina del mouse sul grafico a dispersione Menu a discesa. assegna l'azione di scorrimento o zoom alla rotellina del mouse quando navighi nel grafico a dispersione.

Azione rotellina del mouse sul grafico a forma di fiamma: Modifica dell'azione della rotellina del mouse da scorrimento a zoom per il grafico a forma di fiamma.
  • Scorri
  • Zoom

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 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 della rete con questa opzione sia in Impostazioni. Impostazioni sia in Impostazioni della console.

Casella di controllo. 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 in Impostazioni. Impostazioni sia in Console > Impostazioni e selezionare il contesto nella Console.

Casella di controllo. Registra XMLHttpRequests consente alla Console di registrare le richieste XHR e Fetch.

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

Casella di controllo. Mostra timestamp consente alla console di mostrare i timestamp accanto ai messaggi.

Messaggi con timestamp elencati nella console.

Casella di controllo. Completamento automatico dalla cronologia consente alla Console di suggerire i comandi eseguiti in precedenza mentre digiti.

Puoi trovare la stessa opzione in Console > Impostazioni.

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

Casella di controllo. Accetta suggerimento di completamento automatico alla pressione del tasto Invio consente a Console di accettare il suggerimento selezionato dall'elenco a discesa di completamento automatico quando premi Invio.

Questo video mostra cosa succede quando premi Invio prima e dopo aver attivato questa opzione.

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

Puoi trovare la stessa opzione in Console > Impostazioni.

Messaggi simili nella console raggruppati.

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

Puoi trovare la stessa opzione in Console > Impostazioni.

La console mostra errori CORS.

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

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

Casella di controllo. Espandi automaticamente i messaggi console.trace() consente alla console di visualizzare i messaggi console.trace() espansi quando li registra.

Un messaggio console.trace() espanso nella console.

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

La console mostra i messaggi "Visitata" e salva i log in pagine diverse.

Estensione

Questa sezione elenca le opzioni che consentono di personalizzare la gestione dei link per le estensioni di Chrome DevTools.

Gestione link: Scegli un'opzione per aprire i link.
  • Automatica. Per impostazione predefinita, apre i file nel riquadro Origini.
  • Opzione arbitraria che può essere aggiunta da un'estensione di DevTools.

Persistenza

Questa sezione elenca le opzioni che controllano il modo in cui DevTools salva le modifiche apportate.

Casella di controllo. Attiva override locali consente a DevTools di mantenere le modifiche apportate alle origini durante i caricamenti della pagina.

Per ulteriori informazioni, consulta Sostituzioni locali.

Debugger

Questa sezione elenca le opzioni che controllano il comportamento del debugger.

Casella di controllo. Disattiva JavaScript ti consente di vedere l'aspetto e il comportamento della tua pagina web quando JavaScript è disattivato.

Ricarica la pagina per verificare se e come la pagina dipende da JavaScript durante il caricamento.

Quando JavaScript è disattivato, Chrome mostra l'icona JavaScript è stato disattivato. corrispondente nella barra degli indirizzi e 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 chiamate.

Per impostazione predefinita, il Debugger tenta di tracciare le operazioni asincrone se il framework in uso supporta questa funzionalità.

L'operazione asincrona nello stack di chiamate.

Per ulteriori informazioni, consulta Visualizzare le tracce dello stack asincrone.

Globale

Questa sezione elenca le opzioni che hanno 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. Ricerca mentre digiti consente a DevTools di "saltare" al primo risultato di ricerca mentre digiti la query di ricerca. Se l'opzione è disattivata, DevTools ti reindirizza al risultato solo quando premi Invio.

Questo video mostra innanzitutto come DevTools "salta" quando digiti una query di ricerca. Quando attivi questa opzione, DevTools ti reindirizza al primo risultato quando premi Invio.

Sincronizza

Questa sezione ti consente di configurare la sincronizzazione delle impostazioni tra i dispositivi.

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