Riferimento per il debug di JavaScript

Sofia Emelianova
Sofia Emelianova

Scopri nuovi flussi di lavoro di debug con questo riferimento completo al debug di Chrome DevTools le funzionalità di machine learning.

Consulta Iniziare a eseguire il debug di JavaScript in Chrome DevTools per apprendere le nozioni di base del 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, consulta Mettere in pausa il codice con i punti di interruzione.

Controlla i valori quando il video è 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 su variabili, costanti e oggetti valutati.

Utilizzo della console per eseguire query su variabili, costanti e oggetti valutati.

Visualizza 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 le proprietà.

Visualizza l'anteprima delle proprietà di classi/funzioni al passaggio del mouse

Procedura dettagliata per il codice

Una volta messo in pausa il codice, seguilo un'espressione alla volta, esaminando il flusso di controllo e i valori delle proprietà durante il processo.

Supera la riga di codice

Quando è in pausa su una riga di codice contenente una funzione non pertinente al problema che stai riscontrando per il debug, fai clic su Esegui il passaggio Esegui passaggio per eseguire la funzione senza entrarci.

Seleziona "Passo oltre".

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 passa oltre, DevTools esegue tutto il codice nella funzione che stai passando, ossia B e C. DevTools viene messo in pausa il giorno D.

Entra nella riga di codice

Quando è in pausa su una riga di codice contenente una chiamata di funzione correlata al problema riscontrato debug, fai clic su Accedi Entra in per esaminare la funzione ulteriormente.

Selezionando "Accedi".

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 Entra in, DevTools esegue questa riga di codice, poi si mette in pausa 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 Passaggio su Esci per eseguire il resto il codice della funzione.

Selezionando "Esci".

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
}

Il tuo dispositivo è in pausa su A. Se premi Esci, DevTools esegue il resto del codice in getName(), che in questo esempio è solo B, quindi verrà messo in pausa il giorno C.

Esecuzione di tutto il codice fino a una determinata riga

Durante il debug di una funzione lunga, è possibile che una grande porzione di codice non sia correlata al problema che stai il debug del machine learning.

Potresti analizzare tutte le righe, ma questo può essere noioso. Potresti impostare una riga di codice punto di interruzione sulla riga che ti interessa e premi Riprendi esecuzione script Riprendi esecuzione dello script, ma c'è un modo più veloce.

Fai clic con il pulsante destro del mouse sulla riga di codice che ti interessa e seleziona Continua fino a qui. DevTools esegue tutto il codice fino a quel punto, e poi fa una pausa su quella riga.

Seleziona "Continua fino a qui".

Riprendi esecuzione dello script

Per continuare l'esecuzione dello script dopo una pausa, fai clic su Riprendi esecuzione script Riprendi esecuzione dello script. DevTools esegue lo script fino all'eventuale punto di interruzione successivo.

Seleziona "Riprendi l'esecuzione dello script".

Forza l'esecuzione dello script

Per ignorare tutti i punti di interruzione e forzare lo script a riprendere l'esecuzione, fai clic e tieni premuto su Riprendi script Esecuzione Riprendi esecuzione dello script e seleziona Forza l'esecuzione dello script. Forza l'esecuzione dello script.

Seleziona "Forza l'esecuzione dello script".

Cambia il contesto del thread

Quando lavori con web worker o service worker, fai clic su un contesto elencato nel riquadro Thread per a quel contesto. L'icona della freccia blu rappresenta il contesto attualmente selezionato.

Il riquadro Thread.

Il riquadro Thread nello screenshot sopra è evidenziato in blu.

Ad esempio, supponiamo che tu sia in pausa su un punto di interruzione sia nello script principale che nel servizio dello script worker. Vuoi visualizzare le proprietà locali e globali del contesto del service worker, ma Il riquadro Origini mostra il contesto principale dello script. Facendo clic sulla voce del service worker nella riquadro Thread, puoi passare a quel contesto.

Visualizzazione delle espressioni separate da virgole

Se vuoi eseguire il debug delle espressioni separate da virgole, puoi eseguire il debug del codice minimizzato. Ad esempio, considera il seguente codice:

function foo() {}

function bar() {
  foo();
  foo();
  return 42;
}

bar();

Se minimizzata, contiene un'espressione foo(),foo(),42 separata da virgole:

function foo(){}function bar(){return foo(),foo(),42}bar();

Il Debugger esegue esattamente queste espressioni.

Passaggio di un'espressione separata da virgole.

Di conseguenza, il comportamento del passo è 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 punti e virgola, puoi aspettarti di superarli anche se l'origine effettiva che stai eseguendo il debug è minimizzata.

Visualizzare e modificare proprietà locali, chiuse e globali

Mentre sei in pausa su una riga di codice, utilizza il riquadro Ambito per visualizzare e modificare i valori delle proprietà e nell'ambito locale, di chiusura e globale.

  • Fai doppio clic sul valore di una proprietà per modificarlo.
  • Le proprietà non enumerabili non sono selezionabili.

Il riquadro Ambito.

Il riquadro Ambito nello screenshot riportato sopra è evidenziato in blu.

Visualizza lo stack di chiamate attuale

Mentre sei in pausa su una riga di codice, utilizza il riquadro Stack di chiamate per visualizzare lo stack di chiamate che ti ha portato a questo punto di accesso.

Fai clic su una voce per passare alla riga di codice in cui è stata chiamata quella funzione. L'icona con la freccia blu rappresenta la funzione attualmente evidenziata da DevTools.

Il riquadro Stack di chiamate.

Il riquadro Stack di chiamate nello screenshot riportato sopra è evidenziato in blu.

Riavvia 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:

  1. Metti in pausa l'esecuzione della funzione in un punto di interruzione. Il riquadro Stack di chiamate registra l'ordine delle chiamate di funzione.
  2. Nel riquadro Stack di chiamate, 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 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:

  1. Copia il codice riportato sopra in un nuovo snippet ed eseguilo. L'esecuzione si interrompe al punto di interruzione riga di codice debugger.
  2. Tieni presente che il debugger mostra il valore corrente accanto alla dichiarazione di funzione: value = 1. Il valore attuale accanto alla dichiarazione della funzione.
  3. Riavvia il frame bar(). Riavvio del frame bar().
  4. Scorri l'istruzione di incremento del valore premendo F9. Aumento del valore corrente. Nota che il valore attuale aumenta: value = 2.
  5. Facoltativamente, nel riquadro Ambito, fai doppio clic sul valore per modificarlo e imposta il valore desiderato. Modifica del valore nel riquadro Ambiti.
  6. Prova a riavviare il frame bar() e a eseguire l'istruzione di incremento più volte. Il valore continua ad aumentare. Riavviando il frame bar().

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 puntatore di esecuzione all'inizio della funzione.

Pertanto, il valore dell'argomento corrente persiste in memoria dopo i riavvii della stessa funzione.

  1. Ora riavvia il frame foo() nello stack di chiamate. Riavvio del frame foo(). Nota che il valore è di nuovo 0. ALT_TEXT_HERE

In JavaScript, le modifiche agli argomenti non sono visibili all'esterno 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 inclusi 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. Impostazioni > Elenco di persone da ignorare.

Stack di chiamate.

Per visualizzare l'intero stack di chiamate, inclusi i frame di terze parti, attiva Mostra frame inclusi nell'elenco di elementi da ignorare nella sezione Stack di chiamate.

Mostra frame inclusi nell'elenco di elementi da ignorare.

Prova su questa pagina dimostrativa:

  1. Nel riquadro Origini, apri src > app > app.component.ts.
  2. Imposta un punto di interruzione per la funzione increment().
  3. 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.

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

Frame di chiamata asinc.

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 la chiamata corrente. impilare negli appunti.

Seleziona "Copia analisi dello stack".

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

Durante lo sviluppo di applicazioni web utilizzando framework (ad esempio, React o Angular), può essere difficile navigare tra le fonti a causa dei file minimizzati generati dagli strumenti di creazione (ad esempio, webpack o Vite).

Per aiutarti a spostarti tra le fonti, seleziona Fonti > Il riquadro Pagina può raggruppare i file in due categorie:

  • Icona del codice. Creato. Simili ai file sorgente che visualizzi nel tuo IDE. DevTools genera questi file in base alle mappe di origine fornite dagli strumenti di creazione.
  • Icona Deployment eseguito. Deployment eseguito. I file effettivi letti dal browser. In genere questi file vengono minimizzati.

Per attivare il raggruppamento, abilita Menu con tre puntini. > Raggruppa file per Creato/Distribuito Sperimentale. nel menu con tre puntini nella parte superiore della struttura ad albero dei file.

Raggruppamento di file per Creato / Distribuito.

Nascondi le origini nell'elenco di elementi da ignorare dalla struttura dei file

Per concentrarti solo sul codice creato, seleziona Origini > Il riquadro Pagina rende non selezionabili tutti gli script o le directory aggiunti a Impostazioni. Impostazioni > Ignora elenco per impostazione predefinita.

Per nascondere completamente questi script, seleziona Origini > Pagina > Menu con tre puntini. > Nascondi le origini nell'elenco di elementi da ignorare 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 ignorarlo durante il debug. Se ignorato, uno script viene oscurata nel riquadro Stack di chiamata e non entri mai nelle funzioni dello script quando passi tramite il codice.

Ad esempio, supponiamo che tu stia eseguendo questo codice:

function animate() {
  prepare();
  lib.doFancyStuff(); // A
  render();
}

A è una raccolta di terze parti di cui ti fidi. Se hai la certezza che il problema di cui stai eseguendo il debug non è correlato alla libreria di terze parti, allora ha senso ignorare lo script.

Ignora uno script o una directory nella struttura di file 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 su un file di script.
  2. Seleziona Aggiungi directory/script all'elenco degli elementi da ignorare.

Ignorare le opzioni per un file di directory o di script.

Se non hai nascosto le origini nell'elenco di elementi da ignorare, puoi selezionare un'origine di questo tipo nella struttura ad albero dei file e, nel banner di avviso Avviso., fai clic su Rimuovi dall'elenco di elementi ignorati o Configura.

Un file ignorato selezionato mostra i pulsanti Rimuovi e Configura.

In caso contrario, puoi rimuovere directory e script nascosti e ignorati dall'elenco in Impostazioni. Impostazioni > Elenco degli utenti da ignorare.

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.

Uno script viene ignorato dal riquadro Editor.

Puoi rimuovere uno script dall'elenco dei messaggi ignorati in Impostazioni. Impostazioni > Elenco degli utenti da ignorare.

Ignorare uno script dal riquadro Stack di chiamate

Per ignorare uno script dal riquadro Stack di chiamate:

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

Uno script dal riquadro Stack di chiamate ignorato.

Puoi rimuovere uno script dall'elenco dei messaggi ignorati in Impostazioni. Impostazioni > Elenco degli utenti da ignorare.

Ignorare uno script dalle Impostazioni

Vedi Impostazioni. Impostazioni > Elenco degli utenti da ignorare.

Esegui snippet di codice di debug da qualsiasi pagina

Se ti ritrovi a eseguire lo stesso codice di debug più volte nella console, prendi in considerazione gli snippet. Gli snippet sono script eseguibili che crei, archivi ed esegui in DevTools.

Per scoprire di più, consulta la sezione Eseguire snippet di codice da qualsiasi pagina.

Osserva i valori delle espressioni JavaScript personalizzate

Utilizza il riquadro di controllo per osservare i valori delle espressioni personalizzate. Puoi guardare qualsiasi codice un'espressione di base.

Il riquadro Guarda.

  • Fai clic su Aggiungi espressione. Aggiungi espressione 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 visualizzazione del codice.
  • Passa il mouse sopra un'espressione e fai clic su Elimina espressione Elimina espressione per eliminarlo.

Ispezionare 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 eseguire l'override dei contenuti in locale o creare un'area di lavoro e salvare le modifiche apportate in DevTools direttamente nelle 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.

Una lunga riga di codice molto stampata su più righe, con il segno "-" per indicare la continuazione delle linee.

Per visualizzare il file minimizzato man mano che vengono caricati, 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 di sinistra e fai clic su Comprimi. Comprimi.

Fai clic sulla {...} accanto al blocco di codice per aprirlo.

Per configurare questo comportamento, vedi Impostazioni. Impostazioni > Preferenze > Fonti.

Modificare uno script

Quando correggi un bug, spesso vuoi testare alcune modifiche al codice JavaScript. Non è necessario per apportare le modifiche in un browser esterno e poi 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 le patch dell'intero file JS al motore JavaScript di Chrome.

    Il riquadro Editor.

    Il riquadro Editor nello screenshot sopra riportato è 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 più in alto nello Stack di chiamate.
  • Non devono esserci chiamate ricorsive alla stessa funzione più avanti nello stack.
di Gemini Advanced.

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 / Ctrl + S per applicare le modifiche. Il debugger riavvia la funzione automaticamente.
  4. Continua l'esecuzione.

Guarda il video qui sotto per scoprire questo flusso di lavoro.

In questo esempio, le variabili addend1 e addend2 hanno inizialmente un tipo di string errato. Quindi, invece di aggiungere numeri, le stringhe vengono concatenate. Per risolvere il problema, le funzioni di parseInt() vengono aggiunte durante la modifica in tempo reale.

Per cercare 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. Inserisci la query nella barra. Cerca. Facoltativamente, puoi:
    • Fai clic su Maiuscole/minuscole. Maiuscole/minuscole per rendere la query sensibile alle maiuscole.
    • Fai clic su Pulsante RegEx. Utilizza espressione regolare per eseguire la ricerca 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 sul pulsante Sostituisci. Sostituisci. Sostituisci.
  2. Digita il testo da sostituire, poi fai clic su Sostituisci o Sostituisci tutto.

Disattiva JavaScript

Vedi Disattivare JavaScript con Chrome DevTools.