Nel realizzare applicazioni Web basate su HTML, CSS e JavaScript, l'utilizzo di strumenti efficaci per il debug durante lo sviluppo, ci semplifica significativamente la vita. Tra le novità di Internet Explorer 9 c'è la nuova toolbar per gli sviluppatori, integrata nel browser senza installazioni aggiuntive, attivabile rapidamente con la pressione del tasto F12.
La barra fornisce una serie di strumenti interessanti ed utili per lo sviluppo ed il debug di codice client nelle pagine Web, fornendo meccanismi per l'analisi di HTML,CSS, JavaScript e del traffico HTTP generato dal browser, semplificando ed accelerando l'analisi del codice e lo sviluppo.
Possiamo ancorare la F12 Developer Toolbar direttamente alla finestra principale del browser oppure utilizzarla come finestra separata:
Figura 1. Tools per ancorare la finestra della toolbar
(clic per ingrandire)
Quando è necessario utilizzarla come finestra separata, sfruttando Aero di Windows 7 può essere facilmente affiancata al browser per un utilizzo più semplice:
Figura 2. Tools per ancorare la finestra della toolbar
(clic per ingrandire)
In questo articolo esamineremo alcune delle novità principali introdotte con la nuova Developer Toolbar:
- Tab Analisi di HTML e CSS
- Il nuovo Network Inspection Tab
- Profiling Tool per migliorare le performance degli Script
- Tool per la modifica della User Agent String e del Compatibility Mode del browser
- Script Debugging e la nuova Script Console
Tab analisi di HTML e CSS
Il Tab di analisi della parte HTML e CSS è molto semplice da utilizzare e offre diverse modalità per ricercare gli elementi e gli stili nella pagina ed individuarli. È possibile, inoltre, modificare gli stili per poter verificare immediatamente l'impatto della modifica sulla visualizzazione.
Per individuare gli elementi e gli stili nella pagina si può utilizzare il box di ricerca o il comando "Select by element click" rappresentato con la freccia nella interfaccia grafica.
Figura 3. Ricerca e selezione per elemento
(clic per ingrandire)
Con il box di ricerca
Il Select By Click
Il Network Inspection Tab
Il Network Inspection Tab è completamente nuovo in IE9 e consente di analizzare nel dettaglio il traffico di rete e quindi le richieste che il browser produce durante l'esecuzione di una pagina, permettendo anche di analizzare nel dettaglio le singole richieste.
Figura 4. Il tab Network
(clic per ingrandire)
Nell'immagine vediamo il Tab Network
La schermata mostra anche un riepilogo delle richieste effettuate con i tempi di risposta. Sono presenti le principali informazioni sulle richieste con URL in evidenza, vengono tracciati i file caricati tramite HTML o CSS, le richieste Ajax-based, e le risorse caricate dinamicamente tramite Javascript durante l'esecuzione della pagina.
Per ogni elemento, con un semplice click, possiamo analizzare il dettaglio i contenuti della risposta e della richiesta incluse le intestazioni HTTP di richiesta, le intestazioni HTTP di risposta, i cookie, e tempi.
Figura 5. Visualizzare l'header delle richieste HTTP
(clic per ingrandire)
I dati visualizzati nella vista dettagliata possono essere esportati in formato CSV o XML. Questa opzione è disponibile tramite l'icona Salva
Figura 6. Salvare i dati
(clic per ingrandire)
Profiling Tool per migliorare le performance degli Script
La funzione Profiler script permette di raccogliere e analizzare dati sulla quantità di tempo spesa nell'esecuzione degli script, fornendo un analisi sulla distribuzione del tempo tra i vari metodi Javascript eseguiti e permettendo una analisi per individuare le funzioni ed i metodi che impattano maggiormente nei tempi di elaborazione.
Si accede alla funzionalità selezionando il tab Profiler e, in modo simile a quanto visto per la parte di Networking, si può attivare/disattivare la raccolta dati di profiling usando uno specifico comando.
Figura 7. Esecuzione di un profiling, vista funzioni
(clic per ingrandire)
La figura mostra i risultati parziali dall'esecuzione di un profiling su una pagina e sono evidenziati i comandi di selezione del tab e di attivazione/disattivazione della raccolta dati.
Possiamo creare più report
search
Call Tree
Figura 8. Vista Call Tree (albero di chiamate)
(clic per ingrandire)
I dati possono essere anche esportati in un file .csv per successive analisi.
Modificare User Agent String, Compatibility Mode e Doument Mode
Tra le funzionalità disponibili, troviamo anche la possibilità di modificare:
- la stringa dello User Agent (UA)
- il Document Model Browser Mode
Per modificare la stringa dello User Agent possiamo aprire il menu Tools > Change user agent string, scegliere tra le impostazioni già presenti o crearne di personalizzate.
Abbiamo a disposizione diverse modalità di rendering per le precedenti versioni di Internet Explorer, grazie alle modalità Browser Mode e Document Mode, che possiamo scegliere dal menu principale:
Figura 10. Menu Browser Mode e Document Mode
(clic per ingrandire)
È possibile scegliere sia per Browser Mode che per Document Mode tra diverse opzioni:
- Browser Mode
- Document Mode
Grazie a queste opzioni possiamo testare la resa della pagina forzando il comportamento del browser su una specifica opzione di funzionamento per la compatibilità.
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)
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)
Inoltre, in caso di script compressi e minimizzati, possiamo utilizzare l'opzione Format 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)
È infatti possibile impostare dei breakpoint (con condizioni opzionali), controllare l'esecuzione dello script, o controllare variabili (watch stack
Eventuali errori di script presenti nella pagina o specifiche entry di log verranno visualizzate nella console
Ogni riga di codice valida può essere eseguita all'interno di uno script in pausa premendo invio o cliccando sul pulsante Run Script
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)
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
console.log("")
Link utili
- Approfondire la barra di IE9
- Debugging HTML and CSS with the Developer Tools
- Demo per utilizzare il Tab Networking
- Esportare i dati della toolbar
- Il modello di compatibilità di Internet Explorer 9
- Using the F12 Tools Console to View Errors and Status
- How to use F12 Developer Tools to Debug your Webpages
