Scopri i nuovi flussi di lavoro di debug con questo riferimento completo delle funzionalità di debug di Chrome DevTools.
Consulta la guida introduttiva al debug di JavaScript in Chrome DevTools per apprendere le nozioni di base sul debug.
Metti in pausa il codice con punti di interruzione
Imposta un punto di interruzione in modo da poter mettere in pausa il codice durante l'esecuzione. Per informazioni su come impostare i punti di interruzione, vedi Metti in pausa il codice con i punti di interruzione.
Controlla i valori in pausa
Quando 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 su variabili, costanti e oggetti valutati.
Visualizza l'anteprima delle proprietà della classe/della funzione al passaggio del mouse
Mentre l'esecuzione è in pausa, passa il mouse sul nome di una classe o di una funzione per visualizzarne l'anteprima.
Procedura dettagliata
Dopo aver messo in pausa il codice, eseguilo un'espressione alla volta, esaminando il flusso di controllo e i valori delle proprietà.
Esegui un passaggio sulla riga di codice
Quando sei in pausa su una riga di codice contenente una funzione non pertinente al problema di cui stai eseguendo il debug, fai clic su Esegui l'operazione
per eseguire la funzione senza accedere.
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
}
Sei in pausa il giorno A. Se premi Step over, DevTools esegue tutto il codice nella funzione su cui stai eseguendo il passaggio, ovvero B e C. DevTools viene messo in pausa il giorno D.
Entra nella riga di codice
Quando il dispositivo è in pausa su una riga di codice contenente una chiamata funzione correlata al problema di cui stai eseguendo il debug, fai clic su Passaggio in
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;
}
Sei in pausa il giorno A. Se premi Passaggio in, DevTools esegue questa riga di codice, poi fa una pausa in data
B.
Esci dalla riga di codice
Quando è in pausa all'interno di una funzione non correlata al problema di cui stai eseguendo il debug, fai clic su Esci 
per eseguire il resto del codice della funzione.
Ad esempio, supponi di eseguire 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
}
Sei in pausa il giorno A. Se premi Passaggio out, DevTools esegue il resto del codice in getName(), che in questo esempio è solo B, quindi viene messo in pausa il giorno C.
Esegui tutto il codice fino a una determinata riga
Durante il debug di una funzione lunga, potrebbe essere presente molto codice non correlato al problema di debug.
Potresti attraversare tutte le linee, ma questo può essere noioso. Puoi impostare un punto di interruzione riga di codice sulla riga che ti interessa, quindi premere Riprendi esecuzione script
, ma c'è 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, poi si ferma su quella riga.
Riprendi l'esecuzione dello script
Per continuare l'esecuzione dello script dopo una pausa, fai clic su Riprendi esecuzione script
. DevTools esegue lo script fino al punto di interruzione successivo, se presente.
Forza l'esecuzione dello script
Per ignorare tutti i punti di interruzione e forzare l'esecuzione dello script, fai clic e tieni premuto su Riprendi esecuzione dello script 
, poi seleziona Forza esecuzione dello script
.
Modificare il contesto dei 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 rappresenta il contesto attualmente selezionato.
Il riquadro Thread nello screenshot sopra è evidenziato in blu.
Ad esempio, supponi di aver effettuato una pausa in corrispondenza di un punto di interruzione sia nello script principale sia nello script del service worker. 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 service worker nel riquadro Thread, puoi passare a quel contesto.
Spostati tra le espressioni separate da virgole
Lo scorrimento delle espressioni separate da virgole consente di eseguire il debug del codice minimizzato. Ad esempio, considera il seguente codice:
function foo() {}
function bar() {
foo();
foo();
return 42;
}
bar();
Quando minimizzato, contiene un'espressione foo(),foo(),42 separata da virgole:
function foo(){}function bar(){return foo(),foo(),42}bar();
Il componente Debugger esegue nello stesso modo queste espressioni.
Pertanto, il comportamento dei passi è identico:
- Tra codice minimizzato e creato.
- Quando utilizzi le mappe di origine per eseguire il debug del codice minimizzato rispetto al codice originale. In altre parole, i punti e virgola vengono sempre visualizzati, anche se l'origine effettiva di cui esegui il debug è minimizzata.
Visualizzare e modificare le proprietà locali, di chiusura e globali
Mentre il cliente è 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, globale e di chiusura.
- Fai doppio clic sul valore di una proprietà per modificarlo.
- Le proprietà non enumerabili sono visualizzate in grigio.
Il riquadro Ambito nello screenshot sopra riportato è evidenziato in blu.
Visualizza lo stack di chiamate attuale
Mentre sei in pausa su una riga di codice, utilizza il riquadro Stack chiamate per visualizzare lo stack 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 indica la funzione che DevTools sta evidenziando.
Il riquadro Stack chiamate nello screenshot sopra riportato è contornato in blu.
Riavvia una funzione (frame) in uno stack di chiamate
Per osservare il comportamento di una funzione ed eseguirla nuovamente 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 Stack chiamate registra l'ordine delle chiamate di funzione.
Nel riquadro Stack chiamate, fai clic con il tasto destro del mouse su una funzione e seleziona Riavvia frame dal menu a discesa.
Per comprendere come funziona Riavvia frame, prendi in considerazione 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 lo 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 della riga di codice
debugger. - Tieni presente che il debugger mostra il valore corrente accanto alla dichiarazione della funzione:
value = 1.
- Riavvia il frame
bar().
- Segui l'istruzione di incremento del valore premendo
F9.
Nota che il valore attuale aumenta: value = 2. - (Facoltativo) Nel riquadro Ambito, fai doppio clic sul valore per modificarlo e imposta il valore che preferisci.
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 al momento della chiamata di funzione. ma sposta semplicemente il puntatore di esecuzione all'inizio della funzione.
Di conseguenza, il valore dell'argomento corrente persiste in memoria tra i riavvii della stessa funzione.
- Ora riavvia il frame
foo()in Stack chiamate.
Nota che il valore è di nuovo 0.
In JavaScript, le modifiche agli argomenti non sono visibili (riflettete) al di fuori della funzione. Le funzioni nidificate ricevono valori, non le loro 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 chiamate mostra solo i frame pertinenti al tuo codice e omette eventuali script aggiunti a 
Impostazioni > Elenco da ignorare.
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.
Provalo su 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 chiamate, seleziona o deseleziona la casella di controllo Mostra frame nell'elenco da ignorare e osserva l'elenco pertinente o completo dei frame nello stack di chiamate.
Visualizza frame asincroni
Se supportato dal framework che stai utilizzando, DevTools può tracciare le operazioni asincrone collegando insieme entrambe le parti del codice asincrono.
In questo caso, l'elenco chiamate mostra l'intera cronologia chiamate, inclusi i frame delle chiamate asincroni.
Copia analisi dello stack
Fai clic con il tasto destro del mouse in un punto qualsiasi del riquadro Stack chiamate e seleziona Copia analisi dello stack per copiare lo stack di chiamate corrente negli appunti.
Di seguito è riportato un esempio dell'output:
getNumber1 (get-started.js:35)
inputsAreEmpty (get-started.js:22)
onClick (get-started.js:15)
Esplorare la struttura dei file
Utilizza il riquadro Pagina per esplorare la struttura ad albero dei file.
File creati e distribuiti dal gruppo nella struttura ad albero dei file
Durante lo sviluppo di applicazioni web utilizzando framework (ad esempio React o Angular), può essere difficile navigare tra le origini a causa dei file minimizzati generati dagli strumenti di creazione (ad esempio webpack o Vite).
Per aiutarti a esplorare le origini, il riquadro Origini > Pagina può raggruppare i file in due categorie:
Creato. Simile ai file di origine visualizzati nell'IDE. DevTools genera questi file in base alle mappe di origine fornite dai tuoi strumenti di creazione.
Deployment eseguito: I file effettivi letti dal browser. In genere questi file sono minimizzati.
Per attivare il raggruppamento, attiva l'opzione 
> Raggruppa file per Creato/Distribuito 
dal menu con tre puntini nella parte superiore della struttura ad albero dei file.
Nascondi le origini nell'elenco di elementi da ignorare dalla struttura dei file
Per concentrarti solo sul codice che crei, per impostazione predefinita il riquadro Origini > Pagina non rende selezionabili tutti gli script o le directory aggiunti a 
Impostazioni > Ignora elenco.
Per nascondere tutti 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 ignorarlo durante il debug. Se viene ignorato, uno script è oscurato nel riquadro Stack chiamate e non puoi mai entrare nelle funzioni dello script quando esamini il codice.
Ad esempio, supponiamo che tu stia seguendo questo codice:
function animate() {
prepare();
lib.doFancyStuff(); // A
render();
}
A è una libreria di terze parti che ritieni attendibile. Se hai la certezza che il problema di cui esegui il debug non sia correlato alla libreria di terze parti, ha senso ignorare lo script.
Ignora uno script o una directory dalla struttura dei file
Per ignorare un singolo script o un'intera directory:
- In Origini > Pagina, fai clic con il pulsante destro del mouse su una directory o un file di script.
- Seleziona Aggiungi directory/script all'elenco di elementi da ignorare.
Se non hai nascondito le origini nell'elenco di origini ignorate, puoi selezionare un'origine di questo tipo nella struttura dei file e, nel banner di avviso 
, fare clic su Rimuovi dall'elenco di elementi ignorati o su Configura.
In caso contrario, puoi rimuovere le directory e gli script nascosti e ignorati dall'elenco in 
Impostazioni > Ignora elenco.
Ignorare uno script dal riquadro dell'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 degli elementi ignorati da 
Impostazioni > Ignora elenco.
Ignorare uno script dal riquadro Stack di chiamate
Per ignorare uno script dal riquadro Stack chiamate:
- Fai clic con il tasto destro del mouse su una funzione dello script.
- Seleziona Aggiungi script all'elenco di elementi da ignorare.
Puoi rimuovere uno script dall'elenco degli elementi ignorati da 
Impostazioni > Ignora elenco.
Ignorare uno script dalle Impostazioni
Vedi 
Impostazioni > Ignora elenco.
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, archivi ed esegui in DevTools.
Per saperne di più, consulta Eseguire snippet di codice da qualsiasi pagina.
Osserva i valori delle espressioni JavaScript personalizzate
Utilizza il riquadro di controllo per controllare i valori delle espressioni personalizzate. Puoi controllare qualsiasi espressione JavaScript valida.
- Fai clic su Aggiungi espressione
per creare una nuova espressione di smartwatch. - Fai clic su Aggiorna
per aggiornare i valori di tutte le espressioni esistenti. I valori vengono aggiornati automaticamente durante la lettura del codice. - Passa il mouse sopra un'espressione e fai clic su Elimina espressione
per eliminarla.
Ispeziona e modifica gli script
Quando apri uno script nel riquadro Pagina, DevTools mostra i suoi contenuti nel riquadro Editor. Nel riquadro Editor, puoi sfogliare e modificare il codice.
Inoltre, puoi eseguire l'override dei contenuti localmente o creare un'area di lavoro e salvare le modifiche apportate in DevTools direttamente nelle origini locali.
Rendere leggibile un file minimizzato
Per impostazione predefinita, il riquadro Origini mostra le stampe dei file minimizzati. Se hai una copia cartacea, l'Editor potrebbe mostrare una singola riga di codice lunga su più righe, con - per indicare che si tratta della continuazione di riga.
Per visualizzare il file minimizzato così come è stato caricato, fai clic su { } nell'angolo in basso a sinistra dell'Editor.
Piegare blocchi di codice
Per piegare un blocco di codice, passa il mouse sopra il numero di riga nella colonna a sinistra e fai clic su 
Comprimi.
Fai clic sulla {...} accanto al blocco di codice per aprirlo.
Per configurare questo comportamento, vedi 
Impostazioni > Preferenze > Origini.
Modificare uno script
Quando correggi un bug, spesso vuoi provare alcune modifiche al codice JavaScript. Non è necessario apportare le modifiche in un browser esterno e poi ricaricare la pagina. Puoi modificare il tuo script in DevTools.
Per modificare uno script:
- Apri il file nel riquadro Editor del riquadro Origini.
- Apporta le modifiche nel riquadro dell'Editor.
Premi Comando+S (Mac) o Ctrl+S (Windows, Linux) per salvare. DevTools corregge l'intero file JS nel motore JavaScript di Chrome.
Il riquadro dell'Editor nello screenshot sopra riportato è evidenziato in blu.
Modificare una funzione in pausa attiva
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 più in alto nell'elenco di chiamate.
- Non ci devono essere chiamate ricorsive alla stessa funzione più in basso 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 / Ctrl + S per applicare le modifiche. Il debugger riavvia la funzione automaticamente.
- Continua l'esecuzione.
Guarda il video qui sotto per informazioni su questo flusso di lavoro.
In questo esempio, le variabili addend1 e addend2 hanno inizialmente un tipo string errato. Quindi, invece di aggiungere numeri, le stringhe vengono concatenate. Per correggerlo, le funzioni parseInt() vengono aggiunte durante la modifica in tempo reale.
Cercare e sostituire testo in uno script
Per cercare del 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).
- Inserisci la query nella barra.
Facoltativamente, puoi:
- Fai clic su
Maiuscole/minuscole per fare distinzione tra maiuscole e minuscole per la query. - Fai clic su
Utilizza espressione regolare per eseguire la ricerca utilizzando un'espressione RegEx.
- Fai clic su
- Premi Invio. Per passare al risultato di ricerca precedente o successivo, premi il pulsante su o giù.
Per sostituire il testo trovato:
- Nella barra di ricerca, fai clic sul pulsante Sostituisci
.
- Digita il testo da sostituire, quindi fai clic su Sostituisci o Sostituisci tutto.
Disattiva JavaScript
Consulta l'articolo Disattivare JavaScript con Chrome DevTools.