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.

Un altro aspetto molto importante degli Strumenti di sviluppo F12 sta nel poter analizzare la pagina simulando la sua visualizzazione con diverse versioni di Internet Explorer. I non addetti ai lavori forse non sapranno che le pagine internet, secondo il modo in cui sono “scritte” (in termini di codice, ovviamente), sono interpretate e visualizzate in modi diversi dai tanti browser. Il lavoro degli sviluppatori, oggigiorno, è molto complicato rispetto al passato dovendo questi ultimi realizzare delle pagine che siano correttamente interpretate e visualizzate dai diversi tipi di browser e dalle loro tante versioni più o meno recenti. Così, Microsoft ha reso disponibile negli Strumenti di sviluppo F12 di Internet Explorer 10 anche la Modalità browser (la cui finestra a tendina è attiva nell’immagine) grazie alla quale gli sviluppatori possono simulare l’uso della pagina da loro stessi creata non solo con il nuovo IE10, ma anche con versioni meno recenti come IE9, IE8 e IE7 per offrire un prodotto finale (cioè la pagina web) che sia correttamente fruibile anche da quegli utenti che navigano la Rete con hardware e software non di ultimissima generazione.

Altra importante funzionalità di cui uno sviluppatore non può fare a meno è il debug del codice che consiste nella ricerca automatizzata di possibili errori all’interno del codice stesso. Nel caso particolare parliamo di script realizzati in JavaScript di cui le pagine web odierne sono particolarmente ricche. Gli script sono dei programmi di complessità piuttosto bassa atti a svolgere dei compiti ben definiti. Spesso questo termine è associato al linguaggio JavaScript con cui si realizzano gli script integrati nelle pagine Web. Dopo questa breve digressione destinata ai profani dello sviluppo Web, apparirà subito chiaro la necessità di uno strumento come il debug. Un semplice errore di battitura sulla tastiera, ad esempio, potrebbe portare a un cattivo o addirittura a un mancato funzionamento di uno script il cui comportamento potrebbe ripercuotersi a cascata sulla pagina web inficiando tutto il lavoro dello sviluppatore. Invece, in Internet Explorer 10, semplicemente attivando gli Strumenti di sviluppo F12 e poi usando nel tab Script il pulsante Avvia debug (indicato nel riquadro rosso nell’immagine), è possibile usufruire di un controllo veloce e approfondito del codice per evitare che questo presenti errori.

Proprio perché Internet Explorer è orientato anche al nuovo HTML5, gli ingegneri di Microsoft non hanno dimenticato di fornire agli sviluppatori uno strumento di debug dedicato ai Web Worker di HTML5. “Carneadi” per i profani, i Web Worker sono set di API (Application Programming Interface, in italiano Interfaccia di Programmazione di un'Applicazione) che permettono l’esecuzione del codice JavaScript in modo asincrono rispetto all’interfaccia grafica visibile all’utente. Così lo stesso codice JavaScript è svolto in un processo diverso rispetto a quello del resto dell’interfaccia utente limitando la possibilità di “freeze” (dei temporanei blocchi) del browser. Gli sviluppatori, potendo quindi eseguire il debug anche per i Web Worker, hanno la possibilità di limitare il più possibile, rendendoli quasi nulli, tutti i problemi di caricamento o visualizzazione degli elementi all’interno del browser.

Un piccolo appunto, poi, per chi sviluppatore non è. Quanto fin qui indicato non è utile solo dopo che una pagina Web è ormai online (come quella usata per gli esempi), ma soprattutto prima che questa lo sia. Gli sviluppatori, infatti, possono lavorare direttamente in locale sui loro PC e simulare il comportamento delle pagine come quando queste saranno nella Rete. In questo modo per gli utenti sarà possibile fruire fin da subito di pagine realizzate alla perfezione dopo tanto duro lavoro.

È chiaro: gli Strumenti di sviluppo F12 sono davvero indispensabili per tutti gli sviluppatori e, quello fin qui dato, è solo un assaggio delle loro potenzialità. Perché aspettare, allora? Se ancora non siete passati al nuovo Windows 8 o Windows RT, scaricate il nuovo Internet Explorer 10 per Windows 7 e iniziate subito a sviluppare con la certezza di un valido supporto al vostro lavoro.

Il Team di Windows