JavaScript - Debug

Di tanto in tanto, gli sviluppatori commettono errori durante la codifica. Un errore in un programma o uno script è indicato come un filebug.

Viene chiamato il processo di ricerca e correzione dei bug debugginged è una parte normale del processo di sviluppo. Questa sezione copre gli strumenti e le tecniche che possono aiutarti con le attività di debug.

Messaggi di errore in IE

Il modo più semplice per rintracciare gli errori è attivare le informazioni sugli errori nel browser. Per impostazione predefinita, Internet Explorer mostra un'icona di errore nella barra di stato quando si verifica un errore nella pagina.

Facendo doppio clic su questa icona si accede a una finestra di dialogo che mostra le informazioni sull'errore specifico che si è verificato.

Poiché questa icona è facile da trascurare, Internet Explorer offre la possibilità di mostrare automaticamente la finestra di dialogo Errore ogni volta che si verifica un errore.

Per abilitare questa opzione, seleziona Tools → Internet Options → Advanced tab. e infine controlla il file "Display a Notification About Every Script Error" opzione box come mostrato di seguito -

Messaggi di errore in Firefox o Mozilla

Altri browser come Firefox, Netscape e Mozilla inviano messaggi di errore a una finestra speciale chiamata JavaScript Console o Error Consol. Per visualizzare la console, selezionaTools → Error Consol or Web Development.

Sfortunatamente, poiché questi browser non forniscono alcuna indicazione visiva quando si verifica un errore, è necessario mantenere aperta la console e controllare gli errori durante l'esecuzione dello script.

Notifiche di errore

Le notifiche di errore visualizzate sulla console o tramite le finestre di dialogo di Internet Explorer sono il risultato di errori di sintassi e di runtime. Queste notifiche di errore includono il numero di riga in cui si è verificato l'errore.

Se stai usando Firefox, puoi fare clic sull'errore disponibile nella console degli errori per andare alla riga esatta dello script che ha l'errore.

Come eseguire il debug di uno script

Esistono vari modi per eseguire il debug di JavaScript:

Usa un validatore JavaScript

Un modo per verificare la presenza di strani bug nel codice JavaScript è eseguirlo tramite un programma che lo controlla per assicurarsi che sia valido e che segua le regole di sintassi ufficiali del linguaggio. Questi programmi vengono chiamativalidating parsers o semplicemente validators in breve, e spesso vengono forniti con editor HTML e JavaScript commerciali.

Il validatore più conveniente per JavaScript è JavaScript Lint di Douglas Crockford, disponibile gratuitamente su JavaScript Lint di Douglas Crockford .

Visita semplicemente quella pagina web, incolla il tuo codice JavaScript (solo JavaScript) nell'area di testo fornita e fai clic sul pulsante jslint. Questo programma analizzerà il codice JavaScript, assicurandosi che tutte le definizioni di variabili e funzioni seguano la sintassi corretta. Controllerà anche le istruzioni JavaScript, come if ewhile, per assicurarsi che anche loro seguano il formato corretto

Aggiungi il codice di debug ai tuoi programmi

Puoi usare il file alert() o document.write()metodi nel programma per eseguire il debug del codice. Ad esempio, potresti scrivere qualcosa come segue:

var debugging = true;
var whichImage = "widget";

if( debugging )
   alert( "Calls swapImage() with argument: " + whichImage );
   var swapStatus = swapImage( whichImage );

if( debugging )
   alert( "Exits swapImage() with swapStatus=" + swapStatus );

Esaminando il contenuto e l'ordine del file alert() appena appaiono, puoi esaminare molto facilmente lo stato di salute del tuo programma.

Usa un debugger JavaScript

Un debugger è un'applicazione che pone tutti gli aspetti dell'esecuzione dello script sotto il controllo del programmatore. I debugger forniscono un controllo dettagliato sullo stato dello script tramite un'interfaccia che consente di esaminare e impostare i valori, nonché di controllare il flusso di esecuzione.

Una volta che uno script è stato caricato in un debugger, può essere eseguito una riga alla volta o istruito a fermarsi a determinati punti di interruzione. Una volta interrotta l'esecuzione, il programmatore può esaminare lo stato dello script e le sue variabili per determinare se qualcosa non va. Puoi anche controllare le variabili per i cambiamenti nei loro valori.

L'ultima versione di Mozilla JavaScript Debugger (nome in codice Venkman) per i browser Mozilla e Netscape può essere scaricata all'indirizzo http://www.hacksrus.com/~ginda/venkman

Suggerimenti utili per gli sviluppatori

È possibile tenere presenti i seguenti suggerimenti per ridurre il numero di errori negli script e semplificare il processo di debug:

  • Usane in abbondanza comments. I commenti ti consentono di spiegare perché hai scritto lo script nel modo in cui l'hai fatto e di spiegare sezioni di codice particolarmente difficili.

  • Usa sempre indentationper rendere il tuo codice facile da leggere. L'indentazione delle istruzioni semplifica anche la corrispondenza tra tag di inizio e fine, parentesi graffe e altri elementi HTML e script.

  • Scrivi modular code. Quando possibile, raggruppa le tue istruzioni in funzioni. Le funzioni consentono di raggruppare le istruzioni correlate e di testare e riutilizzare parti di codice con il minimo sforzo.

  • Sii coerente nel nome delle variabili e delle funzioni. Prova a utilizzare nomi sufficientemente lunghi da essere significativi e che descrivono il contenuto della variabile o lo scopo della funzione.

  • Utilizzare una sintassi coerente quando si nominano variabili e funzioni. In altre parole, tienili tutti in minuscolo o tutto in maiuscolo; se preferisci la notazione Camel-Back, usala in modo coerente.

  • Test long scriptsin modo modulare. In altre parole, non provare a scrivere l'intero script prima di testarne una qualsiasi parte. Scrivi un pezzo e fallo funzionare prima di aggiungere la parte successiva del codice.

  • Uso descriptive variable and function names ed evitare di utilizzare nomi di un solo carattere.

  • Watch your quotation marks. Ricorda che le virgolette vengono utilizzate a coppie attorno alle stringhe e che entrambe le virgolette devono essere dello stesso stile (singole o doppie).

  • Watch your equal signs. Non dovresti usare un singolo = a scopo di confronto.

  • Dichiarare variables explicitly usando il var parola chiave.