Scopri nuovi flussi di lavoro di debug con questo riferimento completo delle funzionalità di debug di Chrome DevTools.
Consulta Iniziare a eseguire il debug di JavaScript in Chrome DevTools per conoscere le nozioni di base sul debug.
Mettere in pausa il codice con i punti di interruzione
Imposta un punto di interruzione in modo da poter mettere in pausa il codice durante l'esecuzione. Per scoprire come impostare i punti di interruzione, consulta Mettere in pausa il codice con i punti di interruzione.
Controllare i valori in pausa
Mentre l'esecuzione è in pausa, il debugger valuta tutte le variabili, le costanti e gli oggetti all'interno della funzione corrente fino a un punto di interruzione. Il debugger mostra i valori correnti in linea accanto alle dichiarazioni corrispondenti.
Puoi utilizzare la console per eseguire query sulle variabili, sulle costanti e sugli oggetti valutati.
Visualizzare l'anteprima delle proprietà di classi/funzioni al passaggio del mouse
Mentre l'esecuzione è in pausa, passa il mouse sopra il nome di una classe o di una funzione per visualizzarne l'anteprima delle proprietà.
Esplorare il codice
Una volta messo in pausa il codice, esegui il passaggio, un'espressione alla volta, esaminando il flusso di controllo e i valori delle proprietà.
Esegui istruzione/routine riga di codice
Quando è attiva la pausa in una riga di codice contenente una funzione non pertinente al problema di cui stai eseguendo il debug, fai clic su Esegui oltre
per eseguire la funzione
senza eseguire il drill-through.
Ad esempio, supponi di eseguire il debug del seguente codice:
function updateHeader() {
var day = new Date().getDay();
var name = getName(); // A
updateName(name); // D
}
function getName() {
var name = app.first + ' ' + app.last; // B
return name; // C
}
Il tuo dispositivo è in pausa su A. Se premi Esegui il passaggio, DevTools esegue tutto il codice della funzione che stai ignorando, ovvero B e C. DevTools si mette in pausa su D.
Esegui il drill-in nella riga di codice
Quando metti in pausa una riga di codice contenente una chiamata di funzione correlata al problema di cui stai eseguendo il debug, fai clic su Esegui il passaggio
per esaminare ulteriormente la funzione.
Ad esempio, supponi di eseguire il debug del seguente codice:
function updateHeader() {
var day = new Date().getDay();
var name = getName(); // A
updateName(name);
}
function getName() {
var name = app.first + ' ' + app.last; // B
return name;
}
Il tuo dispositivo è in pausa su A. Se premi Accedi, DevTools esegue questa riga di codice, quindi fa una pausa il giorno B.
Esci dalla riga di codice
Quando la metti in pausa all'interno di una funzione non correlata al problema che stai eseguendo il debug, fai clic su Esci 
per eseguire il resto del codice della funzione.
Ad esempio, supponiamo che tu stia eseguendo il debug del seguente codice:
function updateHeader() {
var day = new Date().getDay();
var name = getName();
updateName(name); // C
}
function getName() {
var name = app.first + ' ' + app.last; // A
return name; // B
}
La riproduzione è in pausa il giorno A. Se premi Esegui il riassorbimento, DevTools esegue il resto del codice in getName(), che in questo esempio è solo B, e poi si ferma su C.
Esegui tutto il codice fino a una determinata riga
Durante il debug di una funzione lunga, potrebbe esserci molto codice non correlato al problema in discussione.
Potresti esaminare tutte le righe, ma questa operazione può essere noiosa. Potresti impostare un breakpoint di riga di codice sulla riga che ti interessa e premere Riprendi esecuzione script
, ma esiste un modo più veloce.
Fai clic con il tasto destro del mouse sulla riga di codice che ti interessa e seleziona Continua qui. DevTools esegue tutto il codice fino a quel punto, quindi si ferma in quella riga.
Riprendi esecuzione dello script
Per continuare l'esecuzione dello script dopo una pausa, fai clic su Riprendi esecuzione dello script
. DevTools
esegue lo script fino al breakpoint successivo, se presente.
Forzare l'esecuzione dello script
Per ignorare tutti i punti di interruzione e forzare la ripresa dell'esecuzione dello script, fai clic e tieni premuto Riprendi esecuzione script 
e poi seleziona Forza esecuzione script
.
Modificare il contesto del thread
Quando lavori con web worker o service worker, fai clic su un contesto elencato nel riquadro Thread per passare a quel contesto. L'icona a forma di freccia blu indica il contesto attualmente selezionato.
Il riquadro Thread nello screenshot sopra è delineato in blu.
Ad esempio, supponiamo che tu abbia interrotto l'esecuzione in un breakpoint sia nello script principale sia nello script del worker del servizio. Vuoi visualizzare le proprietà locali e globali del contesto del service worker, ma il riquadro Origini mostra il contesto dello script principale. Se fai clic sulla voce del servizio worker nel riquadro Thread, puoi passare a quel contesto.
Visualizzazione delle espressioni separate da virgole
L'esplorazione delle espressioni separate da virgola ti consente di eseguire il debug del codice minimizzato. Ad esempio, considera il seguente codice:
function foo() {}
function bar() {
foo();
foo();
return 42;
}
bar();
In formato compresso, contiene un'espressione foo(),foo(),42 separata da virgole:
function foo(){}function bar(){return foo(),foo(),42}bar();
Il Debugger esegue gli stessi passaggi per eseguire queste espressioni.
Pertanto, il comportamento dei passaggi è identico:
- Tra codice minimizzato e creato.
- Quando utilizzi le mappe di origine per eseguire il debug del codice minimizzato in termini di codice originale. In altre parole, quando vedi i punti e virgola, puoi sempre aspettarti di esaminarli anche se il codice sorgente effettivo di cui stai eseguendo il debug è minimizzato.
Visualizzare e modificare le proprietà locali, di chiusura e globali
Mentre il codice è in pausa su una riga di codice, utilizza il riquadro Ambito per visualizzare e modificare i valori delle proprietà e delle variabili negli ambiti locale, di chiusura e globale.
- Fai doppio clic su un valore della proprietà per modificarlo.
- Le proprietà non enumerabili non sono selezionabili.
Il riquadro Ambito nello screenshot sopra è delineato in blu.
Visualizza lo stack di chiamate attuale
Quando metti in pausa una riga di codice, utilizza il riquadro Call Stack per visualizzare la serie di chiamate che ti ha portato a questo punto.
Fai clic su una voce per passare alla riga di codice in cui è stata chiamata la funzione. L'icona a forma di freccia blu rappresenta la funzione attualmente evidenziata da DevTools.
Il riquadro Call Stack nello screenshot sopra è delineato in blu.
Riavviare una funzione (frame) in uno stack di chiamate
Per osservare il comportamento di una funzione ed eseguirla di nuovo senza dover riavviare l'intero flusso di debug, puoi riavviare l'esecuzione di una singola funzione quando questa funzione è in pausa. In altre parole, puoi riavviare il frame della funzione nello stack di chiamate.
Per riavviare un frame:
- Metti in pausa l'esecuzione della funzione in un punto di interruzione. Il riquadro Call Stack registra l'ordine delle chiamate di funzione.
Nel riquadro Stack di chiamate, fai clic con il tasto destro del mouse su una funzione e seleziona Riavvia frame dal menu a discesa.
Per capire come funziona Riavvia frame, considera il seguente codice:
function foo(value) {
console.log(value);
bar(value);
}
function bar(value) {
value++;
console.log(value);
debugger;
}
foo(0);
La funzione foo() prende 0 come argomento, lo registra e chiama la funzione bar(). La funzione bar(), a sua volta, incrementa l'argomento.
Prova a riavviare i frame di entrambe le funzioni nel seguente modo:
- Copia il codice riportato sopra in un nuovo snippet ed eseguilo. L'esecuzione si interrompe al punto di interruzione riga di codice
debugger. - Tieni presente che il debugger mostra il valore corrente accanto alla dichiarazione della funzione:
value = 1.
- Riavvia il frame
bar().
- Scorri l'istruzione di incremento del valore premendo
F9.
Tieni presente che il valore corrente aumenta: value = 2. - Facoltativamente, nel riquadro Ambito, fai doppio clic sul valore per modificarlo e impostare il valore desiderato.
Prova a riavviare il frame
bar()e a eseguire l'istruzione di incremento più volte. Il valore continua ad aumentare.
Il riavvio del frame non reimposta gli argomenti. In altre parole, il riavvio non ripristina lo stato iniziale alla chiamata di funzione. Sposta semplicemente il cursore di esecuzione all'inizio della funzione.
Pertanto, il valore corrente dell'argomento persiste in memoria durante i riavvii della stessa funzione.
- Ora riavvia il frame
foo()nello stack di chiamate.
Tieni presente che il valore è di nuovo 0.
In JavaScript, le modifiche agli argomenti non sono visibili all'esterno della funzione. Le funzioni nidificate ricevono i valori, non le relative posizioni in memoria.
1. Riprendi l'esecuzione dello script (F8) per completare questo tutorial.
Mostra frame nell'elenco di elementi da ignorare
Per impostazione predefinita, il riquadro Stack di chiamate mostra solo i frame pertinenti al tuo codice e omette eventuali script aggiunti a 
Impostazioni > Elenco di utenti ignorati.
Per visualizzare lo stack completo delle chiamate, inclusi i frame di terze parti, attiva Mostra frame nell'elenco di elementi da ignorare nella sezione Stack chiamate.
Prova questa pagina dimostrativa:
- Nel riquadro Origini, apri il file
src>app>app.component.ts. - Imposta un punto di interruzione nella funzione
increment(). - Nella sezione Stack di chiamate, seleziona o deseleziona la casella di controllo Mostra frame inclusi nell'elenco di elementi da ignorare e osserva l'elenco completo o pertinente di frame nello stack di chiamate.
Visualizzare i frame asincroni
Se supportato dal framework che stai utilizzando, DevTools può tracciare le operazioni asincrone collegando entrambe le parti del codice asincrono.
In questo caso, lo Stack di chiamate mostra l'intera cronologia chiamate, inclusi i frame di chiamata asincroni.
Copia analisi dello stack
Fai clic con il pulsante destro del mouse in un punto qualsiasi del riquadro Stack di chiamate e seleziona Copia analisi dello stack per copiare lo stack di chiamate corrente negli appunti.
Di seguito è riportato un esempio di output:
getNumber1 (get-started.js:35)
inputsAreEmpty (get-started.js:22)
onClick (get-started.js:15)
Esplorare la struttura ad albero dei file
Utilizza il riquadro Pagina per spostarti nella struttura ad albero dei file.
Raggruppa i file creati e di cui è stato eseguito il deployment nella struttura ad albero dei file
Quando sviluppi applicazioni web utilizzando framework (ad esempio React o Angular), può essere difficile navigare nelle origini a causa dei file minimizzati generati dagli strumenti di compilazione (ad esempio webpack o Vite).
Per aiutarti a navigare tra le origini, il riquadro Origini > Pagina può raggruppare i file in due categorie:
Creato. Simili ai file di origine visualizzati nell'IDE. DevTools genera questi file in base alle mappe di origine fornite dagli strumenti di compilazione.
Deployment. I file effettivi letti dal browser. In genere questi file sono minimizzati.
Per attivare il raggruppamento, attiva l'opzione 
> Raggruppa file per Creato/Distribuito 
nel menu con tre puntini nella parte superiore della struttura di file.
Nascondi le origini nell'elenco di elementi da ignorare dalla struttura dei file
Per aiutarti a concentrarti solo sul codice che crei, per impostazione predefinita il riquadro Origini > Pagina rende non disponibili tutti gli script o le directory aggiunti a 
Impostazioni > Elenco di ignorati.
Per nascondere completamente questi script, seleziona Origini > Pagina > 
> Nascondi origini in elenco di elementi da ignorare 
.
Ignorare uno script o un pattern di script
Ignora uno script per saltarlo durante il debug. Se viene ignorato, uno script viene nascosto nel riquadro Call Stack e non viene mai eseguito il passaggio alle funzioni dello script quando esamini il codice.
Ad esempio, supponiamo che tu stia esaminando questo codice:
function animate() {
prepare();
lib.doFancyStuff(); // A
render();
}
A è una libreria di terze parti di cui ti fidi. Se hai la certezza che il problema che stai eseguendo il debug non sia correlato alla libreria di terze parti, ha senso ignorare lo script.
Ignorare uno script o una directory dalla struttura ad albero dei file
Per ignorare un singolo script o un'intera directory:
- In Origini > Pagina, fai clic con il tasto destro del mouse su una directory o un file di script.
- Seleziona Aggiungi directory/script all'elenco degli elementi da ignorare.
Se non hai nascosto le origini nell'elenco ignorato, puoi selezionarne una nella struttura ad albero dei file e, nel banner di avviso 
, fare clic su Rimuovi dall'elenco ignorato o Configura.
In caso contrario, puoi rimuovere dall'elenco le directory e gli script nascosti e ignorati in 
Impostazioni > Elenco ignora.
Ignorare uno script dal riquadro Editor
Per ignorare uno script dal riquadro Editor:
- Apri il file.
- Fai clic con il tasto destro del mouse in un punto qualsiasi.
- Seleziona Aggiungi script all'elenco di elementi da ignorare.
Puoi rimuovere uno script dall'elenco di elementi ignorati da 
Impostazioni > Elenco di elementi da ignorare.
Ignorare uno script dal riquadro Call Stack
Per ignorare uno script dal riquadro Pila chiamate:
- Fai clic con il tasto destro del mouse su una funzione nello script.
- Seleziona Aggiungi script all'elenco di elementi da ignorare.
Puoi rimuovere uno script dall'elenco di elementi ignorati da 
Impostazioni > Elenco di elementi da ignorare.
Ignorare uno script dalle Impostazioni
Vedi 
Impostazioni > Elenco di persone da ignorare.
Esegui snippet di codice di debug da qualsiasi pagina
Se ti ritrovi a eseguire più volte lo stesso codice di debug nella console, ti consigliamo di utilizzare gli snippet. Gli snippet sono script eseguibili che crei, memorizzi ed esegui in DevTools.
Per scoprire di più, consulta Eseguire snippet di codice da qualsiasi pagina.
Monitorare i valori delle espressioni JavaScript personalizzate
Utilizza il riquadro Monitora per monitorare i valori delle espressioni personalizzate. Puoi guardare qualsiasi espressione JavaScript valida.
- Fai clic su Aggiungi espressione
per creare una nuova espressione dell'orologio. - Fai clic su Aggiorna
per aggiornare
i valori di tutte le espressioni esistenti. I valori vengono aggiornati automaticamente durante la visualizzazione del codice. - Passa il mouse sopra un'espressione e fai clic su Elimina espressione
per eliminarla.
Controllare e modificare gli script
Quando apri uno script nel riquadro Pagina, DevTools ne mostra i contenuti nel riquadro Editor. Nel riquadro Editor, puoi sfogliare e modificare il codice.
Inoltre, puoi sostituire i contenuti localmente o creare uno spazio di lavoro e salvare le modifiche apportate in DevTools direttamente nelle tue origini locali.
Rendi leggibile un file minimizzato
Per impostazione predefinita, il riquadro Origini stampa in modo abbastanza semplice i file minimizzati. Quando la versione è stampata, l'Editor potrebbe mostrare una singola riga di codice lunga su più righe, con - per indicare che si tratta della continuazione della riga.
Per visualizzare il file compresso così come è stato caricato, fai clic su { } nell'angolo in basso a sinistra dell'editor.
Piegare blocchi di codice
Per comprimere un blocco di codice, passa il mouse sopra il numero di riga nella colonna di sinistra e fai clic su 
Comprimi.
Per espandere il blocco di codice, fai clic su {...} accanto.
Per configurare questo comportamento, consulta 
Impostazioni > Preferenze > Origini.
Modificare uno script
Quando correggi un bug, spesso vuoi testare alcune modifiche al codice JavaScript. Non è necessario apportare le modifiche in un browser esterno e ricaricare la pagina. Puoi modificare lo script in DevTools.
Per modificare uno script:
- Apri il file nel riquadro Editor del riquadro Origini.
- Apporta le modifiche nel riquadro Editor.
Premi Comando+S (Mac) o Ctrl+S (Windows, Linux) per salvare. DevTools applica patch all'intero file JS nel motore JavaScript di Chrome.
Il riquadro Editor nello screenshot sopra è evidenziato in blu.
Modificare dal vivo una funzione in pausa
Mentre l'esecuzione è in pausa, puoi modificare la funzione corrente e applicare le modifiche in tempo reale con le seguenti limitazioni:
- Puoi modificare solo la funzione principale nello stack chiamate.
- Non devono essere presenti chiamate ricorsive alla stessa funzione più avanti nello stack.
Per modificare in tempo reale una funzione:
- Metti in pausa l'esecuzione con un punto di interruzione.
- Modifica la funzione in pausa.
- Premi Comando/Control + S per applicare le modifiche. Il debugger riavvia la funzione automaticamente.
- Continua l'esecuzione.
Guarda il video di seguito per scoprire questo flusso di lavoro.
In questo esempio, le variabili addend1 e addend2 hanno inizialmente un tipo di string errato. Pertanto, anziché aggiungere numeri, le stringhe vengono concatenate. Per risolvere il problema, le funzioni parseInt() vengono aggiunte durante la modifica in tempo reale.
Cercare e sostituire testo in uno script
Per cercare testo in uno script:
- Apri il file nel riquadro Editor del riquadro Origini.
- Per aprire una barra di ricerca integrata, premi Comando+F (Mac) o Ctrl+F (Windows, Linux).
- Nella barra, inserisci la query.
Facoltativamente, puoi:
- Fai clic su
Corrispondenza maiuscole/minuscole per fare in modo che la query sia sensibile alle maiuscole. - Fai clic su
Usa espressione regolare per eseguire una ricerca utilizzando un'espressione RegEx.
- Fai clic su
- Premi Invio. Per passare al risultato di ricerca precedente o successivo, premi il tasto su o giù.
Per sostituire il testo trovato:
- Nella barra di ricerca, fai clic sul pulsante
Sostituisci.
- Digita il testo da sostituire, poi fai clic su Sostituisci o Sostituisci tutto.