Questo tutorial ti insegna il flusso di lavoro di base per il debug di qualsiasi problema JavaScript in DevTools. Continua a leggere, o guardare la versione video di questo tutorial, qui sotto.

# Passo 1: Riprodurre il bug

Trovare una serie di azioni che riproduca costantemente un bug è sempre il primo passo per il debug.

1. Fare clic su Apri demo. La demo si apre in una nuova scheda.

   Apri demo

2. Immettere 5 nella casella di testo Numero 1.

3. Immettere 1 nella casella di testo Numero 2.

4. Fare clic su Aggiungi numero 1 e Numero 2. L’etichetta sotto il pulsante dice 5 + 1 = 51. Il risultato dovrebbe essere 6. Questo è il bug che risolverai.

   

   Figura 1. Il risultato di 5 + 1 è 51. Dovrebbe essere 6.

# Passo 2: Acquisire familiarità con l’interfaccia utente del pannello Sorgenti

DevTools fornisce molti strumenti diversi per attività diverse, come la modifica dei CSS, la profilazione delle prestazioni di caricamento della pagina e il monitoraggio delle richieste di rete. Il pannello Fonti è dove si esegue il debug JavaScript.

1. Aprire DevTools premendo Command + Option + I (Mac) o Control+Shift+I (Windows, Linux). Questo collegamento apre il pannello della Console.

   

   Figura 2. Il pannello della console

2. Fare clic sulla scheda Origini.

   

   Figura 3. Il pannello Sorgenti

L’interfaccia utente del pannello Sorgenti ha 3 parti:

Figura 4. Le 3 parti del pannello Fonti UI

1. Il riquadro Navigatore file. Ogni file richiesto dalla pagina è elencato qui.
2. Il riquadro dell’editor di codice. Dopo aver selezionato un file nel riquadro Navigatore file, il contenuto di tale file viene visualizzato qui.
3. Il riquadro di debug JavaScript. Vari strumenti per l’ispezione JavaScript della pagina. Se la finestra DevTools è ampia, questo riquadro viene visualizzato a destra del riquadro Editor di codice.

# Passo 3: Mettere in pausa il codice con un punto di interruzione

Un metodo comune per il debug di un problema come questo è quello di inserire un sacco di console.log() istruzioni nel codice, al fine di ispezionare i valori come lo script viene eseguito. Biru:

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 consente di mettere in pausa il codice nel mezzo della sua esecuzione ed esaminare tutti i valori in quel momento nel tempo. I punti di interruzione hanno alcuni vantaggi rispetto al metodo console.log() :

• Con console.log(), è necessario aprire manualmente il codice sorgente, trovare il codice pertinente, inserire le istruzioni console.log() e quindi ricaricare la pagina per vedere i messaggi nella Console. Con i punti di interruzione, puoi mettere in pausa il codice pertinente senza nemmeno sapere come è strutturato il codice.
• Nelle istruzioni console.log() è necessario specificare esplicitamente ogni valore che si desidera ispezionare. Con i punti di interruzione, DevTools mostra i valori di tutte le variabili in quel momento nel tempo. A volte ci sono variabili che influenzano il tuo codice di cui non sei nemmeno a conoscenza.

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

Se fai un passo indietro e pensi a come funziona l’app, puoi indovinare che la somma errata (5 + 1 = 51) viene calcolata nel listener di eventi click associato al pulsante Aggiungi numero 1 e Numero 2. Pertanto, probabilmente si desidera mettere in pausa il codice intorno al tempo in cui viene eseguito il listener click. I punti di interruzione del listener degli eventi ti consentono di fare esattamente questo:

1. Nel riquadro Debug JavaScript, fare clic su Punti di interruzione listener eventi per espandere la sezione. DevTools rivela un elenco di categorie di eventi espandibili, come Animazione e Appunti.

2. Accanto alla categoria eventi del mouse, fare clic su Espandi . DevTools rivela un elenco di eventi del mouse, come click e mousedown. Ogni evento ha una casella di controllo accanto ad esso.

3. Seleziona la casella di controllo fai clic. DevTools è ora impostato per mettere in pausa automaticamente quando viene eseguito un listener di eventi click.

   

   Figura 5. La casella di controllo clic è abilitata

4. Di nuovo sulla demo, fare clic su Aggiungi numero 1 e Numero 2 di nuovo. DevTools mette in pausa la demo e mette in evidenza una riga di codice nel pannello Sorgenti. DevTools dovrebbe essere messo in pausa su questa riga di codice:

   function onClick() {

   Se sei in pausa su una riga di codice diversa, premi Riprendi esecuzione script finché non sei in pausa sulla riga corretta.

   Nota: se hai messo in pausa su una riga diversa, hai un’estensione per il browser che registra un listener di eventi click su ogni pagina che visiti. Sei stato messo in pausa nel listener click dell’estensione. Se si utilizza la modalità in incognito per navigare in privato, che disabilita tutte le estensioni, si può vedere che si mette in pausa sulla riga corretta del codice ogni volta.

I punti di interruzione del listener degli eventi sono solo uno dei molti tipi di punti di interruzione disponibili in DevTools. Vale la pena memorizzare tutti i diversi tipi, perché ogni tipo alla fine ti aiuta a eseguire il debug di scenari diversi il più rapidamente possibile. Vedi Mettere in pausa il codice con i punti di interruzione per sapere quando e come utilizzare ogni tipo.

# Passo 4: Passare attraverso il codice

Una causa comune di bug è quando uno script viene eseguito nell’ordine sbagliato. Passare attraverso il codice consente di esaminare l’esecuzione del codice, una riga alla volta, e capire esattamente dove viene eseguito in un ordine diverso da quello previsto. Provalo ora:

1. Nel pannello Sorgenti di DevTools, fare clic su Passaggio 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. Fare clic su Passa alla chiamata di funzione successiva . DevTools esegue inputsAreEmpty() senza entrare in esso. Si noti come DevTools salta alcune righe di codice. Questo perché inputsAreEmpty() valutato su false, quindi il blocco di codice dell’istruzione if non è stato eseguito.

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

# Punto 5: Impostare un punto di interruzione riga di codice

I punti di interruzione riga di codice sono il tipo più comune di punto di interruzione. Quando hai una riga di codice specifica su cui vuoi mettere in pausa, usa un punto di interruzione della 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 di riga di questa particolare riga di codice, che è 32. Clicca su 32. DevTools mette un’icona blu sopra 32. Ciò significa che c’è un punto di interruzione della riga di codice su questa riga. DevTools ora si ferma sempre prima che questa riga di codice venga eseguita.

3. Fare clic su Riprendi esecuzione script . Lo script continua l’esecuzione fino a raggiungere la riga 32. Nelle righe 29, 30 e 31, DevTools stampa i valori di addend1, addend2 e sum a destra del punto e virgola di ogni riga.

   

   Figura 6. DevTools mette in pausa il punto di interruzione della linea di codice sulla linea 32

# Passaggio 6: Controllare i valori delle variabili

I valori di addend1, addend2 e sum sembrano sospetti. Sono racchiusi tra virgolette, il che significa che sono stringhe. Questa è una buona ipotesi per spiegare la causa del bug. Ora è il momento di raccogliere maggiori informazioni. DevTools fornisce molti strumenti per esaminare i valori delle variabili.

# Metodo 1: Il riquadro Ambito

Quando si è in pausa su una riga di codice, il riquadro Ambito mostra quali variabili locali e globali sono attualmente definite, insieme al valore di ciascuna variabile. Mostra anche le variabili di chiusura, quando applicabile. Fare doppio clic su un valore variabile per modificarlo. Quando non si è in pausa su una riga di codice, il riquadro Ambito è vuoto.

Figura 7. Il riquadro Ambito

# Metodo 2: Espressioni di controllo

La scheda Espressioni di controllo consente di monitorare i valori delle variabili nel tempo. Come suggerisce il nome, le espressioni di watch non sono solo limitate alle variabili. È possibile memorizzare qualsiasi espressione JavaScript valida in un’espressione Orologio. Provalo ora:

1. Fare clic sulla scheda Guarda.

2. Fare clic su Aggiungi espressione .

3. Digitare typeof sum.

4. Premere Invio. DevTools mostra typeof sum: "string". Il valore a destra dei due punti è il risultato dell’espressione Orologio.

   

   Figura 8. Il riquadro Espressione orologio (in basso a destra), dopo aver creato l’espressione Orologio typeof sum. Se la finestra DevTools è grande, il riquadro Espressione orologio si trova sulla destra, sopra il riquadro Punti di interruzione del listener di eventi.

Come sospetto, sum viene valutato come una stringa, quando dovrebbe essere un numero. Ora hai confermato che questa è la causa del bug.

# Metodo 3: La Console

Oltre a visualizzare i messaggi console.log(), è anche possibile utilizzare la Console per valutare istruzioni JavaScript arbitrarie. In termini di debug, è possibile utilizzare la console per testare potenziali correzioni di bug. Provalo ora:

1. Se il cassetto della console non è aperto, premere Esc per aprirlo. Si apre nella parte inferiore della finestra DevTools.

2. Nella Console, digitare parseInt(addend1) + parseInt(addend2). Questa istruzione funziona perché si è in pausa su una riga di codice in cui addend1 e addend2 sono nell’ambito.

3. Premere Invio. DevTools valuta l’istruzione e stampa 6, che è il risultato che ci si aspetta che la demo produca.

   

   Figura 9. Il cassetto della console, dopo aver valutato parseInt(addend1) + parseInt(addend2).

# Passo 7: Applicare una correzione

Hai trovato una correzione per il bug. Tutto ciò che rimane è provare la correzione modificando il codice e rieseguendo la demo. Non è necessario lasciare DevTools per applicare la correzione. È possibile modificare il codice JavaScript direttamente all’interno dell’interfaccia utente DevTools. Provalo ora:

1. Fare clic su Riprendi esecuzione script.
2. Nell’editor di codice, sostituire la riga 31, var sum = addend1 + addend2, con var sum = parseInt(addend1) + parseInt(addend2).
3. Premere Command+S (Mac) o Control+S (Windows, Linux) per salvare la modifica.
4. Fare clic su Disattiva punti di interruzione . Cambia blu per indicare che è attivo. Mentre questo è impostato, DevTools ignora tutti i punti di interruzione impostati.
5. Prova la demo con valori diversi. La demo ora calcola correttamente.

Congratulazioni! Ora sai come sfruttare al meglio Chrome DevTools durante il debug di JavaScript. Gli strumenti e i metodi che hai imparato in questo tutorial possono farti risparmiare ore e ore.

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 su eccezioni catturate o non rilevate.
• Punti di interruzione XHR attivati quando l’URL richiesto corrisponde a una sottostringa fornita.

Vedi Mettere in pausa il codice con i punti di interruzione per sapere quando e come utilizzare ogni tipo.

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