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 (su questa pagina)
- 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 si possono ricercare e selezionare degli elementi che vengono anche evidenziati con un riquadro blu nella pagina.
Il Select By Click ci permette, una volta attivato, di selezionare col mouse un elemento nel browser: la developer toolbar si posizionerà nel DOM sull'elemento e ci darà la possibilità di controllarne gli stili, le configurazioni o di disabilitarlo. Vengono visulizzati nel tool anche elementi HTML5 e SVG.
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 attivo in un istanza del browser, con evidenziati i comandi principali per la selezione del Tab ed il pulsante per attivare/disattivare la cattura del traffico di rete che di default è disabilitata.
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, che apre la relativa finestra di salvataggio:
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 e ricercare le funzioni all'interno dei dati raccolti con la funzione di ricerca (campo search). I dati possono essere elencati riordinandoli in base ai valori dei diversi campi. È disponibile una vista per funzioni, quella mostrata sopra, ed anche una vista Call Tree che permette di analizzare l'albero delle chiamate di ciascuna funzione.
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), che il browser invia al Web Server attraverso la richiesta HTTP
- il Document Model e il Browser Mode che il browser utilizza nel parsing e rendering della pagina
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 - IE7, IE8, IE9, and IE9 in IE7 Compatibility View
- Document Mode - Quirks Mode, IE7 Standards, IE8 Standards, and IE9 Standards
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 renderli più leggibili.
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) 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)
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
- Approfondire la barra di IE9 [Video]
- Debugging HTML and CSS with the Developer Tools
- Demo per utilizzare il Tab Networking
- Esportare i dati della toolbar in file .csv per successive analisi
- Il modello di compatibilità di Internet Explorer 9 spiegato dal team di IE: le caratteristiche e le differenze tra Browser Mode e Document Mode
- Using the F12 Tools Console to View Errors and Status
- How to use F12 Developer Tools to Debug your Webpages
