In questo tutorial imparerai a eseguire il debug in JavaScript con l'aiuto di esempi.
Puoi e incontrerai errori durante la scrittura dei programmi. Gli errori non sono necessariamente negativi. In effetti, la maggior parte delle volte, ci aiutano a identificare i problemi con il nostro codice. È essenziale che tu sappia come eseguire il debug del codice e correggere gli errori.
Il debug è il processo di esame del programma, individuazione dell'errore e correzione.
Esistono diversi modi per eseguire il debug del programma JavaScript.
1. Utilizzo di console.log ()
È possibile utilizzare il console.log()metodo per eseguire il debug del codice. È possibile trasferire il valore che si desidera controllare nel console.log()metodo e verificare se i dati sono corretti.
La sintassi è:
console.log(object/message);
Potresti passare l'oggetto console.log()o semplicemente una stringa di messaggio.
Nel tutorial precedente, abbiamo utilizzato il console.log()metodo per stampare l'output. Tuttavia, puoi anche utilizzare questo metodo per il debug. Per esempio,
let a = 5; let b = 'asdf'; let c = a + b; // if you want to see the value of c console.log(c); // then do other operations if(c) ( // do something )
Utilizzando il console.log()metodo nel browser si apre il valore nella finestra del debugger.
Funzionamento del metodo console.log () nel browser
Non console.log()è specifico per i browser. È disponibile anche in altri motori JavaScript.
2. Utilizzo del debugger
La debuggerparola chiave interrompe l'esecuzione del codice e chiama la funzione di debug.
Il debuggerè disponibile in quasi tutti i motori JavaScript.
Vediamo un esempio,
let a = 6; let b = 9; let c = a * b; // stops the execution debugger; console.log(c);
Vediamo come puoi utilizzare il debugger in un browser Chrome.
Funzionamento del debugger nel browser
Il programma sopra interrompe l'esecuzione del programma nella riga contenente il file debugger.
È quindi possibile riprendere il controllo del flusso dopo aver esaminato il programma.
Il resto del codice verrà eseguito quando riprendi lo script premendo play nella console.
Funzionamento del debugger nel browser
3. Impostazione dei punti di interruzione
È possibile impostare punti di interruzione per il codice JavaScript nella finestra del debugger.
JavaScript interromperà l'esecuzione a ogni punto di interruzione e consente di esaminare i valori. Quindi, puoi riprendere l'esecuzione del codice.
Vediamo un esempio impostando un punto di interruzione nel browser Chrome.
Utilizzo dei punti di interruzione nel browser
Puoi impostare punti di interruzione tramite lo strumento Sviluppatori in qualsiasi punto del codice.
L'impostazione dei punti di interruzione è simile all'inserimento di un debugger nel codice. Qui, devi semplicemente impostare i punti di interruzione facendo clic sul numero di riga del codice sorgente invece di chiamare manualmente la funzione debugger.
Nei metodi precedenti, abbiamo utilizzato il browser Chrome per mostrare i processi di debug per semplicità. Tuttavia, non è la tua unica opzione.
Tutti i buoni IDE forniscono un modo per eseguire il debug del codice. Il processo di debug potrebbe essere leggermente diverso ma il concetto alla base del debug è lo stesso.
