Introduzione
Google Chrome è un browser web completo e potente, che offre le ultime novità per le applicazioni sul web. Google si è impegnata a offrire agli utenti finali un'esperienza di navigazione molto veloce, molto stabile e ricca di funzionalità. Google si è anche assicurata che gli sviluppatori come te possano usufruire di un'esperienza eccezionale con Chrome. Gli Strumenti per sviluppatori, inclusi e disponibili in Chrome e Safari, consentono a programmatori e sviluppatori del web di accedere in modo approfondito alle funzionalità interne del browser e delle applicazioni web.
Gli Strumenti per sviluppatori fanno parte del progetto open source Webkit. La maggior parte della discussione in questo articolo si applica sia a Google Chrome sia a Safari. Tuttavia, gli screenshot sono stati acquisiti utilizzando Google Chrome 6, pertanto potrebbero esserci lievi differenze nel tuo browser.
In questo articolo, daremo un'occhiata generale a Strumenti per gli sviluppatori e ne evidenzieremo le funzionalità più apprezzate e utili. Il nostro pubblico di destinazione è composto da sviluppatori web che non conoscevano o non hanno ancora esaminato gli Strumenti per sviluppatori. Tuttavia, siamo sicuri che anche se sei uno sviluppatore web esperto, troverai un paio di suggerimenti utili.
Se la tua istanza di Strumenti per gli sviluppatori non corrisponde esattamente agli screenshot trovati in questo articolo, ti consigliamo di eseguire l'upgrade alla versione 5 per poter seguire la procedura e accedere a tutte le funzionalità descritte qui.
Panoramica
In totale, sono disponibili otto gruppi principali di strumenti in Strumenti per sviluppatori e le funzionalità vengono estese con ogni release. Chrome 5 ora offre Elementi, Risorse, Scenari, Spostamenti, Profili, Spazio di archiviazione, Controlli e Console.
Elementi
Lo strumento Elementi ti consente di vedere la pagina web così come la vede il browser. In altre parole, con lo strumento Elementi puoi visualizzare il codice HTML e CSS non elaborato, il Document Object Model e modificarli in tempo reale.
Risorse
Utilizza lo strumento Risorse per scoprire quali componenti la tua pagina web o applicazione richiede ai server web, il tempo necessario per queste richieste e la quantità di larghezza di banda richiesta. Puoi anche visualizzare le intestazioni delle richieste e delle risposte HTTP per ciascuna delle tue risorse. Lo strumento Risorse è perfetto per aiutarti ad accelerare i tempi di caricamento delle pagine.
Script
Per esaminare il codice JavaScript di una pagina, utilizza lo strumento Script. Qui puoi trovare un elenco degli script richiesti dalla pagina, oltre a un debugger di script completo. Puoi persino modificare il codice JavaScript in tempo reale.
Cronologia
Per un'analisi avanzata di tempi e velocità, lo strumento Spostamenti offre una visibilità approfondita delle varie attività dietro le quinte di Chrome. Puoi scoprire il tempo necessario al browser per gestire gli eventi DOM, eseguire il rendering dei layout delle pagine e dipingere la finestra.
Profili
Lo strumento Profili ti aiuta a acquisire e analizzare il rendimento degli script JavaScript. Ad esempio, puoi scoprire quali funzioni richiedono più tempo per l'esecuzione e concentrarti esattamente su dove eseguire l'ottimizzazione.
Archiviazione
Le applicazioni web moderne richiedono una maggiore persistenza rispetto ai cookie e lo strumento Spazio di archiviazione ti aiuta a monitorare, eseguire query e eseguire il debug dello spazio di archiviazione del browser locale. Questo strumento può visualizzare ed eseguire query sui dati archiviati in database locali, nello spazio di archiviazione locale, nella memoria di sessione e nei cookie.
Controllo
Lo strumento di controllo è come avere un consulente per l'ottimizzazione web sempre a disposizione. Questo strumento può analizzare una pagina durante il caricamento e fornire suggerimenti e ottimizzazioni per ridurre il relativo tempo di caricamento e aumentare la velocità di risposta percepita (e reale).
Console
Infine, ma non per importanza, gli Strumenti per gli sviluppatori offrono una console completa. Dalla console, puoi inserire codice JavaScript arbitrario e interagire con la pagina in modo programmatico.
Avvio
È facile avviare gli Strumenti per sviluppatori in Chrome.
Per qualsiasi sistema operativo, puoi semplicemente fare clic con il tasto destro del mouse su un elemento qualsiasi della pagina e selezionare l'opzione "Ispeziona elemento" dal menu contestuale. Si apriranno gli Strumenti per sviluppatori e verrà visualizzato l'elemento su cui hai fatto clic.
Per vedere come funziona, visita la pagina http://www.google.com nel browser Chrome. Fai clic con il tasto destro del mouse sul logo di Google e vedrai le seguenti opzioni:
Se selezioni "Ispeziona elemento", vengono visualizzati gli Strumenti per sviluppatori, che dovrebbero avere il seguente aspetto:
Notare come gli Strumenti per gli sviluppatori si siano aperti all'interno della scheda Elementi e abbiano eseguito automaticamente un'esplorazione dettagliata del tag <img> per il logo di Google e lo abbiano evidenziato. Questa funzionalità è molto utile se vuoi sapere quale codice HTML ha generato un determinato elemento della pagina.
Puoi anche aprire gli Strumenti per sviluppatori con una semplice scorciatoia da tastiera. A seconda del sistema operativo, prova quanto segue:
- Su Windows e Linux, seleziona i tasti
Control-Shift-J. - Su Mac, seleziona i tasti
Command-Option-J.
Infine, puoi scegliere di aprire gli strumenti dal menu principale del browser.
Su un Mac, seleziona Visualizza, Sviluppatore e Strumenti per sviluppatori dalla barra dei menu dell'applicazione principale.
Su un PC Windows, devi utilizzare il menu Pagina in alto a destra e selezionare Sviluppatore, Strumenti per sviluppatori.
Ora che hai aperto e configurato gli Strumenti per sviluppatori, iniziamo a esplorare gli elementi della home page di Google.
Elementi
La prima scheda in Strumenti per sviluppatori è Elementi. Questa è la tua finestra sulla struttura della pagina web, presentata come la vede il browser.
Esplorazione del DOM
Dovrai spesso visitare le schede Elementi quando devi identificare lo snippet HTML per alcuni aspetti della pagina. Ad esempio, potresti chiederti se un'immagine ha un attributo ID HTML e qual è il valore di quell'attributo.
A volte la scheda Elementi è un modo migliore per "visualizzare il codice sorgente" di una pagina. Nella scheda Elementi, il DOM della pagina sarà ben formattato e mostrerà facilmente gli elementi HTML, la loro ascendenza e i relativi discendenti. Troppo spesso le pagine che visiti hanno codice HTML minimizzato o semplicemente brutto, il che rende difficile capire come è strutturata la pagina. La scheda Elementi è la soluzione per visualizzare la struttura di base reale della pagina.
Ad esempio, di seguito è riportato l'output di "Visualizza sorgente" della home page di Google.
È difficile leggere il codice sorgente riportato sopra perché è ottimizzato e minimizzato. Il formato è buono per client e server, ma difficile per gli sviluppatori.
Quando vuoi leggere il codice sorgente di una pagina, utilizza la scheda Elementi per visualizzare una gerarchia di elementi con la sintassi evidenziata e una stampa corretta.
La scheda Elementi ti consente inoltre di sfogliare, interagire e, a volte, anche modificare gli stili, le metriche, le proprietà e gli ascoltatori di eventi di qualsiasi elemento della pagina.
Sfogliare gli stili
La natura gerarchica del CSS rende molto utile il browser Stili nella scheda Elementi. A volte gli stili si chiudono su se stessi e vengono visualizzate immagini indesiderate. Sapere quale regola di stile viene applicata dall'elemento al browser ti aiuta a eseguire il debug di questo problema.
Se fai clic su un elemento nella scheda Elementi, vengono visualizzati tutti gli stili associati a quell'elemento.
Nello screenshot qui sopra puoi vedere che siamo in grado di indicare tutti gli attributi di stile applicati. Ad esempio, il padding proviene direttamente dall'attributo style dell'elemento <img>. La larghezza e l'altezza, invece, provengono dai rispettivi attributi nativi. È interessante notare che esistono stili ereditati anche dal tag <center>, dal tag <body> e da altri.
È molto utile vedere i singoli stili e la loro origine, ma è anche molto utile vedere l'insieme finale di stili dopo che sono stati calcolati e applicati all'elemento. Puoi vedere il prodotto finale selezionando il menu Stile calcolato, come mostrato nello screenshot di seguito.
Successivamente, daremo un breve sguardo alle altre funzionalità fornite dalla scheda Elementi. In articoli futuri tratteremo più in dettaglio i seguenti argomenti.
Modello Box
Puoi vedere il modello di casella applicato all'elemento selezionato selezionando il menu Metriche:
Proprietà elemento
Puoi visualizzare tutte le proprietà dell'elemento, come le vedrebbero JavaScript e il DOM, selezionando il menu Proprietà:
Listener di eventi
Infine, puoi anche vedere gli ascoltatori di eventi associati all'elemento o che vengono visualizzati tramite l'elemento tramite il menu Event Listeners:
Riepilogo
La scheda Elementi offre molte funzionalità e nei prossimi articoli approfondiremo i singoli menu.
Devi utilizzare la scheda Elementi quando vuoi vedere l'aspetto della pagina per il browser stesso. Problemi comuni come "come viene calcolato questo stile?" o "quali tag HTML hanno generato questo componente?" trovano una risposta rapida e semplice nella scheda Elementi.
La scheda Elementi è un po' come "Visualizza sorgente", ma molto più completa, e ti consente di avere una visibilità molto precisa della tua pagina.
Dopo aver esaminato la pagina, potresti chiederti come sono arrivati HTML, CSS e le immagini. La scheda Risorse, descritta di seguito, mostra come il browser client e il server web comunicano per inviare queste risorse.
Risorse
Una volta che l'applicazione è in funzione, il passaggio successivo dovrebbe essere l'ottimizzazione del rendimento della rete e della larghezza di banda. Devi cercare di rendere il trasferimento della tua applicazione dal server al client il più rapido ed efficiente possibile. I tuoi utenti ti ringrazieranno per i caricamenti rapidi delle pagine, risparmierai denaro in termini di larghezza di banda e risorse del server e otterrai anche un punteggio migliore nei ranking dei risultati di ricerca di Google (che ora prendono in considerazione la velocità del sito).
La scheda Risorse in Strumenti per sviluppatori ti consente di visualizzare la comunicazione tra il server web e il browser client. Puoi vedere tutte le risorse richieste dal browser (sempre molto sorprendente), il tempo necessario per riceverle dal server e la quantità di larghezza di banda utilizzata durante il trasferimento.
Ironia della sorte, l'esecuzione della scheda Risorse influisce sulle prestazioni di caricamento della pagina, pertanto è disattivata per impostazione predefinita. La prima volta che accedi alla funzionalità, devi attivarla per la pagina che stai visualizzando.
Ti consiglio di lasciare selezionata l'opzione predefinita "Attiva solo per questa sessione", in quanto non vuoi incorrere inutilmente nella piccola penalizzazione delle prestazioni. Dopo aver fatto clic su "Attiva il monitoraggio delle risorse", la pagina verrà ricaricata e gli Strumenti per sviluppatori monitoreranno e mostreranno le risorse inviate dal server.
Lo screenshot seguente mostra le risorse richieste e caricate per la home page di Google.
Questa schermata contiene molte informazioni, quindi analizziamole una alla volta.
Il comportamento predefinito è mostrare il tempo necessario per richiedere e caricare tutte le risorse per la pagina. Se scorri verso il basso l'elenco Risorse, potresti rimanere sorpreso, perché potresti non sapere quante richieste singole vengono effettuate dal client. Un numero elevato di richieste dal client può influire notevolmente sulle prestazioni. Acquisire visibilità su ciò che viene richiesto è il primo passo per l'ottimizzazione e l'eventuale riduzione delle risorse.
Se ti interessano solo immagini o fogli di stile, puoi filtrare il tipo di risorsa utilizzando il menu direttamente sotto la finestra della scheda principale.
Scoprirai anche l'ordine in cui vengono richieste le risorse. Utilizzando la visualizzazione della cronologia, puoi capire meglio perché alcuni elementi della tua pagina vengono visualizzati più tardi di altri.
Dopo aver ottenuto una panoramica di tutte le risorse richieste e di come compongono l'intera sequenza temporale della richiesta, ti consigliamo di visualizzare le singole risorse.
Se noti che alcune risorse vengono richieste ogni volta che accedi alla pagina, significa che le intestazioni di memorizzazione nella cache non sono configurate correttamente. Puoi visualizzare tutte le intestazioni di una risorsa facendo clic sulla risorsa nell'elenco a sinistra.
Utilizza la visualizzazione Intestazioni per assicurarti che sia impostato il codice di risposta HTTP previsto e che siano fornite le intestazioni appropriate. Ad esempio, se la risorsa viene modificata raramente o mai, il server deve impostare un'intestazione Expires per un periodo di tempo molto lontano. In questo modo, il browser saprà che non deve più richiedere la risorsa fino a quella data. In questo modo riduci il numero di connessioni HTTP richieste per la pagina, velocizzando il sito.
Riepilogo
La scheda Risorse offre molte altre funzionalità, che illustreremo in un articolo futuro.
Utilizza la scheda Risorse per ottenere informazioni su come il browser client comunica con il server web. Utilizzando queste informazioni, tra cui ora della richiesta, dimensioni della richiesta e ordine della richiesta, puoi eseguire ottimizzazioni intelligenti per ridurre il carico del server, i costi, aumentare la velocità e migliorare l'esperienza utente.
La velocità è molto importante per il tuo sito web, per i tuoi utenti e per i motori di ricerca. Una volta ridotto il numero e le dimensioni delle risorse e avviate le conversazioni HTTP appropriate, il passaggio successivo consiste nell'esaminare e ottimizzare gli script in esecuzione nella pagina. Fortunatamente, la scheda Script, discussa di seguito, fa proprio questo.
Risorse aggiuntive
Per ulteriori informazioni sugli Strumenti per sviluppatori, ti consigliamo quanto segue:
- Video e diapositive della presentazione degli Strumenti per sviluppatori di Chrome da Google I/O 2010
- Tutorial sugli Strumenti per sviluppatori di Chrome
E, naturalmente, continua a visitare html5rocks.com per la seconda parte di questo articolo, oltre a molti altri fantastici contenuti su HTML5 e Chrome.