Con questa piccola guida ci vogliamo rivolgere soprattutto agli sviluppatori meno esperti, che forse si affacciano per la prima volta all'utilizzo degli strumenti a loro dedicati dal Team di Google Chrome o, se l'hanno già fatto in passato, non vi hanno visto l'utilità che hanno in realtà. Allo stesso tempo, però, speriamo che possa tornare utile anche per gli sviluppatori più esperti, che magari non si erano resi conto di qualche particolare. In ogni caso, ciò che vogliamo è aiutare coloro che ci seguono a migliorare pagine web e web apps.
Chrome Developer Tools: cosa sono?
È giusto iniziare spiegando cosa sono questi strumenti per sviluppatori di Google Chrome e vi assicuro che ci metteremo poco a spiegarlo.
I Developer Tools sono un progetto fortemente basato su WebKit Web Inspector, una parte del progetto open source WebKit, che permette agli utenti (principalmente sviluppatori) di visualizzare il codice sorgente delle pagine web, la gerarchia DOM e tante altre cose utili ed interessanti.
Dato che abbiamo detto che dopotutto i Developer Tools non si discostano molto dal WebKit Web Inspector, avrete ben capito che il fine di questi strumenti è di permettere agli utenti di scavare in "ciò che non si vede" dei siti e delle applicazioni web.
Come accedere ai Developer Tools
Per accedere agli strumenti per sviluppatori ci sono diversi modi, alcuni più rapidi, altri più intuitivi.
- Accedere al menù dall'icona a forma di chiave a destra della barra degli indirizzi, poi selezionare Strumenti -> Strumenti per sviluppatori;
- Cliccare con il tasto destro del mouse nell'elemento desiderato e selezionare Ispeziona elemento;
- Utilizzare le seguenti scorciatoie:
Ctrl + Shift + I (Mac: Cmd + Option + I) per aprire gli strumenti per sviluppatori,
Ctrl + Shift + J (Mac: Cmd + Option + J) per accedere direttamente alla console,
Ctrl + Shift + C (Mac: Cmd + Option + C) per attivare la modalità Ispeziona elemento
I Developer Tools sono presenti in tutte le versioni di Chrome, ma per utilizzare la versione più aggiornata è necessario installare il canale dev.
Come sono strutturati
I Developer Tools sono suddivisi in diverse sezioni rappresentate dalle icone presenti nella parte superiore della finestra dedicata e corrispondenti a specifici tipi di informazioni che questi strumenti forniscono, tra cui elementi DOM, script e risorse, solo per citarne alcuni. A questi si aggiunge una barra di ricerca che permette di trovare rapidamente gli elementi desiderati all'interno del pannello attivo.
Per navigare attraverso i pannelli è possibile utilizzare delle scorciatoie:
- Ctrl + ' (Mac: Cmd + ') per passare al pannello successivo;
- Ctrl + ì (Mac: Cmd + ì) per passare al pannello precedente.
Vediamo ora le caratteristiche dei singoli pannelli:
- Elements: tramite questo pannello è possibile vedere la pagina come il browser, nelle righe HTML e CSS e nel DOM, con la possibilità di modificare tutti questi elementi in tempo reale;
- Resources: da qui è possible visualizzare tutte le risorse caricate e disponibili nella pagina ispezionata, dalle immagini agli script, ai cookies;
- Network: questo pannello è utile per tenere sotto controllo i tempi di caricamento delle pagine, in quanto permette di vedere tutte le richieste fatte al server, il loro tempo di esecuzione e la banda richiesta;
- Scripts: qui sono visualizzati tutti gli script caricati nella pagina, arricchiti da un debugger e dalla possibilità di modificarli in tempo reale;
- Timeline: non è quella di Facebook, ma è uno strumento che permette di analizzare più nel dettaglio i tempi di caricamento dei diversi elementi della pagina;
- Profiles: questo pannello permette di visualizzare nello specifico le performance degli script JavaScript, cioè i tempi impiegati da ogni singola funzione, per capire meglio dove intervenire;
- Audits: questo strumento analizza il caricamento della pagina e mostra alcuni suggerimenti su come migliorarla;
- Console: permette di interagire con la pagina tramite del codice JavaScript.
Queste sono le nozioni di base che vi permetteranno di utilizzare tutti gli strumenti che i Developer Tools mettono a vostra disposizione. Buono sviluppo!
Via | Google Developers
Nessun commento:
Posta un commento