Scopri nuovi flussi di lavoro di debug con questo riferimento completo delle funzionalità di debug di DevTools di Chrome.
Consulta Iniziare a eseguire il debug di JavaScript in Chrome DevTools per conoscere le nozioni di base del debug.
Mettere in pausa il codice con i punti di interruzione
Imposta un punto di interruzione per 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 e 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 il passaggio sopra una riga di codice
Quando metti in pausa una riga di codice contenente una funzione non pertinente al problema di cui stai eseguendo il debug, fai clic su Esegui oltre step_over per eseguire la funzione senza eseguire lo step.
Ad esempio, supponiamo che tu stia eseguendo 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
}
La riproduzione è in pausa il giorno A. Dopo aver premuto
step_over, DevTools esegue tutto
il codice nella funzione di cui stai eseguendo il passaggio, ovvero B e C.
DevTools si mette in pausa il giorno D.
Esegui il drill-in in una riga di codice
Quando metti in pausa una chiamata di funzione correlata al problema che stai cercando di risolvere,
fai clic su Esegui il passaggio
Ad esempio, supponiamo che tu stia eseguendo 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;
}
La riproduzione è in pausa il giorno A. Se premi Passa al livello, DevTools esegue questa riga di codice, quindi si ferma su B.
Uscire dalla riga di codice
Quando metti in pausa all'interno di una funzione non correlata al problema di cui stai eseguendo il debug, fai clic su step_out 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 fai clic su step_out, DevTools esegue il resto del codice in getName(), che in questo esempio è semplicemente 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 questione.
Potresti esaminare tutte le righe, ma questa operazione può essere noiosa. Potresti impostare un breakpoint a livello di riga di codice sulla riga che ti interessa e premere Riprendi, ma esiste un modo più rapido.
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 l'esecuzione dello script
Per continuare l'esecuzione dello script dopo una pausa, fai clic su Riprendi. 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 resume e poi seleziona Forza esecuzione script play_arrow.
Modificare il contesto del thread
Quando utilizzi 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 selezionato.