Debug JavaScript
Gli errori possono (succedere) ogni volta che scrivi un nuovo codice del computer.
Debug del codice
Il codice di programmazione potrebbe contenere errori di sintassi o errori logici.
Molti di questi errori sono difficili da diagnosticare.
Spesso, quando il codice di programmazione contiene errori, non succede nulla. Non ci sono messaggi di errore e non riceverai indicazioni su dove cercare gli errori.
La ricerca (e la correzione) degli errori nel codice di programmazione è chiamata debug del codice.
Debugger JavaScript
Il debug non è facile. Ma fortunatamente, tutti i browser moderni hanno un debugger JavaScript integrato.
I debugger integrati possono essere attivati e disattivati, costringendo gli errori a essere segnalati all'utente.
Con un debugger, puoi anche impostare punti di interruzione (luoghi in cui è possibile interrompere l'esecuzione del codice) ed esaminare le variabili mentre il codice è in esecuzione.
Normalmente, altrimenti segui i passaggi in fondo a questa pagina, attivi il debug nel tuo browser con il tasto F12 e seleziona "Console" nel menu del debugger.
Il metodo console.log()
Se il tuo browser supporta il debug, puoi utilizzare console.log()per visualizzare i valori JavaScript nella finestra del debugger:
Esempio
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>
</html>
Suggerimento: leggi di più sul console.log()metodo nel nostro JavaScript Console Reference .
Impostazione dei punti di interruzione
Nella finestra del debugger, puoi impostare punti di interruzione nel codice JavaScript.
Ad ogni punto di interruzione, JavaScript interromperà l'esecuzione e ti consentirà di esaminare i valori JavaScript.
Dopo aver esaminato i valori, è possibile riprendere l'esecuzione del codice (in genere con un pulsante di riproduzione).
La parola chiave del debugger
La debuggerparola chiave interrompe l'esecuzione di JavaScript e chiama (se disponibile) la funzione di debug.
Questo ha la stessa funzione dell'impostazione di un punto di interruzione nel debugger.
Se non è disponibile alcun debug, l'istruzione del debugger non ha effetto.
Con il debugger attivato, l'esecuzione di questo codice verrà interrotta prima dell'esecuzione della terza riga.
Esempio
let x = 15 * 5;
debugger;
document.getElementById("demo").innerHTML = x;
Strumenti di debug dei principali browser
Normalmente, attivi il debug nel tuo browser con F12 e selezioni "Console" nel menu del debugger.
Altrimenti segui questi passaggi:
Cromo
- Apri il browser.
- Dal menu, seleziona "Altri strumenti".
- Da strumenti, scegli "Strumenti per sviluppatori".
- Infine, seleziona Console.
Firefox
- Apri il browser.
- Dal menu, seleziona "Sviluppatore Web".
- Infine, seleziona "Console Web".
Bordo
- Apri il browser.
- Dal menu, seleziona "Strumenti per sviluppatori".
- Infine, seleziona "Console".
musica lirica
- Apri il browser.
- Dal menu, seleziona "Sviluppatore".
- Da "Sviluppatore", seleziona "Strumenti per sviluppatori".
- Infine, seleziona "Console".
Safari
- Vai su Safari, Preferenze, Avanzate nel menu principale.
- Seleziona "Abilita Mostra menu Sviluppo nella barra dei menu".
- Quando la nuova opzione "Sviluppo" appare nel menu:
Scegli "Mostra console errori".
Lo sapevate?
Il debug è il processo di test, ricerca e riduzione di bug (errori) nei programmi per computer.
Il primo bug noto del computer era un vero bug (un insetto) bloccato nell'elettronica.