Negli ultimi anni il debug del codice JavaScript è diventato più semplice, grazie allo sviluppo di strumenti integrati nel browser che permettono di debuggare il codice con modalità simili a quelle di un IDE professionale. Esiste però un potenziale problema: browsers differenti presentano in genere un comportamento diverso nei confronti del codice JavaScript, per cui può capitare di non riuscire a trovare un bug (o presunto bug) perché lo cerchiamo nel contesto sbagliato.
Vediamo un esempio: supponiamo di lavorare con Firefox e trovare un bug, che fissiamo grazie all'aiuto di Firebug. A questo punto eseguiamo il JavaScript con un altro browser, ad esempio Internet Explorer, e ritroviamo lo stesso bug, cosa che ci induce a pensare che il fixing precedente non sia cross-browser. Se torniamo a debuggare il problema a noi noto, rischiamo di spaccarci la testa per cercare un fixing migliore, senza capire che il bug è in realtà un nuovo problema, dovuto alla non compatibilità tra i due browsers. In questo caso non c'è modo di risolvere il problema lavorando col nostro solito browser: l'unica soluzione è imparare a debuggare il codice JavaScript anche nell'altro browser.
L'esempio appena visto dovrebbe convincerci che non basta saper utilizzare lo strumento di debug di un singolo browser, ma dobbiamo conoscere (almeno a grandi linee) anche le modalità di debug disponibili negli altri browser. Andiamo a vedere quali sono gli strumenti di debug dei browsers più popolari, assieme alle problematiche più frequenti.
Mozilla Firefox
Lo strumento principe per risolvere qualsiasi problema di HTML, CSS o JavaScript per FireFox è il plugin Firebug. Una breve guida introduttiva all'utilizzo di Firebug è disponibile in questo articolo.
Internet Explorer
Internet Explorer è distribuito con integrato uno strumento di aiuto agli sviluppatori: per aprirlo basta cliccare sulla "rotellina" in alto a destra (icona Strumenti) e scegliere la voce Strumenti di sviluppo. In alternativa possiamo premere il tasto F12 per aprire (o chiudere) il pannello. Anche in questo caso avremo a disposizione le solite tab: HTML, CSS, Console, Profiler e Rete. Il funzionamento è semplice ed intuitivo, e ricorda molto l'interfaccia di Firebug.
Chrome
Anche Chrome contiene uno strumento integrato, attivabile cliccando sull'icona della "chiave inglese" in alto a destra (Personalizza e controlla Google Chrome) e scegliendo la voce Strumenti – Console JavaScript. La shortcut in questo caso è Ctrl + Shift + J.
Lo strumento di debug di Google si differenzia da quelli visti sopra, risultando più orientato all'analisi dei dati del browser che alle pagine web. Torna comodo per controllare cookies, cache ed eventuali database utilizzati dal browser, mettendo leggermente in secondo piano il debug degli elementi HTML e CSS (che è comunque efficace).
La modalità di debug del codice JavaScript è praticamente identica a quella di Firebug, anche qui possiamo scegliere il JavaScript da analizzare, settare breakpoint, steppare nel codice e soprattutto tenere d'occhio la console per intercettare eventuali messaggi d'errore.
Problemi frequenti
Dopo aver arricchito la nostra cassetta degli attrezzi, diamo qualche suggerimento per evitare di incappare in problemi classici. Vediamone alcuni:
Quirks mode: allo scopo di mantenere la retro-compatibilità con le versioni precedenti, la maggior parte dei browsers ammette (almeno) due modalità di funzionamento. In Standard mode il browser renderizza la pagina secondo le ultime specifiche, ad esempio XHTML, HTML5 e CSS3. In Quirks mode il browser emula il comportamento delle primissime versioni, rispettando a malapena le specifiche CSS1. Se la pagina viene eseguita in Quirks mode molti degli script non verranno riconosciuti, ad esempio perché non inclusi nell'elemento HTML head. Il problema, nel nostro caso, è che browser differenti azioneranno il Quirk mode in condizioni differenti. Esempio: Chrome e Firefox entrano in Quirks mode se non trovano la definizione <!DOCTYPE ecc...> nella pagina, mentre Internet Explorer entra in Quirks mode se tale definizione non si trova in testa alla pagina. In molti casi il comportamento diverso di uno JavaScript potrebbe essere dovuto a questa piccola dimenticanza: per evitare ogni problema, è sempre bene ricordarsi di dichiarare il DOCTYPE nella prima riga della pagina.
Reserved keywords: proviamo ad includere in una pagina il seguente codice
function start() { alert(“Hello World”) ; }
una funzione come questa gira benissimo su Firefox e Chrome, ma potrebbe generare un errore su Internet Explorer. Il motivo è che start non viene riconosciuto come identificatore valido da Internet Explorer: basta cambiare nome alla funzione e torna tutto a posto. La morale è che le parole riservate (reserved keywords) di JavaScript possono cambiare da browser a browser: quando un problema ci sembra irrisolvibile, vale la pena provare a cambiare nome alla funzione (o variabile) incriminata per capire se siamo incappati in questo caso.
Document ready: a seconda del browser, il fatto che i nostri JavaScript possano essere caricati prima degli elementi HTML referenziati dalle funzioni potrebbe presentare comportamenti diversi. Per toglierci dubbi di questo tipo è bene definire gli script solo dopo aver caricato l'intera pagina. Se usiamo jQuery, un modo comodo di risolvere il problema è quello di usare la funzione $(document).ready():
$(document).ready(function() {
// Il nostro codice JavaScript
});
