Il sistema più semplice e diffuso per effettuare il debug di una applicazione JavaScript, è quello di piazzare un alert nel mezzo del codice sorgente, al fine di controllare il contenuto di alcune variabili.

alert("Hello Firefox");

Questo approccio, sicuramente immediato, purtroppo non può essere utilizzato in tutte le situazioni. Il classico esempio sono le richieste XMLHttpRequest negli script: la comparsa della finestra pop-up interrompe lo script finché non si preme il pulsante OK, e tutti gli eventi che occorrono nel frattempo – quali readyStateChange – non vengono gestiti, causando effetti imprevisti.

Per ottenere un monitoraggio molto più attendibile, si può utilizzare la console di Firefox, una caratteristica non molto conosciuta del browser di casa Mozilla, che richiede però alcuni interventi per essere utilizzata.

Avvio della console di Firefox

Innanzitutto la console di Firefox non va assolutamente confusa con la console degli errori, già abilitata di default in tutte le installazioni, ed accessibile attraverso il menù Strumenti. Si tratta di una vera e propria console, molto simile ad un terminale, che può essere usata anche per interagire con le sessioni aperte ed inviare comandi al browser.

Per avviare la console di Firefox, è necessario controllare che tutte le sessioni correnti siano chiuse, quindi riavviare il browser con il parametro -console. In Windows, si può utilizzare il prompt dei comandi oppure la finestra “Esegui” del menu start, e digitare il comando.

"%programfiles%\Mozilla Firefox\firefox.exe" -console

Se la console non dovesse aprirsi, controllate che il processo di Firefox non sia ancora in esecuzione (in Windows tramite Task Manager) ed eventualmente forzatene la chiusura. Per il futuro, per facilitare l’avvio della console, consiglio di creare un collegamento sul desktop.

Abilitazione della funzione window.dump

Per scrivere nella console si utilizza la funzione dump, che di default non è abilitata. Nella barra degli indirizzi è necessario accedere ad about:config ed aggiungere un nuovo valore booleano oppure modificare il file user.js nel proprio profilo.

browser.dom.window.dump.enabled = true

Una volta effettuata la modifica alla configurazione, è necessario riavviare nuovamente Firefox affinché abbia effetto.

Utilizzo della funzione window.dump

La sintassi è molto semplice ed è molto simile agli alert.

dump("Hello Firefox\n");

Come si può notare, è stato usato un carattere newline (capo riga) alla fine della stringa. Consiglio di aggiungerlo sempre, per rendere maggiormente leggibili i log sullo schermo della console.