JavaScript  »  Articoli  »  Mondo Javascript 

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.

Altri articoli

Altre guide

Altre newsletter