ES6 - 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. Questo capitolo 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 sull'errore 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 visualizzare 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 "Display a NotificationaboutEvery Script Error"Opzione box come mostrato nello screenshot seguente.

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 Console. Per visualizzare la console, selezionaTools → Error Console or Web Development.

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

Notifiche di errore

Le notifiche di errore che vengono 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 utilizzando Firefox, puoi fare clic sull'errore disponibile nella console degli errori per andare alla riga esatta dello script che presenta l'errore.

Debug di uno script

Esistono vari modi per eseguire il debug di JavaScript. Di seguito sono riportati alcuni metodi.

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 validatori 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.

È sufficiente visitare la pagina Web, incollare il codice JavaScript (solo JavaScript) nell'area di testo fornita e fare clic su jslintpulsante. 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 e while, per assicurarsi che anche loro seguano il formato corretto.

Aggiungi il codice di debug al tuo programma

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 dell'avviso () man mano che vengono visualizzati, è possibile esaminare molto facilmente lo stato di salute del 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 delle 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 da - 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:

  • Usa molti commenti. I commenti ti consentono di spiegare perché hai scritto lo script nel modo in cui l'hai fatto e di spiegare in particolare le sezioni difficili del codice.

  • Usa sempre il rientro per rendere il tuo codice facile da leggere. Il rientro delle istruzioni rende anche più facile abbinare i tag di inizio e fine, le parentesi graffe e altri elementi HTML e script.

  • Scrivi codice modulare. Quando possibile, raggruppa le tue istruzioni in funzioni. Le funzioni ti consentono di raggruppare le istruzioni correlate e di testare e riutilizzare parti del 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.

  • Prova lunghi script in 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.

  • Utilizzare nomi descrittivi di variabili e funzioni ed evitare di utilizzare nomi di caratteri singoli.

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

  • Guarda i tuoi segni di uguale. Non dovresti usare un singolo = a scopo di confronto.

  • Dichiarare le variabili in modo esplicito utilizzando il var parola chiave.

Debug con Node.js

Node.js include un'utilità di debug completa. Per usarlo, avvia Node.js con l'argomento debug seguito dal percorso dello script di cui eseguire il debug.

node debug test.js

Verrà avviato un prompt che indica che il debugger è stato avviato correttamente.

Per applicare un punto di interruzione in una posizione specificata, chiama il debugger nel codice sorgente come mostrato nel codice seguente.

// myscript.js 
x = 5; 
setTimeout(() => { 
   debugger; 
   console.log('world'); 
}, 1000); 
console.log('hello');

Di seguito è riportato un insieme di comandi passo-passo che è possibile utilizzare con Node.

Suor n Comandi e descrizione passo passo
1

cont,c

Continua
2

next,n

Il prossimo
3

step,s

Intervenire
4

out,o

Uscire
5

pause

Metti in pausa il codice. Simile alla pausa negli strumenti per sviluppatori

Un elenco completo dei comandi di debug di Node può essere trovato qui - https://nodejs.org/api/debugger.html.

Codice di Visual Studio e debug

Una delle funzionalità chiave di Visual Studio Code è il suo ottimo supporto di debug integrato per Node.js Runtime. Per il debug del codice in altri linguaggi, fornisce le estensioni del debugger.

Il debugger fornisce una pletora di funzionalità che ci consentono di avviare file di configurazione, applicare / rimuovere / disabilitare e abilitare punti di interruzione, variabili o abilitare l'ispezione dei dati, ecc.

Una guida dettagliata sul debug utilizzando VS Code può essere trovata qui - https://code.visualstudio.com/docs/editor/debugging