Nelle mie prime avventure nel mondo di Javascript e jQuery mi sono subito trovato spiazzato da come trovare eventuali errori e da come gestire il debug nelle mie applicazioni.

I nuovi browser in questo aiutano molto lo sviluppatore e quasi tutti offrono uno strumento di debugging raggiungibile via menù:

  • Google Chrome
    Strumenti -> Console Javascript (CTRL+MAIUSC+I)
  • Internet Explorer > 8
    Strumenti -> Strumenti di sviluppo (F12)
  • Firefox > 4
    Sviluppo Web -> Console Web (CTRL+MAIUSC+K)
  • Safari
    Preferenze -> Avanzate -> Mostra menu Sviluppo nella barra dei menu

Per Chrome, Firefox e Safari c’è anche il validissimo Firebug oppure laWeb Developer Toolbar.
Tramite questi strumenti possibile verificare eventuali errori e molto altro.

Il debugging vero e proprio invece viene effettuato solitamente tramite le funzionialert() econsole.log().
Entrambe permettono di stampare ci che si vuole, che possa essere il contenuto di una variabile o la veridicità o meno di una condizione. Vediamo le differenze:


La funzione alert()

Tramite alert() avrete un risultato a video sotto forma di popup.
Tale funzione blocca il flusso di codice Javascript per poi riprendelo una volta cliccato “ok” nella finestra di dialogo.
Nell’esempio il nostro codice sar:

alert('Prove di Debug : alert()');

La funzione console.log()
Tramite la funzione console.log() il risultato verrà visualizzato nella console che troverete nei sopra citati strumenti di sviluppo. Questa funzione non ferma i flusso di codice Javascript permettendo allo sviluppatore di visualizzare l’evoluzione del codice senza troppe finestre di dialogo.
Nell’esempio il nostro codice sarà:

console.log('Prove di Debug : console.log()');