Riferimento per il debug di JavaScript

Sofia Emelianova
Sofia Emelianova

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

Valutazioni in linea visualizzate accanto alle dichiarazioni.

Puoi utilizzare la console per eseguire query sulle variabili, sulle costanti e sugli oggetti valutati.

Utilizzo della 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à.

Visualizza l'anteprima delle proprietà di classi e funzioni.

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 la sessione è in pausa su una riga di codice contenente una funzione non pertinente al problema in fase di debug, fai clic su Esegui il passaggio step_over per eseguire la funzione senza eseguire il passaggio al suo interno.

Seleziona Esegui istruzione/routine.

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 esegui il passaggio, ovvero B e C. DevTools si mette in pausa su D.

Esegui il drill-in in una riga di codice

Quando è in pausa su una chiamata di funzione correlata al problema che stai eseguendo il debug, fai clic su Esegui il passaggio per esaminare la funzione.

Seleziona "Esegui il drill-in".

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.

Seleziona "Esci".

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.

Seleziona "Continua fino a qui".

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.

Seleziona "Riprendi esecuzione dello script".

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.

Seleziona "Forza esecuzione script".

Modificare il contesto del thread

Quando lavori con worker web 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.

Il riquadro Thread.
Il riquadro Thread è delineato in blu.

Ad esempio, supponiamo che tu abbia interrotto l'esecuzione in un punto di interruzione sia nello script principale sia nello script del servizio worker. Vuoi visualizzare le proprietà locali e globali per il contesto del worker di servizio, ma il riquadro Origini mostra il contesto dello script principale. Se fai clic sulla voce del servizio worker nel riquadro Thread, potrai passare a quel contesto.

Esplorare le espressioni separate da virgole

Puoi eseguire il debug del codice compresso esaminando le espressioni separate da virgola. 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 comunque la stessa procedura per queste espressioni.

Esplorazione di un'espressione separata da virgole.

Pertanto, il comportamento dei passaggi è identico:

  • Tra il codice compresso e quello creato dall'autore.
  • 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 di cui stai eseguendo il debug è minimizzato.

Visualizzare e modificare le proprietà locali, di chiusura e globali

Quando metti in pausa una riga di codice, utilizza il riquadro Ambito per visualizzare e modificare i valori di proprietà e variabili negli ambiti locale, di chiusura e globale.

  • Fai doppio clic su un valore della proprietà per modificarlo.
  • Le proprietà non enumerabili sono disattivate.
Il riquadro Ambito.
Il riquadro Ambito è delineato in blu.

Visualizza lo stack di chiamate corrente

Quando metti in pausa una riga di codice, utilizza il riquadro Call Stack per visualizzare lo stack chiamate che ti ha portato a questo punto.

Seleziona una voce per passare alla riga di codice in cui è stata chiamata la funzione. L'icona a forma di freccia blu indica la funzione evidenziata da DevTools.

Il riquadro Stack di chiamate.
Il riquadro Stack di chiamate è 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 è in pausa. In altre parole, puoi riavviare il frame della funzione nello stack di chiamate.

Per riavviare un frame:

  1. Metti in pausa l'esecuzione della funzione in un punto di interruzione. Il riquadro Call Stack registra l'ordine delle chiamate di funzione.
  2. Nel riquadro Call Stack, fai clic con il tasto destro del mouse su una funzione e seleziona Riavvia frame dal menu a discesa. Seleziona Riavvia frame dal menu a discesa.

Per capire come funziona Inizia frame, considera quanto segue:

function foo(value) {
  console.log(value);
  bar(value);
}

function bar(value) {
  value++;
  console.log(value);
  debugger;
}

foo(0);

La funzione foo() accetta 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 come segue:

  1. Copia il codice di esempio in un nuovo snippet e eseguila. L'esecuzione si interrompe al breakpoint riga di codice debugger.

  2. Tieni presente che il debugger mostra il valore corrente accanto alla dichiarazione della funzione: value = 1. Il valore corrente accanto alla dichiarazione della funzione.

  3. Riavvia il frame bar(). Riavvio del frame bar().

  4. Per eseguire la procedura guidata dell'istruzione di incremento del valore, premi F9. Aumento del valore corrente. Tieni presente che il valore corrente aumenta: value = 2.

  5. Facoltativamente, nel riquadro Ambito, fai doppio clic sul valore per modificarlo e impostare il valore desiderato. Modifica del valore nel riquadro Ambito.

  6. Prova a riavviare il frame bar() ed eseguire la procedura guidata per l'istruzione di incremento altre alcune volte. Il valore continua ad aumentare. Riavvia di nuovo il frame bar().

  7. Riavvia il frame foo() nell'elenco di chiamate. Riavvio del frame foo(). Tieni presente che il valore è di nuovo 0.

  8. Riprendi l'esecuzione dello script (F8) per completare questo tutorial.

Mostra frame nell'elenco di elementi da ignorare

Per impostazione predefinita, il riquadro Pila chiamate mostra solo i frame pertinenti al tuo codice e omette gli script aggiunti a Impostazioni Impostazioni > Elenco ignora.

Stack di chiamate.

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.

Mostra i frame nell'elenco di elementi da ignorare.

Prova questa demo:

  1. Nel riquadro Origini, apri il file src > app > app.component.ts.
  2. Imposta un punto di interruzione nella funzione increment().
  3. Nella sezione Call Stack (Pila di chiamate), seleziona o deseleziona la casella di controllo Mostra frame nell'elenco ignora e osserva l'elenco pertinente o completo dei frame nella pila di chiamate.

Visualizzare i frame asincroni

Se supportato dal framework in uso, DevTools può tracciare le operazioni asincrone collegando entrambe le parti del codice asincrono.

In questo caso, lo stack chiamate mostra l'intera cronologia chiamate, inclusi i frame di chiamata asincrona.

Frame di chiamata asincrona.

Punto chiave DevTools implementa questa funzionalità di "tagging dello stack asincrono" in base al metodo dell'API console.createTask(). Spetta ai framework implementare l'API. Ad esempio, Angular supporta questa funzionalità.

Copia analisi dello stack

Fai clic con il tasto destro del mouse in un punto qualsiasi del riquadro Pila chiamate e seleziona Copia traccia della pila per copiare la pila chiamate corrente negli appunti.

Seleziona "Copia analisi dello stack".

Ecco un esempio di output:

getNumber1 (get-started.js:35)
inputsAreEmpty (get-started.js:22)
onClick (get-started.js:15)

Esplorare l'albero dei file

Utilizza il riquadro Pagina per navigare nel percorso 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:

  • code Autore. 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, fai clic su more_vert > Raggruppa file per autore/implementato , nel menu nella parte superiore dell'albero dei file.

Raggruppamento dei file per Creato / Distribuito.

Nascondere le origini nell'elenco di elementi da ignorare dalla struttura ad albero dei file

Per aiutarti a concentrarti solo sul codice che crei, il riquadro Origini > Pagina disattiva per impostazione predefinita tutti gli script o le directory aggiunti a Impostazioni > Impostazioni > Elenco di ignorati.

Per nascondere del tutto questi script, seleziona Origini > Pagina > more_vert > Nascondi origini nell'elenco ignora Sperimentale..

Prima e dopo aver nascosto le origini nell'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 Pila chiamate e non viene mai eseguito il passaggio alle funzioni dello script durante l'esplorazione del 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 cercando di risolvere non è 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:

  1. In Origini > Pagina, fai clic con il tasto destro del mouse su una directory o un file di script.
  2. Seleziona Aggiungi directory/script all'elenco degli elementi da ignorare.

Ignora le opzioni per una directory o un file di script.

Se non hai nascosto le origini nell'elenco ignorato, puoi selezionarne una nell'albero dei file e, nel banner di avviso, fare clic su Rimuovi dall'elenco ignorato o Configura.

Un file ignorato selezionato mostra i pulsanti Rimuovi e Configura.

In caso contrario, puoi rimuovere le directory e gli script nascosti e ignorati dall'elenco in Impostazioni Impostazioni > Elenco ignora.

Ignorare uno script dal riquadro Editor

Per ignorare uno script dal riquadro Editor:

  1. Apri il file.
  2. Fai clic con il tasto destro del mouse in un punto qualsiasi.
  3. Seleziona Aggiungi script all'elenco di elementi da ignorare.

Ignorare uno script dal riquadro Editor.

Puoi rimuovere uno script dall'elenco di elementi da ignorare dalle impostazioni Impostazioni > Elenco di elementi da ignorare.

Ignorare uno script dal riquadro Call Stack

Per ignorare uno script dal riquadro Pila chiamate:

  1. Fai clic con il tasto destro del mouse su una funzione dello script.
  2. Seleziona Aggiungi script all'elenco di elementi da ignorare.

Ignorare uno script dal riquadro Call Stack.

Puoi rimuovere uno script dall'elenco di elementi da ignorare dalle impostazioni Impostazioni > Elenco di elementi da ignorare.

Ignorare uno script dalle Impostazioni

Consulta le impostazioni Impostazioni > Elenco ignora.

Esegui snippet di codice di debug da qualsiasi pagina

Se ti ritrovi a eseguire più volte lo stesso codice di debug nella console, valuta la possibilità di utilizzare gli snippet. Gli snippet sono script eseguibili che crei, memorizzi ed esamini 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.

Il riquadro Guarda.

  • Fai clic su Aggiungi espressione Aggiungi per creare una nuova espressione di controllo.
  • Fai clic su Aggiorna Aggiorna per aggiornare i valori di tutte le espressioni esistenti. I valori vengono aggiornati automaticamente durante la procedura guidata del codice.
  • Passa il mouse sopra un'espressione e fai clic su Elimina espressione 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.

Rendere leggibile un file minimizzato

Per impostazione predefinita, il riquadro Origini formatta i file minimizzati. Quando viene visualizzata la stampa in formato leggibile, l'editor potrebbe mostrare una singola riga di codice lunga in più righe, con - per indicare che si tratta della continuazione della riga.

Una riga di codice lungo con stampata in modo leggibile, visualizzata su più righe, con "-" per indicare la continuazione della riga.

Per visualizzare il file compresso così come è stato caricato, fai clic su data_object nell'angolo in basso a sinistra dell'editor.

Comprimi 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 arrow_drop_down Comprimi.

Per espandere il blocco di codice, fai clic su {...} accanto.

Per configurare questo comportamento, consulta settings 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:

  1. Apri il file nel riquadro Editor del riquadro Origini.
  2. Apporta le modifiche nel riquadro Editor.
  3. Premi Comando+S (Mac) o Ctrl+S (Windows, Linux) per salvare. DevTools applica patch all'intero file JavaScript nel motore JavaScript di Chrome.

    Il riquadro Editor.
    Il riquadro Editor è delineato in blu.

Modificare una funzione in pausa in tempo reale

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 nell'elenco di chiamate.
  • Non devono essere presenti chiamate ricorsive alla stessa funzione più avanti nello stack.

Per modificare in tempo reale una funzione:

  1. Metti in pausa l'esecuzione con un punto di interruzione.
  2. Modifica la funzione in pausa.
  3. Premi Comando / Control + S per applicare le modifiche. Il debugger riavvia automaticamente la funzione.
  4. Continua l'esecuzione.

Guarda il video per scoprire questo flusso di lavoro.

In questo esempio, le variabili addend1 e addend2 hanno inizialmente un tipo string errato. Quindi, anziché aggiungere numeri, le stringhe vengono concatenate. Per risolvere il problema, le funzioni parseInt() vengono aggiunte durante l'editing in tempo reale.

Per cercare del testo in uno script:

  1. Apri il file nel riquadro Editor del riquadro Origini.
  2. Per aprire una barra di ricerca integrata, premi Comando+F (Mac) o Ctrl+F (Windows, Linux).
  3. Nella barra, inserisci la query. Cerca. 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 ricerche utilizzando un'espressione RegEx.
  4. Premi Invio. Per passare al risultato di ricerca precedente o successivo, premi il pulsante su o giù.

Per sostituire il testo trovato:

  1. Nella barra di ricerca, fai clic su Sostituisci. Sostituisci.
  2. Digita il testo da sostituire, quindi fai clic su Sostituisci o Sostituisci tutto.

Disattivare JavaScript

Consulta Disattivare JavaScript con Chrome DevTools.