In ambito di progettazione web, negli ultimi anni, abbiamo assistito, ad un rapido diffondersi dei cosiddetti “Strumenti per Sviluppatori”. Prima Chrome li ha adottati di default, poi, sulla stessa strada, hanno proseguito anche tutti i principali browser.

È giusto iniziare, dunque, spiegando cosa sono gli strumenti per sviluppatori di Google Chrome e a che cosa servono.

Gli Strumenti per Sviluppatori o Developer Tools sono un progetto fortemente basato su WebKit Web Inspector, una parte del progetto open source WebKit, che permette agli utenti di visualizzare il codice sorgente delle pagine web, la gerarchia DOM e tante altre cose utili ed interessanti. Il fine di questi strumenti è quindi quello di permettere agli utenti di scavare in “ciò che non si vede” dei siti e delle applicazioni web.

Oggi tanto Chrome quanto Safari, Firefox o Explorer, mettono a disposizione dell’utente senza il bisogno di ricorrere ad estensioni aggiuntive, questo tipo di strumenti, che si rivelano essere effettivamente molto utili in tutte le fasi della realizzazione di un sito web dalla progettazione, allo sviluppo, alla risoluzione di problemi, fino ad arrivare al mantenimento e all’aggiornamento dei contenuti.

Il termine “Sviluppatori” non deve incutere timore. Anche gli utenti “non sviluppatori” infatti possono trarre grande beneficio dall’utilizzo di questi strumenti; grazie ad essi è possibile, ad esempio:

• visualizzare il codice HTML corrispondente ad uno specifico elemento presente all’interno della pagina web
• ottenere una panoramica delle proprietà CSS presenti all’interno della pagina web e di come queste proprietà vengono applicate ai vari elementi
• modificare le proprietà CSS in tempo reale visualizzando immediatamente i risultati ottenuti senza dover intervenire direttamente sul codice della pagina
• aggiungere, in tempo reale, nuovi elmetti HTML e/o nascondere ed eliminare elementi già presenti all’interno della pagina visualizzando immediatamente il risultato ottenuto ancora una volta senza dover intervenire direttamente sul codice della pagina
• …

Per gli utenti più esperti poi gli strumenti per sviluppatori possono rivelarsi estremamente utili anche in altre situazioni. Grazie ad essi è infatti possibile anche

• visualizzare le richieste HTTP effettuate dal browser
• eseguire codice javascript all’interno del contesto della pagina
• effettuare il debug di codice javascript
• verificare e migliorare le prestazione del sito individuando eventuali colli di bottiglia
• verificare come il proprio sito verrà visualizzato all’interno di un dispositivo mobile
• …

In questa piccola guida focalizzeremo la nostra attenzione sugli Strumenti per Sviluppatori messi a disposizione da Google Chrome (i concetti di base potranno comunque essere applicati anche agli strumenti per sviluppatori messi a disposizione anche dagli altri browser) e ci rivolgeremo, principalmente, agli utenti meno esperti che, forse, si avventurano per la prima volta nell’utilizzo di questi strumenti.

Verrà fatta una panoramica su quelle che sono le features più popolari e più utili messe a disposizione dai Chrome Developer Tool e vedremo come queste funzionalità possano tornarci utili nella realizzazione di un sito Passweb.

Non verranno invece esaminate nel dettaglio funzionalità orientate in maniera più specifica a programmatori web con una certa esperienza, come ad esempio il debugging del codice javascript o l’utilizzo degli strumenti per la profilazione e l’analisi delle performance del codice.