JavaScript di debug

Kayce Basques

Sofia Emelianova

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

Riproduci il bug

Il primo passo per eseguire il debug è sempre il primo passo per trovare una serie di azioni che riproducono in modo coerente un bug.

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 i numeri 1 e 2. L'etichetta sotto il pulsante indica 5 + 1 = 51. Il risultato dovrebbe essere 6. Questo è il bug che intendi correggere.

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

Acquisire familiarità con l'interfaccia utente del riquadro Origini

DevTools fornisce molti strumenti per diverse attività, come la modifica dei CSS, la profilazione delle prestazioni di caricamento delle pagine e il monitoraggio delle richieste di rete. Nel riquadro Origini esegui il debug di JavaScript.

1. Apri DevTools e vai al riquadro Origini.

   

Il riquadro Origini contiene tre sezioni:

1. La scheda Pagina con la struttura dei file. Ogni file richiesto dalla pagina è elencato qui.
2. La sezione Editor di codice. Dopo aver selezionato un file nella scheda Pagina, i contenuti del file vengono visualizzati qui.

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

   Se la finestra DevTools è ampia, 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 altre come sezioni comprimibili.

Metti in pausa il codice con un punto di interruzione

Un metodo comune per eseguire il debug di un problema di questo tipo è inserire molte istruzioni console.log() nel codice per 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() può portare a termine il lavoro, ma i punti di interruzione possono farlo più velocemente. Un punto di interruzione ti consente di mettere in pausa il codice durante l'esecuzione ed esaminare tutti i valori in quel momento. 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() e ricaricare la pagina per visualizzare i messaggi nella console. Con i punti di interruzione, puoi mettere in pausa il codice pertinente senza nemmeno sapere com'è strutturato il codice.
• Nelle istruzioni console.log() devi specificare esplicitamente ogni valore che vuoi controllare. Con i punti di interruzione, DevTools mostra i valori di tutte le variabili in un determinato momento. A volte esistono variabili che influiscono sul codice di cui non sei 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 la somma errata (5 + 1 = 51) venga calcolata nel listener di eventi click associato al pulsante Aggiungi numeri 1 e numero 2. Pertanto, probabilmente vorrai mettere in pausa il codice all'incirca nel momento in cui viene eseguito il listener click. I punti di interruzione listener di eventi consentono di fare esattamente quanto segue:

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

3. Seleziona la casella di controllo per clic. DevTools è ora impostato in modo da metterlo in pausa automaticamente quando viene eseguito qualsiasi listener di eventi click.

   

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

   function onClick() {
   

   Se ti trovi in pausa su un'altra riga di codice, premi Riprendi Riprendi esecuzione script finché non viene messo in pausa nella riga corretta.

I punti di interruzione listener di eventi sono solo uno dei tanti tipi di punti di interruzione disponibili in DevTools. Ti consigliamo di esplorare tutti i vari tipi, perché ogni tipo ti aiuta a eseguire il debug di scenari diversi il più rapidamente possibile. Consulta Metti in pausa il codice con i punti di interruzione per sapere quando e come utilizzare ciascun tipo.

Analizza il codice

Una causa comune dei bug è quando uno script viene eseguito nell'ordine sbagliato. Analizzando il codice puoi scoprire l'esecuzione del codice, una riga alla volta, e capire esattamente dove viene eseguito, in un ordine diverso da quello previsto. Prova subito:

1. Nel riquadro Origini di DevTools, fai clic su step_into Passa alla chiamata di funzione successiva per eseguire 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 la chiamata di funzione successiva.

   DevTools esegue inputsAreEmpty() senza accedere. Osserva come DevTools ignora alcune righe di codice. Questo perché inputsAreEmpty() è stato valutato come falso, perciò il blocco di codice dell'istruzione if non è stato eseguito.

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

Imposta un punto di interruzione riga di codice

I punti di interruzione della riga del codice sono il tipo più comune di punti di interruzione. Quando hai una riga di codice specifica da mettere in pausa, utilizza un punto di interruzione riga di codice:

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

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

2. A sinistra del codice puoi vedere il numero della riga di questa specifica riga di codice, ovvero 32. Fai clic su 32. DevTools inserisce un'icona blu sopra 32. Ciò significa che su questa riga è presente un punto di interruzione riga di codice. DevTools ora si mette sempre in pausa prima dell'esecuzione di questa riga di codice.

3. Fai clic su Riprendi Riprendi esecuzione script. Lo script continua a essere eseguito fino a raggiungere la riga 32. Alle righe 29, 30 e 31, DevTools mostra i valori di addend1, addend2 e sum incorporati accanto alle rispettive dichiarazioni.

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

Controlla i valori della variabile

I valori di addend1, addend2 e sum sembrano sospetti. Sono racchiuse tra virgolette, ovvero stringhe. Questa è un'ipotesi valida per spiegare la causa del bug. Ora è il momento di raccogliere più informazioni. DevTools offre molti strumenti per esaminare i valori delle variabili.

Metodo 1: ispezionare l'ambito

Quando è in pausa su una riga di codice, la scheda Ambito mostra quali variabili locali e globali sono definite al momento dell'esecuzione, insieme al valore di ogni variabile. Mostra anche le variabili di chiusura, se applicabili. Se non sei in pausa su una riga di codice, la scheda Ambito è vuota.

Fai doppio clic sul valore di una variabile per modificarlo.

Metodo 2: espressioni di controllo

La scheda Guarda consente di monitorare i valori delle variabili nel tempo. La sezione Guarda non si limita alle variabili. Puoi archiviare qualsiasi espressione JavaScript valida nella scheda Watch.

Prova subito:

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

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

Come sospetto, sum viene valutato come stringa anche se dovrebbe essere un numero. Hai verificato 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 arbitrarie. In termini di debug, puoi utilizzare la console per testare potenziali correzioni di bug. Prova subito:

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

Questo screenshot mostra il riquadro a scomparsa Console dopo la valutazione di parseInt(addend1) + parseInt(addend2).

Applica una correzione

Hai trovato una correzione per il bug. Non ti resta che provare la soluzione modificando il codice ed eseguendo di nuovo la demo. Non è necessario uscire da DevTools per applicare la correzione. Puoi modificare il codice JavaScript direttamente nell'interfaccia utente di DevTools. Prova subito:

1. Fai clic su Riprendi Riprendi esecuzione 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 colore diventa blu per indicare che il dispositivo è attivo. Quando questa impostazione è impostata, DevTools ignora eventuali punti di interruzione impostati.
5. Prova la demo con valori diversi. La demo ora esegue il calcolo correttamente.

Passaggi successivi

Questo tutorial ti 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 fornita è vera.
• Punti di interruzione relativi a eccezioni rilevate o non rilevate.
• Punti di interruzione XHR che vengono attivati quando l'URL richiesto corrisponde a una sottostringa da te fornita.

Consulta la sezione Metti in pausa il codice con i punti di interruzione per sapere quando e come utilizzare ciascun tipo.

Un paio di controlli per l'esecuzione del codice non sono stati illustrati in questo tutorial. Per scoprire di più, consulta Eseguire un passaggio sulla riga di codice.