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 per i singoli riquadri.

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 impostazioni predefinite e ricarica.

Aspetto

Questa sezione elenca le opzioni che personalizzano l'aspetto di DevTools.

Temi: Passaggio del tema DevTools dalla preferenza di sistema a quello scuro a chiaro.
  • Preferenza di sistema
  • Chiaro
  • Scuro

Interessa Elementi > Stili e schede secondarie 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

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

Questo video mostra come passare da una scheda all'altra utilizzando le scorciatoie da tastiera corrispondenti.

Fonti

Questa sezione elenca le opzioni che personalizzano il riquadro Origini.

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.

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

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.

È 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.

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

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

Richiede il ricaricamento di DevTools.

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

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 spazi vuoti: Opzioni selezionate: Tutte e Dopo.
  • Nessuno
  • Tutti (...)
  • Trailer

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.

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.

Codice con formattazione a capo nel riquadro Origini.
Il riquadro Origini mostra i file .scss nella sezione Autore dell'albero di navigazione. Il riquadro Stili nel riquadro Elementi mostra i link alle origini .scss accanto alle regole CSS.

Questo video mostra come scorrere oltre la fine del file quando attivi questa opzione.

Se non viene attivata, 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.
Rientro predefinito: Disattivazione dell'override delle opzioni e modifica del rientro predefinito da due spazi a otto e quindi del tasto Tab.
  • 2 spazi
  • 4 spazi
  • 8 spazi
  • Carattere Tab

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.

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.

Rete

Questa sezione elenca le opzioni che consentono di personalizzare il riquadro Rete. La maggior parte delle opzioni è la stessa delle impostazioni del riquadro.

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 nel riquadro Rete. Avvia o interrompe la registrazione delle richieste nel log di rete.

Il pulsante Registra log di rete nel riquadro 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 nel riquadro Rete. Disattiva la cache del browser.

La casella di controllo Disattiva cache.

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.

Prestazioni

Questa sezione elenca le opzioni che personalizzano il riquadro Rendimento.

Azione rotellina del mouse sul grafico a forma di fiamma: Modifica dell'azione della rotellina del mouse dagli scorrimenti allo zoom per il grafico a fiamme.
  • 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 utilizzata nelle Impostazioni della console.

Opzioni simili nella console e nelle Impostazioni.

Questo video mostra come nascondere i messaggi della rete con questa opzione sia in Impostazioni. Impostazioni sia in Impostazioni della console.

Questo video mostra come attivare questa opzione sia nelle Impostazioni di Impostazioni. sia in Console > Impostazioni e selezionare il contesto nella Console.

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

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.

Estensione

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

Gestione link: Scegliere un'opzione per aprire i link.
  • Automatica. Apre i file nel riquadro Origini per impostazione predefinita.
  • 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.

Debugger

Questa sezione elenca le opzioni che controllano il comportamento di Debugger.

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 l'icona di avviso Avviso. accanto a Origini.

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

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

Operazione asincrona nello stack di chiamate.

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

Globale

Questa sezione elenca 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 abiliti questa opzione, si apre una nuova scheda *con* DevTools.

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.