JavaScript di debug

Kayce Basques

Twitter GitHub Glitch

Sofia Emelianova

GitHub

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

Passaggio 1: riproduci il bug

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

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

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

Passaggio 2: acquisisci familiarità con l'interfaccia utente del riquadro Origini

DevTools fornisce molti strumenti per attività diverse, 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 premendo Comando+Opzione+J (Mac) o Ctrl+Maiusc+J (Windows, Linux). Questa scorciatoia apre il riquadro Console.

   

2. Fai clic sulla scheda Origini.

   

L'interfaccia utente del riquadro Origini è composta da tre parti:

1. Il riquadro Navigazione file. Ogni file richiesto dalla pagina è elencato qui.
2. Il riquadro Editor di codice. Dopo aver selezionato un file nel riquadro Navigazione file, i contenuti di tale file vengono visualizzati qui.
3. Il riquadro Debug JavaScript. Vari strumenti per ispezionare il codice JavaScript della pagina. Se la finestra di DevTools è larga, questo riquadro viene visualizzato a destra del riquadro Editor di codice.

Passaggio 3: metti in pausa il codice con un punto di interruzione

Un metodo comune per eseguire il debug di un problema di questo tipo consiste nell'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ò essere utile, 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 hanno 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 quindi 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 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 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. Punti di interruzione listener di eventi ti consente di eseguire esattamente questa operazione:

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

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

   

4. Torna alla demo e 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 la pausa avviene su un'altra riga di codice, premi Riprendi esecuzione script finché il punto è nella riga corretta.

   Nota: se hai messo in pausa su una riga diversa, hai un'estensione del browser che registra un listener di eventi click su ogni pagina che visiti. Sei stato messo in pausa nell'ascoltatore click dell'estensione. Se utilizzi la modalità di navigazione in incognito per navigare in privato, il che disattiva tutte le estensioni, puoi vedere che ti metti in pausa 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 memorizzare tutti i diversi tipi, perché ciascun tipo in ultima analisi consente di eseguire il debug di diversi scenari il più rapidamente possibile. Consulta Metti in pausa il codice con i punti di interruzione per scoprire quando e come utilizzare ciascun tipo.

Passaggio 4: esamina il codice

Una causa comune dei bug è l'esecuzione di uno script nell'ordine sbagliato. Analizzare il codice consente di analizzare l'esecuzione del codice, una riga alla volta, per capire esattamente dove viene eseguito, in un ordine diverso da quello previsto. Prova subito:

1. Nel riquadro Origini di DevTools, fai clic su Passaggio nella 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 Passa alla chiamata funzione successiva . DevTools esegue inputsAreEmpty() senza intervenire. Come vedi, DevTools salta alcune righe di codice. Questo perché inputsAreEmpty() è stato valutato come falso, pertanto il blocco di codice dell'istruzione if non è stato eseguito.

Questa è l'idea alla base dell'introduzione del codice. Se osservi il codice in get-started.js, puoi notare che il bug è probabilmente 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.

Passaggio 5: imposta un punto di interruzione riga di codice

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

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

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

2. Sulla sinistra del codice puoi vedere il numero di questa particolare riga di codice, che è 32. Fai clic su 32. DevTools posiziona un'icona blu sopra 32. 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 l'esecuzione dello script . Lo script continua l'esecuzione finché non raggiunge la riga 32. Alle righe 29, 30 e 31, DevTools mostra i valori di addend1, addend2 e sum in linea accanto alle rispettive dichiarazioni.

In questo esempio, DevTools si ferma al punto di interruzione della riga di codice alla riga 32.

Passaggio 6. Controlla i valori della variabile

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

Metodo 1: il riquadro Ambito

Quando ti trovi su una riga di codice, il riquadro Ambito mostra quali variabili locali e globali sono attualmente definite, insieme al valore di ogni variabile. Mostra anche le variabili di chiusura, se applicabili. Fai doppio clic sul valore di una variabile per modificarlo. Se non sei in pausa su una riga di codice, il riquadro Ambito è vuoto.

Metodo 2: espressioni di visualizzazione

La scheda Espressioni di controllo consente di monitorare i valori delle variabili nel tempo. Come suggerisce il nome, le espressioni di visualizzazione non sono limitate solo alle variabili. Puoi memorizzare qualsiasi espressione JavaScript valida in un'espressione di controllo. Prova subito:

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

Lo screenshot in alto mostra il riquadro Espressione smartwatch (in basso a destra) dopo aver creato l'espressione smartwatch typeof sum. Se la finestra DevTools è di grandi dimensioni, il riquadro Espressione di visualizzazione si trova a destra, sopra il riquadro Punti di interruzione del listener di eventi.

Come sospetto, sum viene valutato come stringa, ma 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é è 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, ossia il risultato che ti aspetti venga prodotto dalla demo.

Lo screenshot in alto mostra il riquadro a scomparsa Console dopo aver valutato parseInt(addend1) + parseInt(addend2).

Passaggio 7: applica una correzione

Hai trovato una correzione per il bug. Non ti resta che provare la correzione 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 l'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 Disattiva punti di interruzione . Il colore diventa blu per indicare che è 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.

Attenzione: questo flusso di lavoro applica una correzione solo al codice in esecuzione nel browser. ma non per tutti gli utenti che visitano la tua pagina. Per farlo, devi correggere il codice presente sui tuoi server. Tuttavia, puoi modificare i file in DevTools e salvarli nelle tue origini con le aree di lavoro.

Punto chiave: a partire dalla versione 105 di Chrome, puoi modificare una funzione in pausa attiva.

Passaggi successivi

Complimenti! Ora sai come utilizzare al meglio Chrome DevTools durante il debug di JavaScript. Gli strumenti e i metodi che hai imparato in questo tutorial ti consentono di risparmiare molte 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 da te fornita è vera.
• Punti di interruzione per eccezioni rilevate o non rilevate.
• Punti di interruzione XHR che vengono attivati quando l'URL richiesto corrisponde a una sottostringa da te fornita.

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

Ci sono un paio di controlli per l'esecuzione dei passaggi del codice che non sono stati illustrati in questo tutorial. Per scoprire di più, consulta Passaggio sulla riga di codice.