Internet Explorer 10: veloce, fluido e perfetto anche per gli specialisti del Web

Dal momento della sua comparsa fino ad oggi, Internet Explorer non ha mai smesso di evolversi e migliorarsi grazie al costante lavoro degli ingegneri di Microsoft. Così, con la versione 10, è diventato il browser “fast and fluid” che tutti ormai conosciamo; ma IE10 non è il browser giusto solo per i comuni navigatori della rete, ma anche per gli sviluppatori del Web.

In Internet Explorer 10, infatti, sono inclusi gli Strumenti di sviluppo F12 (il nome deriva dal tasto scorciatoia di attivazione della funzionalità), un potente mezzo con cui esplorare il codice di cui le pagine internet sono composte. Anche di quelle realizzate con i nuovi HTML5 e CSS3. Usare questa funzionalità è semplicissimo. Dall’icona delle impostazioni di IE10, l’ingranaggio in alto a destra nella finestra della versione desktop del browser, basta scegliere, appunto, la voce Strumenti di sviluppo F12 mostrata nell’immagine. Questa funzionalità può essere usata solo nella versione desktop del browser, quindi, qualora ci si trovi in Internet Explorer 10 versione app della schermata Start, è necessario usare il pulsante Strumenti pagina (la chiave inglese alla destra della barra degli indirizzi), e scegliere la voce Visualizza sul desktop

L’attivazione degli Strumenti di sviluppo F12 è visibile con la comparsa in basso alla pagina di una barra dei menu ad essi dedicata. Da questa barra possono essere aperti tali strumenti all’interno della stessa pagina internet, o in una finestra separata tramite gli appositi pulsanti nella parte destra della barra. Ovviamente questi strumenti possono anche essere richiusi semplicemente premendo il pulsante “X” sempre sulla destra della barra. Per comodità, scegliamo di usare la visualizzazione all’interno della stessa pagina di prova che, come vedete, è proprio quella del blog di Windows per l’Italia

L’immagine mostra come si presentano gli Strumenti di sviluppo F12 all’interno della stessa pagina da analizzare. La scheda che subito si apre è quella HTML nella quale è possibile esplorare la struttura del DOM (Document Object Model), cioè la rappresentazione della pagina Web in analisi strutturata come modello orientato agli oggetti. Nella parte sinistra della finestra sono presenti gli elementi della struttura ad albero del DOM, mentre nella parte destra, dopo aver selezionato uno degli elementi della stessa parte sinistra, sono analizzabili i dettagli dell’elemento selezionato (ad esempio margini, padding, attributi HTML, regole CSS, ecc.). La particolarità di Internet Explorer è di correggere eventuali errori di sintassi presenti nella pagina, quindi tutto ciò che la finestra mostra rappresenta la versione interpretata e corretta del codice di cui la pagina Web è composta.

Ispezionare e analizzare contenuti e codice della pagina è molto semplice, oltre che veloce. Tramite il campo di ricerca (riquadro rosso sulla destra dell’immagine) si può scegliere di chiedere agli Strumenti di sviluppo F12 di trovare tutte le occorrenze di una ricerca (evidenziandole, come mostra l’immagine). Nell’immagine, ad esempio, abbiamo cercato tutti i “div” (tag del metalinguaggio HTML che identifica dei contenitori generici del documento) contenuti nella pagina web analizzata. Un’altra soluzione per l’analisi della pagina stessa è l’uso dello strumento Seleziona elemento con un click, l’icona a forma di puntatore indicata con un riquadro rosso nella parte sinistra dell’immagine. Con questo strumento possiamo cliccare su un qualsiasi punto della pagina web per vedere riportato nelle finestre sottostanti il relativo codice.