Script Debugging e Console – Developer Toolbar IE9

14 marzo 2011

Script Debugging e la nuova Script Console

La nuova toolbar di IE9 offre anche delle interessanti funzionalità di debugging che possono essere usate per supportare lo sviluppo e contribuire ad analizzare il codice Javascript, consentendo anche un debug riga per riga, inserendo breakpoint in linee specifiche del codice e permettendo l’analisi dello stato delle variabili durante l’esecuzione.

Per utilizzare le funzionalità di debug degli script nella pagina, apriamo la F12 Developer Tools e selezioniamo il Tab Script.

Figura 11. Tab Script
(clic per ingrandire)

Tab Script

Il tool fornisce un elenco degli script in uso nella pagina in esecuzione, possiamo quindi selezionarne e visualizzarne uno e avviare il debug con lo specifico pustante di start.

Figura 12. Elenco degli script e pulsante di inizio del debugging
(clic per ingrandire)

Elenco degli script e pulsante di inizio del debugging

Inoltre, in caso di script compressi e minimizzati, possiamo utilizzare l’opzione Format JavaScript per renderli più leggibili.

Figura 13. Formattare il JavaScript

Formattare il JavaScript

Per avviare il debug dello script scelto basta cliccare sul pulsante Start debugging ed affiancare la finestra del browser a quella del tool come illustrato di seguito, dopo aver selezionato i punti in cui inserire dei breakpoint:

Figura 14. Esempio di debug con breakpoint
(clic per ingrandire)

Esempio di debug con breakpoint

È infatti possibile impostare dei breakpoint (con condizioni opzionali), controllare l’esecuzione dello script, o controllare variabili (watch) e lo stack di chiamate.

Eventuali errori di script presenti nella pagina o specifiche entry di log verranno visualizzate nella console. La console è una delle nuove caratteristiche aggiunte in IE9 gli F12 Developer Tools e fornisce una serie di caratteristiche preziose: quando la Console è selezionata è possibile eseguire delle istruzioni anche digitandole nella riga di comando della console stessa, con l’opzione di esecuzione immediata.

Ogni riga di codice valida può essere eseguita all’interno di uno script in pausa premendo invio o cliccando sul pulsante Run Script posto vicino alla riga di comando.

Se necessario, è possibile cambiare linea di comando della console, a linea singola o a più linee, potendo così inserire comandi più complessi e script per il debug. Anche in modalità multi linea, per eseguire il codice digitato in questa modalità, è necessario sempre fare clic sull’icona Run Script.

Figura 15. Eseguire un’istruzione da riga di comando
(clic per ingrandire)

Eseguire un'istruzione da riga di comando

La riga di comando nella Console permette anche di registrare gli errori e altre informazioni per facilitare il debug degli script.

Con i comandi console.clear e console.log("") si può ripulire la console o inserire specifici messaggi di log.

Link utili

Se vuoi aggiornamenti su Script Debugging e Console - Developer Toolbar IE9 inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Script Debugging e Console - Developer Toolbar IE9

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy