facciamo un pò di debug in javascript

(1^ parte)

Osservando i numerosi thread aperti su questo forum noto che i problemi postati - pur riguardando gli argomenti diversi tra loro - trovano una soluzione in casisitiche ben definite.

Molte sono le discussioni che richiederebbero semplicemente un pò di debug per risolvere i problemi sollevati ([OT]ciò mi ricorda quando a scuola gli insegnanti si lamentavano che
"questi ragazzi non hanno un metodo di studio"[/OT]).

Molti dei frequentatori del forum sono alle prime armi e non sanno come si fa un debug ottimale.

In questo post vi propongo alcune metodologie (più o meno semplici) per trovare gli errori più comuni e approcci di programmazione: ciò vi consentirà di correggere gli errori in tempo notevolmente minore.

Invito in tal senso la continuazione del post da parte di altri utenti, illustrando altre tecniche di debug e/o di programmazione che vi sembrano meritevoli


1) La dotazione necessaria

Se si sviluppa per il web si dovrebbe sempre avere diversi browser su cui fare le prove (Explorer e Firefox è il minimo indispensabile e anche Safari se si progetta su Mac).

Firefox in particolare dispone di due strumenti ondamentali: il DOM inspector e la Javascript Console.

In particolare quest'ultima è accedibile tramite menu Strumenti > Console Javascript'

La console mostra errori, avvisi e messaggi, con la ossibilità di avere una visione di insieme (tasto 'tutti'). E' buona regola cancellare i messaggi di errore memorizzati prima dell'avvio della console ed avere quindi la console pulita (tasto 'Svuota').

A console aperta caricate la pagina nella finestra principale e guardate gli eventuali messaggi di errore: questi sono di solito costituiti da una descrizione, un link al file che ha generato l'errore ed il numero di linea. Ricordate che un errore può verificarsi anche a seguito di un evento dell'utente e quindi la pagina va provata in ogni possibile interazione, ovvero provando tutti gli eventi a cui è associata una funzione javascript.

Ogni volta che si corregge un errore è necessario ripulire la console (per maggiore chiarezza) e riprovare nuovamente l'applicazione. Se non riuscite a risolvere il problema in nessun modo, sarebbe molto "utile" per chi vi aiuta sul forum avere l'esatto messaggio di errore della console e ovviamente anche la parte di codice in
cui si verifica l'errore.

Se la pagina in questione contiene del codice lato server (asp, php...) di norma è sufficiente postare il codice restituito dal browser non il sorgente con le istruzioni lato server. L'interprete javascript infatti non sa nulla dei vostri sorgenti originali e opera sul codice che riceve il browser.



2) 'xxxxx' non è definito...
Un degli errori più ricorrenti che la vostra console riporta è 'xxxxx' non è definito.

Questo errore è associato all'uso del DOM, ovvero al tentativo di accedere ad un oggetto della pagina per leggere o scrivere una proprietà. Fermo restando la necessità di conoscere la sintassi esatta e gerarchia dei vari oggetti
controllate

- eventuali mispelling (proprietà scritte in modo non corretto, ad es. document.getElementByTagName)
- eventuali errori di maiuscole/minuscole (oggetti e proprietà sono case sensitive)
- proprietà inesistenti / non ricordate la proprietà che vi serve

Supponiamo che non vi ricordiate il modo di riferirsi agli oggetti tramite id. Il seguente script può aiutarvi

codice:
...
<body>
<script>
for (p in document) {
    document.write(p + "
");
}
</script>
</body>
...
Questo ciclo for controlla ed elenca tutte le proprietà dell'oggetto document. In questo modo vi sarà facile individuare la proprietà che vi serviva e la sua esatta sintassi. Ovviamente può servire per elencare altri oggetti, come location, navigator,... )

Ricordate ancora che non potete accedere ad un oggetto del DOM prima che questo sia stato chiuso nel documento. Eventuali script che vi accedono dovrebbero essere posti nell'header del document ed eseguiti dopo che l'oggetto è stato chiuso.