Gli strumenti di sviluppo del browser consentono di velocizzare lo sviluppo, il test e il debug delle pagine web. Sono disponibili nei browser più diffusi anche se con funzionalità diverse.

Visualizzare gli strumenti di sviluppo

Gli strumenti di sviluppo possono essere visualizzati premendo uno o più tasti:

  • F12: Internet Explorer, Googe Chrome, Mozilla Firefox
  • CTRL + MAIUSC + I: Opera, Google Chrome
  • CTRL + ALT + I: Safari
In Safari può essere necessario prima visualizzare il menu Sviluppo (Modifica > Preferenze > Avanzate > Selezionare la voce Mostra menu Sviluppo nella barra dei menu) e poi premere i tasti indicati.

Nella schermata principale degli strumenti di sviluppo, si può esplorare il DOM di un documento, selezionare un nodo (nella parte sinistra della finestra) e poi visualizzarne le proprietà css (nella parte destra della finestra).

Strumenti di sviluppo: esplorare il DOM

Strumenti di sviluppo: esplorare il DOM

Un altro modo per visualizzare gli strumenti di sviluppo, in tutti i browser, consiste nel fare clic destro su un elemento della pagina e selezionare, nel menu contestuale, la voce Ispeziona elemento (oppure Analizza elemento o Esamina elemento).

Le funzioni principali

Si può accedere alle altre funzioni mediante i comandi presenti nella parte superiore della finestra.

Strumenti di sviluppo: gli strumenti principali

Strumenti di sviluppo: gli strumenti principali

Tra gli strumenti disponibili, i più utili sono:

  • Network: mostra i tempi di caricamento di ciascuna risorsa presente nella pagina (fogli di stile, file javascript, immagini, …)
  • Resources: visualizza i contenuti di un documento (immagini, font, script, figli di stile) e i dati di alcune API come: WEB SQL, Local Storage, Session Storage, Cookies e Application Cache
  • Console: visualizza eventuali errori o avvertimenti relativi a javascript

Informazioni più dettagliate sulle varie funzioni possono essere trovate nei siti dedicati agli sviluppatori di ciascun browser.

L’emulazione dei dispositivi mobili

Gli strumenti di sviluppo di alcuni browser consentono di emulare altri browser, in particolare quelli dei dispositivi mobili.

Google Chrome

Le ultime versioni di Google Chrome consentono di emulare dispositivi mobili. Per attivare l’emulazione fare clic sulla voce Emulation che si trova nella parte inferiore sinistra della finestra.

Strumenti di sviluppo: attivare l'emulazione in Google Chrome

Strumenti di sviluppo: attivare l’emulazione in Google Chrome

Nella schermata Emulation è possibile scegliere il dispositivo, la risoluzione dello schermo, la stringa dello User Agent e abilitare alcuni sensori.

Strumenti di sviluppo: emulazione di altri dispositivi

Strumenti di sviluppo: emulazione di altri dispositivi

In genere è necessario ricaricare la pagina per visualizzarla correttamente.

Mozilla Firefox

Anche Mozilla Firefox consente di visualizzare un documento simulando un dispositivo mobile.

Strumenti di sviluppo: la visualizzazione flessibile in Mozilla Firefox

Strumenti di sviluppo: la visualizzazione flessibile in Mozilla Firefox

Per attivare la visualizzazione flessibile di Mozilla Firefox selezionare il comando presente nella parte superiore destra degli strumenti per gli sviluppatori (in blu nell’immagine).

Internet Explorer

Internet Explorer consente di emulare le versioni precedenti del browser (Document mode) e la versione mobile (Browser profile).

Strumenti di sviluppo: gli strumenti di emulazione in Internet Explorer

Strumenti di sviluppo: gli strumenti di emulazione in Internet Explorer