facciamo un pò di debug in javascript (1^ parte)

**fcaldera** · 16-01-2006, 16:37

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.

**fcaldera** · 16-01-2006, 16:38

3) Funziona solo su Explorer
Fondamentalmente la causa di tale errore è una: explorer usa proprietà... proprietarie, ovvero valevoli solo su quel browser. Molti programmatori si riferiscono ai vari elementi in questo modo: document.nomeform.nomeinput.value (ad esempio per leggere il contenuto di un campo input dentro un form).

Questo modo non è approvato dal w3c: per riferirsi ad un oggetto il modo corretto è

- Assegnare un attributo id all'oggetto - ad es. <div id="testo"></div> -
- Riferirsi all'oggetto con document.getElementById - ad es. document.getElementById('testo') -

Un errore comune è anche l'uso di document.all, quando la collection all è definita solo per Explorer.

4) Il valore non è quello atteso
In alcune funzioni viene spesso eseguito un calcolo con numeri e dati che sono convertiti da un campo di un form.

In generale, se il risultato di una variabile non è quello atteso basta semplicemente fermare l'esecuzione del codice con degli alert su cui vi farete stampare a video di volta in volta il valore della variabile dopo ciascuna istruzione.

5) Attenzione ai tipi

Un errore comune nei costrutti if è l'errore di tipo: ad esempio:

codice:

if (valore == "true") { ...

se si sta controllando un valore logico (booleano) questo confronto è errato: true va senza apici, a meno che voi non stiate effetivamente controllando il valore di una stringa

codice:

if (valore == "undefined") { ...

vale lo stesso discorso: undefined va senza apici

6) Un pò di fantasia...
Un altro errore che si presenta con una certa frequenza è l'uso di parole riservate nel codice. L'errore più comune è

[code]
<form name="form">
<input type="text" name="input" />
</form>
[code]

associato al classico document.form.input.value

Qui javascript fa ovviamente confusione perchè nomi riservati nel DOM vengono utilizzati come valori per attributi. Nel momento in cui si cerca di accedere al campo del form in quel modo si avrà un errore.

Usate la fantasia (e un pò di logica): date attributi id e name in base al significato degli elementi e in ogni caso evitate di usare parole chiave già definite.

Buon debug

**questin26** · 16-01-2006, 17:05

molto interessante per noi newbie thankyou

**pierofix** · 16-01-2006, 17:40

Ottime linee guida. Bravo fcaldera!

**fcaldera** · 16-01-2006, 17:51

ci sarebbe da affrontare anche un discorso a parte sui metodi di programmazione (un pò di ingegneria del software) ma è un discorso lungo... tipo programmazione top-down, programmazione Object-Oriented, riutilizzo del codice... ma mi rendo conto che è molto vasto

**fcaldera** · 16-01-2006, 18:30

dimostrazione pratica della metodologia

http://forum.html.it/forum/showthrea...hreadid=934521

(venghino siori, venghino)

**thitan** · 16-01-2006, 18:43

**Xinod** · 16-01-2006, 20:14

utili linee guida,
a dire la verita', secondo me, c'e' un' imprecisione riguardo il document.nomeForm.nomeCampo.value
il fatto che non acceda alle proprieta' del campo via DOM W3C non rende la sintassi proprietaria, e' puro javascript quindi dovrebbe funzionare su qualsiasi browser che abbia javascript abilitato (parlo anche di retrocompatibilita' alle versioni 4 dei browser)
si potrebbe obiettare che essendo il name del campo deprecato ed essendo l' id cosa ben diversa dal name (x tutti i browser tranne che x il solito IE) la sintassi non diventa utilizzabile, ma solo in dipendenza del doctype,
non perche' proprietaria

potrei sbagliarmi, ma questo e' quanto mi e' sempre sembrato di capire

**fcaldera** · 16-01-2006, 20:33

infatti è proprio così: in realtà ho inserito la digressione solo perchè mi sembrava un punto di pertinenza (per dire: già che ci sono e non rendo tutto più prolisso con un ulteriore punto...)

cmq quello che volevo portare all'attenzione era l'uso dell'id come suggerito dal w3c

Discussione: facciamo un pò di debug in javascript (1^ parte)

Strumenti discussione

Ricerca discussione

Visualizza

facciamo un pò di debug in javascript

2^ parte

Permessi di invio