JavaScript di debug

Kayce Basques

Sofia Emelianova

Questo tutorial illustra il flusso di lavoro di base per eseguire il debug di qualsiasi problema JavaScript in DevTools. Letto o guarda la versione video di questo tutorial.

Riproduci il bug.

Individuare una serie di azioni che riproducano in modo coerente un bug è sempre il primo passo per il debug del machine learning.

1. Apri questa demo in una nuova scheda.
2. Inserisci 5 nella casella Numero 1.
3. Inserisci 1 nella casella Numero 2.
4. Fai clic su Aggiungi numero 1 e numero 2. L'etichetta sotto il pulsante è 5 + 1 = 51. Il risultato dovrebbe essere 6. Questo è il bug che devi correggere.

In questo esempio, il risultato di 5 + 1 è 51. Dovrebbe essere 6.

Acquisisci familiarità con l'interfaccia utente del riquadro Origini

DevTools offre molti strumenti diversi per attività diverse, come la modifica del CSS e la profilazione della pagina le prestazioni di carico e il monitoraggio delle richieste di rete. Il riquadro Origini è dove esegui il debug JavaScript.

1. Apri DevTools e vai al riquadro Origini.

   

Il riquadro Origini contiene tre sezioni:

1. La scheda Pagina con la struttura ad albero dei file. Ogni file richiesto dalla pagina è elencato qui.
2. Sezione Editor di codice. Dopo aver selezionato un file nella scheda Pagina, vengono visualizzati i contenuti che il file venga visualizzato qui.

3. La sezione Debugger. Vari strumenti per esaminare il codice JavaScript della pagina.

   Se la finestra DevTools è larga, per impostazione predefinita, il Debugger si trova a destra dell'Editor di codice. In questo caso, le schede Ambito e Guarda uniscono Punti di interruzione, Stack di chiamate e altri come sezioni comprimibili.

Metti in pausa il codice con un punto di interruzione

Un metodo comune per eseguire il debug di un problema come questo consiste nell'inserire molte istruzioni console.log() nel codice, in modo da esaminare i valori durante l'esecuzione dello script. Ad esempio:

function updateLabel() {
  var addend1 = getNumber1();
  console.log('addend1:', addend1);
  var addend2 = getNumber2();
  console.log('addend2:', addend2);
  var sum = addend1 + addend2;
  console.log('sum:', sum);
  label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
}

Il metodo console.log() potrebbe portare a termine il lavoro, ma con i punti di interruzione puoi farlo più velocemente. R ti consente di mettere in pausa il codice durante l'esecuzione ed esaminare tutti i valori a quel punto momento nel tempo. I punti di interruzione presentano alcuni vantaggi rispetto al metodo console.log():

• Con console.log(), devi aprire manualmente il codice sorgente, trovare il codice pertinente, inserire le istruzioni console.log(), quindi ricarica la pagina per visualizzare i messaggi nella Google Cloud. Grazie ai punti di interruzione, puoi fermarti sul codice pertinente senza nemmeno sapere com'è strutturati.
• Nelle istruzioni console.log() devi specificare esplicitamente ogni valore che vuoi possono essere ispezionati. Con i punti di interruzione, DevTools mostra i valori di tutte le variabili in quel momento. A volte ci sono variabili che interessano il codice di cui non sei nemmeno a conoscenza.

In breve, i punti di interruzione possono aiutarti a trovare e correggere i bug più velocemente rispetto al metodo console.log().

Se fai un passo indietro e pensi a come funziona l'app, puoi ipotizzare che viene calcolata la somma errata (5 + 1 = 51) nel listener di eventi click associato al Aggiungi il pulsante del numero 1 e del numero 2. Ti consigliamo quindi di mettere in pausa il codice nel momento in cui eseguito dal listener click. I punti di interruzione del listener di eventi ti consentono di fare esattamente questo:

1. Nella sezione Debugger, fai clic su Punti di interruzione listener di eventi per espandere la . DevTools rivela un elenco di categorie di eventi espandibili, come Animazione e Appunti.
2. Accanto alla categoria di evento Mouse, fai clic su arrow_right Espandi. DevTools mostra un elenco di eventi del mouse, ad esempio clic e mousedown. Accanto a ogni evento è presente una casella di controllo.

3. Seleziona la casella di controllo clic. DevTools ora è impostato per metterlo in pausa automaticamente quando qualsiasi giorno click nel listener di eventi.

   

4. Torna alla demo e fai di nuovo clic su Aggiungi numero 1 e numero 2. DevTools mette in pausa la demo evidenzia una riga di codice nel riquadro Origini. DevTools deve essere messo in pausa su questa riga di codice:

   function onClick() {
   

   Se sei in pausa su un'altra riga di codice, premi Riprendi Riprendi esecuzione dello script fino a quando non ti trovi sulla riga corretta.

   Nota: se hai messo in pausa su un'altra riga, hai un'estensione del browser che registra un Listener di eventi click su ogni pagina visitata. Il tuo account è stato messo in pausa nell'estensione click e ascolto. Se utilizzi la modalità di navigazione in incognito per navigare in privato, disattivando tutte le estensioni, puoi vedere che ti fermi ogni volta sulla riga di codice corretta.

I punti di interruzione del listener di eventi sono solo uno dei tanti tipi di punti di interruzione disponibili in DevTools. È vale la pena esplorare tutti i diversi tipi perché ognuno aiuta a eseguire il debug il più rapidamente possibile. Consulta Mettere in pausa il codice con i punti di interruzione per scoprire quando e come utilizzano ciascun tipo.

Segui il codice

Una causa comune di bug è l'esecuzione di uno script nell'ordine errato. Lettura del codice in corso... consente di seguire l'esecuzione del codice una riga alla volta, per capire esattamente dove viene eseguita in un ordine diverso da quello previsto. Prova subito:

1. Nel riquadro Origini di DevTools, fai clic su step_into Vai alla chiamata di funzione successiva per seguire l'esecuzione della funzione onClick(), una riga alla volta. DevTools evidenzia la seguente riga di codice:

   if (inputsAreEmpty()) {
   

2. Fai clic su step_over Esegui il passaggio della chiamata di funzione successiva.

   DevTools esegue inputsAreEmpty() senza entrare. Nota come DevTools ignora alcune righe di le API nel tuo codice. Il motivo è che inputsAreEmpty() è stato valutato come false, quindi il blocco diif non è stato eseguito.

Questa è l'idea di base della procedura di creazione del codice. Se guardi il codice in get-started.js, puoi puoi vedere che il bug probabilmente si trova da qualche parte nella funzione updateLabel(). Invece di passare attraverso ogni riga di codice, puoi utilizzare un altro tipo di punto di interruzione per mettere in pausa il codice più vicino al probabile la posizione del bug.

Imposta un punto di interruzione riga di codice

I punti di interruzione line-of-code sono il tipo più comune di punti di interruzione. Quando hai una linea specifica al codice su cui vuoi fare una pausa, utilizza un punto di interruzione line-of-code:

1. Guarda l'ultima riga di codice in updateLabel():

   label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
   

2. A sinistra del codice puoi vedere il numero di riga di questa particolare riga di codice, 32. Fai clic su 32. DevTools posiziona un'icona blu sopra 32. Ciò significa che c'è il punto di interruzione line-of-code su questa riga. DevTools ora si mette in pausa prima che questa riga di codice eseguito.

3. Fai clic su Riprendi Riprendi esecuzione dello script. La continua l'esecuzione fino a raggiungere la riga 32. Alle righe 29, 30 e 31, DevTools mostra i valori di addend1, addend2 e sum in linea accanto alle relative dichiarazioni.

In questo esempio, DevTools si mette in pausa sul punto di interruzione riga di codice nella riga 32.

Verifica i valori delle variabili

I valori addend1, addend2 e sum sembrano sospetti. Sono racchiuse tra virgolette, che significa che si tratta di stringhe. Questa è una buona ipotesi per spiegare la causa del bug. Adesso è il momento di raccogliere altre informazioni. DevTools offre molti strumenti per esaminare le variabili e i relativi valori.

Metodo 1: ispeziona l'ambito

Quando l'attività viene messa in pausa su una riga di codice, la scheda Ambito mostra quali variabili locali e globali vengono definiti a questo punto dell'esecuzione, insieme al valore di ogni variabile. Mostra anche le variabili di chiusura, applicabile. Quando non ti fermi una riga di codice, la scheda Ambito è vuota.

Fai doppio clic su un valore della variabile per modificarlo.

Nota: a seconda della preferenza di layout e della larghezza della finestra DevTools, la scheda Ambito potrebbe essere visualizzata come sezione comprimibile insieme a Punti di interruzione e Stack di chiamate.

Metodo 2: visualizzazione delle espressioni

La scheda Guarda ti consente di monitorare i valori delle variabili nel tempo. Smartwatch non si limita alle variabili. Puoi memorizzare qualsiasi codice JavaScript valido nella scheda Controlla.

Nota: a seconda delle preferenze di layout e della larghezza della finestra DevTools, la scheda Guarda potrebbe essere visualizzata come sezione comprimibile insieme a Punti di interruzione e Stack di chiamate.

Prova subito:

1. Fai clic sulla scheda Guarda.
2. Fai clic su aggiungi Aggiungi espressione di controllo.
3. Digita typeof sum.
4. Premi Invio. DevTools mostra typeof sum: "string". Il valore a destra dei due punti è il del risultato dell'espressione.

Questo screenshot mostra la scheda Guarda (in basso a destra) dopo aver creato l'orologio typeof sum un'espressione di base.

Come sospetti, sum viene valutato come stringa, anche se dovrebbe essere un numero. Hai confermato che questa è la causa del bug.

Metodo 3: la console

Oltre a visualizzare i messaggi console.log(), puoi utilizzare la console anche per valutare le istruzioni JavaScript. In termini di debug, puoi usare la console per testare potenziali correzioni per gli insetti. Prova subito:

1. Se il riquadro a scomparsa della console non è aperto, premi Esc per aprirlo. Si apre in fondo a finestra DevTools.
2. Nella console, digita parseInt(addend1) + parseInt(addend2). Questa affermazione funziona perché sono in pausa su una riga di codice in cui addend1 e addend2 rientrano nell'ambito.
3. Premi Invio. DevTools valuta l'istruzione e stampa 6, che è il risultato che ti aspetti della demo da produrre.

Questo screenshot mostra il riquadro a scomparsa della console dopo aver valutato parseInt(addend1) + parseInt(addend2).

Applica una correzione

Hai trovato una correzione per il bug. Ti basta provare la soluzione modificando il codice e rieseguire la demo. Non è necessario uscire da DevTools per applicare la correzione. Puoi modificare il codice JavaScript direttamente nella UI di DevTools. Prova subito:

1. Fai clic su Riprendi Riprendi esecuzione dello script.
2. Nell'Editor di codice, sostituisci la riga 31, var sum = addend1 + addend2, con var sum = parseInt(addend1) + parseInt(addend2).
3. Premi Comando + S (Mac) o Ctrl + S (Windows, Linux) per salvare la modifica.
4. Fai clic su label_off Disattiva punti di interruzione. Il suo colore diventa blu per indicare che è attivo. Mentre è impostata, DevTools ignora qualsiasi che hai impostato.
5. Prova la demo con valori diversi. La demo ora esegue il calcolo corretto.

di Gemini Advanced.

Attenzione: questo flusso di lavoro applica una correzione solo al codice in esecuzione nel browser. Non correggere il codice per tutti gli utenti che visitano la pagina. Per farlo, devi correggere il codice presente sul tuo server web. Tuttavia, puoi modificare i file in DevTools e salvarli nelle origini con Aree di lavoro.

Suggerimento: a partire dalla versione 105 di Chrome, puoi modificare una funzione in pausa dal vivo.

Passaggi successivi

Operazione riuscita: congratulazioni. Ora sai come ottenere il massimo da Chrome DevTools durante il debug di JavaScript. La gli strumenti e i metodi che hai imparato in questo tutorial possono farti risparmiare innumerevoli ore.

Questo tutorial ha mostrato solo due modi per impostare i punti di interruzione. DevTools offre molti altri modi, tra cui:

• Punti di interruzione condizionali che vengono attivati solo quando la condizione specificata è true.
• Punti di interruzione nelle eccezioni rilevate o non rilevate.
• Punti di interruzione XHR che vengono attivati quando l'URL richiesto corrisponde a una sottostringa da te fornita.

Consulta Mettere in pausa il codice con i punti di interruzione per scoprire quando e come utilizzare ciascun tipo.

Ci sono un paio di controlli di passaggi del codice che non sono stati spiegati in questo tutorial. Vedi Passo oltre riga di codice per saperne di più.