Microsoft presta sempre attenzione al mondo dello sviluppo Web. In linea con questo interesse, gli sviluppatori di Explorer hanno progettato e distribuito gratuitamente un add-on per il browser di Redmond chiamato Internet Explorer Developer Toolbar, una barra gratuita che facilita l'interpretazione, il debugging e l'analisi delle pagine Web. Accanto a questo strumento ufficiale, esistono altri utili software creati da sviluppatori indipendenti che aiutano i Webmaster nelle loro attività quotidiane. Vediamoli in dettaglio.

INTERNET EXPLORER DEVELOPER TOOLBAR
Giunta dopo alcuni anni di sviluppo alla versione 1, la Developer Toolbar per Explorer è in grado di offrire decine di dettagli analitici su una pagina Web visualizzata all'interno del browser ed è uno strumento indispensabile per chi progetta siti Web, ma anche applicazioni più complesse, su Internet Explorer. L'add-on non è visualizzato più, come nelle prime versioni Beta, in una barra degli strumenti ma in un'ampia cornice in fondo alla pagina che può essere anche separata dal browser e agire come applicazione stand-alone (Figura 1).

Figura 1 - La IE Developer toolbar è visualizzata come una cornice in fondo alla finestra di Internet Explorer 

La toolbar può, in primo luogo, esplorare e modificare al volo il Document Object Model (DOM), ossia la struttura del documento caricata nella memoria del browser. Ogni elemento XHTML usato è visualizzato in una struttura ad albero e può essere modificato al volo assegnandogli fogli di stile o attributi personalizzati e verificando immediatamente la resa sulla pagina. Immagini, link, testo, box, tabelle: ognuna delle proprietà di questi elementi può essere modificata anche selezionandolo l'area interessata con un clic (percorso Find/Select Element by Click) e agendo sulle visualizzazioni mostrate dal programma. Sempre con lo stesso sistema è possibile mostrare, dal pannello all'estrema destra, gli stili CSS assegnati agli elementi: cliccandone uno con il pulsante destro e scegliendo la voce Trace Style viene aperto l'eventuale file CSS esterno con evidenziata la proprietà selezionata. Dal menu View è possibile visualizzare diversi elementi direttamente nel documento: i tasti di accesso rapido presenti, tutte le classi utilizzate, i percorsi dei link o delle immagini e così via. Dallo stesso menu si accede al CSS Selector Matches, funzione che analizza i file CSS e individua le regole non utilizzate nel documento, regole che potranno così essere cancellate per velocizzare il caricamento della pagina (Figura 2).

Figura 2 - La funzione CSS Selector  Matches permette di contare le regole CSS

Non mancano gli strumenti per disabilitare completamente i CSS o gli script, o quelli per cancellare la cache del browser o i cookie, molto utili nel caso si voglia testare siti con contenuto dinamico. Il menu Images permette di eseguire diverse operazioni sulle immagini: disabilitarle del tutto, visualizzarne il testo alternativo (tag ALT) oppure attivare un livello sovrapposto che ne mostri dimensione in pixel o in bytes e il percorso originale. Dalla voce View Image Report dello stesso menu viene generato un rapporto in formato XML che mostra, per ogni immagine presente sulla pagina, utili informazioni: il peso, la grandezza reale e quella impostata nelle pagine, il percorso e così via. Non potevano mancare gli strumenti di validazione per HTML, CSS, Feed, Link e per l'accessibilità. La toolbar, gratuita e disponibile per Internet Explorer 6 e 7, si scarica da qui.

IEWATCH PROFESSIONAL
IEWatch della IEWatch Software è, come la Internet Explorer Developer Toolbar, uno strumento di analisi delle pagine Web navigate con Explorer; ma, a differenza dello strumento di Microsoft, offre strumenti di analisi molto più approfonditi che non si limitano agli elementi gestiti dal DOM ma coinvolgono le comunicazioni HTTP, la gestione degli script, le transazioni POST di una pagina Web e decine di altri elementi. L'interfaccia del programma, che si installa come un pannello aggiuntivo in fondo al browser, è divisa in due schede principali: HTTP Analysis e HTML Analysis. Dalla prima scheda si accede all'analisi del traffico HTTP fra browser e sito Web (Figura 3).

Figura 3 - IEWatch permette di monitorare tutto il traffico HTTP generato dal browser

Ogni richiesta del browser e ogni risposta del server viene visualizzata in un elenco cronologico che comprende, oltre al percorso dell'elemento richiesto, l'ora della richiesta, la dimensione dell'oggetto richiesto, il tempo speso per scaricarlo, gli indirizzi IP e diverse altre informazioni ottenute dal processo. I contenuti delle richieste e delle risposte sono visualizzati in due pannelli inferiori dai quali si può accedere ai contenuti dei cookie, a quelli delle richieste inviate con i metodi POST o GET e a tutti i dati ricevuti o inviati. Sempre da questi due pannelli sono visibili le intestazioni (header) delle transazioni HTTP. La scheda HTML Analysis è invece dedicata all'analisi del contenuto e del codice HTML, CSS o JavaScript incluso nella pagina. Oltre ad un pannello riassuntivo che mostra il peso totale della pagina, il tempo trascorso per scaricarla e il numero di tutti gli elementi contenuti, è possibile analizzare ogni immagine, form, script, foglio di stile o controllo ActiveX utilizzato nel documento (Figura 4).

Figura 4 - La scheda HTML Analysis di IEWatch analizza ogni singolo elemento HTML, JavaScript e CSS e li ordina in una gradevole struttura ad albero

Gli elementi HTML o i fogli di stile possono essere modificati al volo e il risultato immediatamente visualizzato sulla pagina caricata mentre, attraverso uno strumento chiamato Script Immediate, è anche possibile eseguire al volo script JavaScript nel contesto del dominio utilizzando anche istruzioni caricate da codici esterni. Con IEWatch è poi possibile eseguire screenshot delle pagine navigate, rendere trasparente l'interfaccia di Explorer, ridimensionare le finestre a risoluzioni preferite o simulare richieste HTTP personalizzate. IEWatch è l'unica applicazione completamente a pagamento di questa rassegna. Il prezzo è un po' alto (169 dollari) ma le funzioni che offre il programma sono davvero molte e ben scelte. Disponibile per Internet Explorer 6 e 7, viene comunque distribuita in versione di valutazione della durata di 30 giorni dal sito qui.

CORE SERVICE DEBUGBAR
Un'altra barra degli strumenti dedicata all'analisi delle pagine Web è la Debug- Bar che si pone, diciamo così, a metà strada fra i due strumenti prima descritti. Come la Internet Explorer Developer Toolbar consente l'ispezione del DOM e la modifica degli elementi presenti nella pagina e come IEWatch permette di tracciare le richieste HTTP che intervengono fra browser e server. In entrambi i casi tuttavia le funzioni sono più limitate degli altri due prodotti ma sufficienti per una analisi di base. DebugBar occupa due zone del browser: in alto, sotto i menu, viene visualizzata una tradizionale barra degli strumenti, mentre un pannello laterale ospita, suddivise in schede, le finestre dedicate alla visualizzazione o gestione dei dati. La scheda principale è quella dedicata al DOM: in una struttura ad albero vengono mostrati tutti gli elementi della pagina e i loro attributi (Figura 5).

Figura 5 - La DebugBar fornisce sia l'analisi della pagina sia l'analisi del traffico HTTP. È gratuito per uso commerciale

Gli elementi possono essere evidenziati o agendo sull'albero del DOM oppure trascinando una specie di puntatore sull'elemento visualizzato nella pagina. Ogni elemento può essere poi modificato negli attributi, comprese le classi CSS, i percorsi dei link, le dimensioni delle immagini e visualizzare le modifiche in tempo reale sulla pagina. La scheda HTTPS offre invece tutte le comunicazioni HTTP intervenute in quella pagina e i cookie incontrati e salvati dal browser (Figura 6).

Figura 6 - In DebugBar è presente un elegante visualizzatore di codice HTML, sicuramente più funzionale di Blocco Note! 

Comoda la finestra di ispezione degli script in cui compare un elenco di tutte le funzioni JavaScript incontrate nella pagina che possono essere copiate in una console JavaScript ed eseguite al fine di verificarne errori o imperfezioni di programmazione. Un'ultima scheda consente infine di eseguire, attraverso l'applicazione gratuita HTML Tidy sviluppata dal W3C, un controllo di validità della pagina Web con gli standard HTML. Non mancano strumenti inclusi anche nelle applicazioni precedenti: un color picker per ricavare i dati RGB o esadecimali di qualsiasi colore presente nella pagina e un ridimensionatore della finestra. In più troviamo invece uno strumento per eseguire uno screenshot della pagina e inviarlo per e-mail, un modulo per la ricerca su Google e un modulo per evidenziare al volo un testo all'interno della pagina. Il programma, per cui è disponibile anche un file (.lang) di traduzione in italiano, si può scaricare da qui.

WEB DEVELOPMENT HELPER
Per chi sviluppa utilizzando ASP.Net e molta programmazione in Ajax potrà sicuramente trovare nel Web Development Helper uno strumento di grande utilità. Si tratta sempre di un add-on per Internet Explorer che viene visualizzato come un pannello nella zona inferiore del browser e viene attivato dal menu Strumenti (Figura 7).

Figura 7 - Web Development Helper è un valido aiutante per chi sviluppa siti Web utilizzando Ajax o ASP.Net

I componenti principali sono quattro: un debugger di script JavaScript e uno per ASP.Net, un sistema per tracciare le comunicazioni HTTP e uno strumento per la gestione del codice HTML. Gli ultimi due sono molto simili a quelli visti nelle applicazioni descritte sopra: il primo visualizza il traffico HTTP tra il browser e il sito, il secondo mostra la solita visualizzazione ad albero del DOM del documento con possibilità di filtrare elementi XHTML o fogli di stile. Nuovi sono invece gli strumenti per ASP.Net che permettono di visualizzare tutti i dati gestiti dagli script e tracciare le richieste o le informazioni nascoste nelle pagine. Lo strumento funziona solo su applicazioni salvate in locale e per attivarlo è necessario inserire negli script una porzione di codice ASP.Net. Lo Scripting Tools è invece dedicato alla diagnostica e al debug di script JavaScript. Per mezzo di una console integrata si possono provare script sulla pagina visualizzata per avere immediatamente il risultato di un'istruzione senza dover per forza salvare e ricaricare sempre lo stesso documento. Si scarica da qui.

FIDDLER HTTP DEBUGGER
Chi fosse interessato solamente a un filtro delle connessioni HTTP dovrebbe scegliere Fiddler, un software indipendente - ma installato anche come add-on per Explorer - che filtra ogni singolo pacchetto transitato da qualsiasi browser ai siti visitati e ne filtra i molti dettagli visualizzandoli in un comodo pannello di analisi. I dati analizzati da Fiddler sono moltissimi e permettono di eseguire decine di funzioni diverse. In primo luogo consentono di monitorare le performance del sito: per ogni documento, immagine, script scaricato il programma mostra il tempo di caricamento impiegato rendendo semplice capire quale file o quale elemento esterno ritarda la visualizzazione della pagina. Nella scheda Session Inspector sono invece presenti diverse tipologie di analisi del traffico HTTP: selezionando una sessione dal pannello di sinistra possono essere estratti dati che mostrano le impostazioni di compressione delle transazioni, tutte le intestazioni inviate dal server e così via (Figura 8).

Figura 8 - Con Fiddler è semplice visualizzare quali sezioni del sito che impegnano di più la connessione dell'utente

Molto utile la funzione Request Builder con la quale eseguire sessioni personalizzate attraverso metodi POST, GET, MOVE e così via. Tutti i dati raccolti da Fiddler possono essere salvati in formato testuale o direttamente all'interno di un archivio ZIP. Tra le opzioni di salvataggio vi è anche il formato Visual Studio Web Test, utile per eseguire test delle applicazioni all'interno di Visual Studio di Microsoft. L'homepage del programma è qui.

BARRA DELL'ACCESSIBILITÀ 2.0
Si tratta di una classica barra per Explorer che raccoglie diversi strumenti per il controllo dell'accessibilità di una pagina Web (Figura 9).

Figura 9 - La Barra dell'accessibilità contiene tutte gli strumenti per controllare la conformità delle pagine alle regole di accessibilità 

La barra, oltre a diversi validatori per analizzare la leggibilità di una pagina, la sua velocità di esecuzione e così via, include funzioni di controllo dei fogli di stile e delle immagini, del colore e della struttura di un documento, tutto naturalmente focalizzato sull'accessibilità. È possibile così mostrare la pagina simulando diversi ambienti di visualizzazione, evidenziare le tabelle per verificare se comportino problemi di leggibilità, visualizzare tutti gli elementi nascosti artificiosamente dai CSS, trasformare i colori del documento in scala di grigi, far risalare l'uso di indici di tabelle, tasti di accesso rapido, acronimi e così via. Dal menu Informazioni si possono inoltre eseguire diverse analisi della pagina visualizzata o produrre utili rapporti: numero di script o applet inclusi, numero dei link costruiti con Java- Script, eventuale presenza di file multimediali o file da scaricare. È presente un pulsante per ridimensionare la pagina secondo dimensioni predefinite o personalizzate e due comodi bottoni per aprire le pagine visualizzate in Firefox e Opera, se presenti sul sistema. La barra si scarica dall'area Validatori di webaccessibile.