Chi sviluppa siti Web deve poter controllare esattamente la resa delle pagine all’interno di un browser. Per analizzare i documenti visualizzati e gestire gli eventuali errori è necessario avere uno strumento adatto. Per Internet Explorer questo strumento si chiama Internet Explorer Developer Toolbar. Vediamo come funziona e cosa offre.

L’attivazione

Dopo l'installazione il software viene visualizzato come un pannello nella zona inferiore di Internet Explorer ed è attivato o attraverso il pulsante nella barra del browser o attraverso una nuova voce raggiungibile dal menu Visualizza, che in Explorer 7 si può attivare premendo il tasto ALT della tastiera. Cliccando sul pulsante Unpin la toolbar diventa una comoda finestra non più integrata all'interno del browser.

L’interfaccia

La Developer toolbar è divisa in tre pannelli: a sinistra abbiamo l'albero del DOM del documento caricato in quel momento in Explorer in cui sono visibili tutti gli elementi usati nella pagina. Al centro gli attributi di ogni elemento selezionato, mentre a destra tutti gli stili ad esso associati.

Selezionare elementi singoli

I singoli elementi possono essere selezionati o scorrendo l'albero visualizzato nel pannello di sinistra o, in modo molto più veloce, selezionando al voce Select Element by Click e usando il mouse per puntare ciò che ci interessa. La selezione sarà evidenziata sul documento da una cornice blu lampeggiante.

Evidenziare tutti gli elementi

Il menu Outline permette di evidenziare gli stessi elementi con un solo clic del mouse. E' possibile personalizzare i colori di ogni elemento o aggiungerne di nuovi usando la finestra Outline Elements. Si possono evidenziare elementi accomunati del medesimo posizionamento: fisso, relativo, assoluto e flottante.

CSS e altre informazioni

Dal menu Disable è possibile disabilitare al volo script e fogli di stile, mentre il menu View viene utilizzato per visualizzare direttamente sul documento diverse informazioni: il percorso dei collegamenti, i nomi delle classi e degli Id associati agli elementi, eventuali tasti di accesso rapido. Comoda la funzione CSS Selector Matches con cui viene visualizzato il numero di volte che una regola CSS è utilizzata nel documento, un processo che consente di eliminare eventuali regole superflue.

Le immagini, i cookie e la cache

Non mancano gli strumenti per gestire tutte le informazioni sulle immagini o per disabilitarne temporaneamente la visualizzazione. Dal menu Cache si può disabilitare o ripulire la cache del browser oppure gestire i Cookie salvati dal dominio visitato. Tra gli strumenti extra troviamo un ridimensionatore automatico della finestra e un righello per misurare in pixel parti della pagina.

La validazione

Buona la disponibilità degli strumenti di validazione. Codice XHTML, fogli di stile e collegamenti vengono validati grazie agli strumenti del W3C. Per i feed viene utilizzato Feed validator, mentre gli strumenti di HiSoftware verificano l'accessibilità delle pagine. Con un clic è inoltre possibile validare tutti i contenuti in una volta sola.

La versione definitiva dell’add-on si scarica partendo dall’area Download del sito di Microsoft. è un software gratuito per tutti i recenti Windows, compreso Vista, che funziona sia su Explorer 7 sia su Explorer 6. Unica pecca: è disponibile al momento solo in lingua inglese.

La IE Developer Toolbar è uno strumento indispensabile per chi sviluppa siti con Internet Explorer. è facile da usare e molto intuitiva. è meno completa della Developer Toolbar di Firefox, ma offre comunque un valido aiuto di sviluppo su quello che è al momento il browser più usato sul Web.