Debugging JavaScript

Gli errori sempre accadono, ogni volta che scrivi nuovi codici per computer.

Debugging JavaScript

Scrivere JavaScript senza debuggger è difficile.

Il tuo codice potrebbe contenere errori di sintassi o logica, che sono difficili da diagnosticare.

Di solito, se il codice JavaScript contiene errori, non accade nulla. Non ci sono messaggi di errore e non ci sono indicazioni su come trovare gli errori.

Di solito, ogni volta che provi a scrivere nuovo codice JavaScript, possono verificarsi errori.

Debuggger JavaScript

La ricerca degli errori nel codice di programmazione è chiamata debug del codice.

Il debug non è semplice. Fortunatamente, tutti i browser moderni hanno un debuggger integrato.

Il debuggger integrato può essere aperto o chiuso, costringendo la segnalazione degli errori agli utenti.

Con il debuggger, puoi anche impostare breakpoint (posizioni dove il codice viene interrotto) e controllare le variabili durante l'esecuzione del codice.

Di solito si avvia il debuggger del browser premendo il tasto F12 e poi selezionando "Console" nel menu del debuggger.

metodo console.log()

Se il tuo browser supporta il debug, puoi usare console.log() Visualizza i valori di JavaScript nel pannello di debug:

Esempio

<!DOCTYPE html>
<html>
<body>
<h1>La mia prima pagina web</h1>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>
</html>

Provatelo personalmente

Suggerimento:Visita la nostra guida JavaScript Console per ulteriori informazioni sulla funzione console.log().

Imposta breakpoint

Nel pannello di debug, puoi impostare breakpoint nel codice JavaScript.

A ogni breakpoint, JavaScript si fermerà per permetterti di controllare i valori di JavaScript.

Dopo aver controllato il valore, puoi riprendere l'esecuzione del codice.

Parola chiave debugger

debugger La parola chiave interrompe l'esecuzione di JavaScript e chiama (se presente) la funzione di debug.

Questa funzione è la stessa di impostare un breakpoint nel debuggger.

Se il debuggger non è disponibile,debugger La frase non ha effetto.

Se il debuggger è attivo, questo codice si fermerà prima di eseguire la terza riga.

Esempio

var x = 15 * 5;
debugger;
document.getElementById("demo").innerHTML = x;

Provatelo personalmente

Strumenti di debug dei browser più diffusi

Di solito, è possibile abilitare il debug tramite la tastiera F12 e selezionare 'Console' dal menu del debugger.

Altrimenti, seguire i seguenti passaggi:

Chrome

  • Aprire il browser
  • Scegliere gli strumenti dal menu
  • Scegliere gli strumenti di sviluppo dalle opzioni degli strumenti
  • Infine, selezionare la console

Firebug Firefox

  • Aprire il browser
  • Visita il sito web: http://www.getfirebug.com
  • Seguire le seguenti istruzioni: come installare Firebug

Internet Explorer

  • Aprire il browser
  • Scegliere gli strumenti dal menu
  • Scegliere gli strumenti di sviluppo dalle opzioni degli strumenti
  • Infine, selezionare la console

Opera

  • Aprire il browser
  • Visita il sito web: http://dev.opera.com
  • Seguire le seguenti istruzioni: come installare Firebug Lite

Menu di sviluppo Safari

  • Fare clic sul menu Safari, impostazioni, avanzate
  • Selezionare 'Abilita menu di sviluppo nella barra del menu'
  • Quando compare una nuova opzione 'Sviluppo' nel menu, selezionare 'Mostra console degli errori'

Lo sapevate?

Il debug è il processo di test, ricerca e riduzione di bug (errori) nei programmi informatici.

Il primo bug conosciuto della storia dei computer è stato un vero insetto bloccato in un dispositivo elettronico (un insetto).