Introduzione
Google Chrome è un browser web ricco e potente, all'avanguardia per le applicazioni sul Web. Google si è impegnata a fondo per offrire agli utenti finali un'esperienza di navigazione molto veloce, molto stabile e ricca di funzionalità. Google si assicura inoltre che gli sviluppatori come te possano usufruire di un'esperienza ottimale con Chrome. Gli Strumenti per sviluppatori, in bundle e disponibili in Chrome e Safari, consentono agli sviluppatori web e ai programmatori di accedere all'interno del browser e della loro applicazione web.
Gli Strumenti per sviluppatori fanno parte del progetto Webkit open source. Gran parte della discussione in questo articolo riguarda sia Google Chrome sia Safari. Tuttavia, poiché gli screenshot sono stati acquisiti utilizzando Google Chrome 6, potrebbero esserci lievi differenze nel tuo browser.
In questo articolo, faremo un tour introduttivo degli Strumenti per sviluppatori e ne evidenzieremo le funzioni più utili e popolari. Il nostro pubblico di destinazione è costituito da sviluppatori web che non conoscono o non hanno ancora effettuato ricerche sugli Strumenti per sviluppatori. Tuttavia, siamo sicuri che anche gli sviluppatori web esperti riceveranno uno o due suggerimenti.
Se la tua istanza degli Strumenti per sviluppatori non corrisponde esattamente agli screenshot presenti in questo articolo, ti consigliamo di eseguire l'upgrade alla versione 5 per poter seguire e ottenere l'accesso a tutte le funzioni qui descritte.
Panoramica
Nel complesso, sono disponibili otto gruppi principali di strumenti (Strumenti per sviluppatori) e le funzionalità vengono estese a ogni release. Chrome 5 ora offre elementi, risorse, script, cronologia, 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, utilizzando lo strumento Elementi, puoi visualizzare il codice HTML non elaborato, gli stili CSS non elaborati, il Document Object Model e manipolarli in tempo reale.
Risorse
Utilizza lo strumento Risorse per sapere quali componenti la tua pagina web o la tua applicazione richiede ai server web, quanto tempo richiedono queste richieste e quanta 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 eseguire il peering all'interno del codice JavaScript per una pagina, puoi utilizzare lo strumento Script. Qui puoi trovare un elenco di script richiesti dalla pagina oltre a un debugger di script completo. Puoi persino modificare il codice JavaScript al volo!
Sequenza
Per un'analisi avanzata dei tempi e della velocità, lo strumento Spostamenti offre una visibilità dettagliata sulle varie attività dietro le quinte di Chrome. Puoi sapere quanto tempo impiega il browser per gestire gli eventi DOM, visualizzare i layout delle pagine e colorare la finestra.
Profili
Lo strumento Profili consente di acquisire e analizzare le prestazioni degli script JavaScript. Ad esempio, puoi scoprire quali funzioni richiedono più tempo per essere eseguite e concentrarti esattamente su dove ottimizzare.
Archiviazione
Le moderne applicazioni web richiedono una persistenza maggiore dei semplici cookie e lo strumento Storage consente di monitorare, eseguire query ed eseguire il debug dell'archiviazione del browser locale. Questo strumento può visualizzare ed eseguire query sui dati memorizzati in database locali, memoria locale, memoria di sessione e cookie.
Controllo
Lo strumento di controllo è come avere un consulente per l'ottimizzazione web seduto accanto a te. Questo strumento è in grado di analizzare una pagina durante il caricamento e di fornire suggerimenti e ottimizzazioni per ridurre il suo tempo di caricamento e aumentare la velocità di risposta percepita (e reale).
Console
Infine, gli Strumenti per sviluppatori offrono una console completa. Dalla console puoi inserire codice JavaScript arbitrario e interagire in modo programmatico con la pagina.
Avvio
È facile avviare gli Strumenti per sviluppatori dall'interno di Chrome.
Per qualsiasi sistema operativo, puoi semplicemente fare clic con il tasto destro del mouse su un qualsiasi elemento della pagina e selezionare l'opzione "Ispeziona elemento" dal menu contestuale. Si aprirà la pagina Strumenti per sviluppatori e verrà visualizzato in dettaglio l'elemento su cui hai fatto clic.
Per una dimostrazione di questa funzionalità, visita la pagina http://www.google.com nel browser Chrome. Fai clic con il tasto destro del mouse sul logo Google per visualizzare le seguenti opzioni:
Se selezioni "Ispeziona elemento", vengono visualizzati gli Strumenti per sviluppatori, che dovrebbero avere il seguente aspetto:
Nota come gli Strumenti per sviluppatori si sono aperti all'interno della scheda Elementi, hanno visualizzato in dettaglio ed evidenziato automaticamente il tag <img> del logo Google. Questa funzionalità è molto utile quando vuoi sapere quale codice HTML ha generato un determinato elemento di pagina.
Puoi aprire gli Strumenti per sviluppatori anche con una semplice scorciatoia da tastiera. A seconda del sistema operativo, prova a procedere nel seguente modo:
- 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 e dalla barra del menu principale dell'applicazione seleziona Visualizza, Sviluppatore, Strumenti per sviluppatori.
Su un PC Windows devi utilizzare il menu Pagina in alto a destra e selezionare Sviluppatore, Strumenti per sviluppatori.
Ora che gli Strumenti per sviluppatori sono aperti e pronti, iniziamo a esplorare gli elementi della home page di Google.
Elementi
La prima scheda negli Strumenti per sviluppatori è Elementi. Si tratta della finestra che mostra la struttura della pagina web, presentata come la vede il browser.
Navigazione nel DOM
Visiterai spesso la scheda Elementi quando dovrai identificare lo snippet HTML per alcuni aspetti della pagina. Ad esempio, potresti voler sapere se un'immagine ha un attributo ID HTML e qual è il valore di questo attributo.
La scheda Elementi a volte è un modo migliore per "visualizzare il codice sorgente" di una pagina. All'interno della scheda Elementi, il DOM della pagina avrà un formato corretto, mostrando facilmente gli elementi HTML, i relativi predecessori e i relativi discendenti. Troppo spesso le pagine che visiti avranno il codice HTML minimizzato o semplicemente brutto, il che rende difficile capire come è strutturata la pagina. La scheda Elementi è la soluzione per visualizzare la reale struttura sottostante della pagina.
Ad esempio, di seguito è riportato l'output della pagina "Visualizza sorgente" della home page di Google.
È difficile leggere la fonte riportata sopra perché è ottimizzata e minimizzata. Il formato è buono per client e server, ma difficile per gli sviluppatori.
Se invece vuoi leggere il codice sorgente di una pagina, usa la scheda Elementi per visualizzare una gerarchia di elementi ben stampata e con evidenziazione della sintassi.
La scheda Elementi consente inoltre di sfogliare, interagire e, in alcuni casi, anche modificare stili, metriche, proprietà e listener di eventi per qualsiasi elemento della pagina.
Navigazione degli stili
La natura a cascata di CSS rende molto utile il browser Stili nella scheda Elementi. A volte gli stili si comprimono e vengono visualizzate immagini indesiderate. Sapere quale regola di stile applicata dal browser all'elemento ti aiuta a eseguire il debug di questo problema.
Se fai clic su qualsiasi elemento nella scheda Elementi, verranno visualizzati tutti gli stili associati a quell'elemento.
Come puoi vedere nello screenshot qui sopra, siamo in grado di individuare tutti gli attributi di stile applicati. Ad esempio, la spaziatura interna proviene direttamente dall'attributo style dell'elemento <img>. Tuttavia, la larghezza e l'altezza derivano dai rispettivi attributi nativi. È interessante notare che esistono stili ereditati anche dal tag <center>, dal tag <body> e da altri.
Nonostante sia fantastico vedere i singoli stili e la loro provenienza, è molto utile anche vedere il set finale di stili dopo che è stato calcolato e applicato all'elemento. Per visualizzare il prodotto finale, seleziona il menu Stile calcolato, come mostrato nello screenshot di seguito.
Ora daremo una breve occhiata alle altre funzionalità offerte dalla scheda Elementi. Tratteremo quanto segue in maggiore dettaglio nei prossimi articoli.
Modello di scatola
Puoi vedere il modello a riquadro quando viene applicato all'elemento selezionato selezionando il menu Metriche:
Proprietà elemento
Puoi visualizzare tutte le proprietà dell'elemento, come le visualizzerebbero JavaScript e il DOM, selezionando il menu Proprietà:
Listener di eventi
Infine, puoi anche visualizzare i listener di eventi associati all'elemento o il fumetto attraverso il menu Listener di eventi:
Riepilogo
Nella scheda Elementi sono disponibili numerose funzionalità e i prossimi articoli approfondiranno i singoli menu.
Dovresti utilizzare la scheda Elementi se vuoi vedere come la pagina appare al browser stesso. I problemi comuni quali "come viene calcolato questo stile?" o "quali tag HTML hanno generato questo componente?" possono essere risolti in modo facile e veloce tramite la scheda Elementi.
Pensa alla scheda Elementi come a una super"visualizzazione di origine" e ottieni una visibilità molto nitida nella tua pagina.
Dopo avere esaminato la pagina, ti starai chiedendo inizialmente come siano arrivati i HTML, i CSS e le immagini. La scheda Risorse, descritta di seguito, mostra in che modo il browser client e il server Web comunicano per l'invio di queste risorse.
Risorse
Una volta che l'applicazione funziona, il passo successivo dovrebbe essere ottimizzare le prestazioni della rete e della larghezza di banda. Il tuo obiettivo è rendere il trasferimento della tua applicazione, da server a client, il più veloce ed efficiente possibile. I tuoi utenti ti ringrazieranno per la velocità di caricamento delle pagine, risparmierai denaro in termini di larghezza di banda e risorse del server, otterrai anche un punteggio migliore nei ranking dei risultati di ricerca di Google (che ora tengono conto della velocità del sito).
La scheda Risorse negli Strumenti per sviluppatori è una finestra sulla comunicazione tra server web e browser client. Può visualizzare tutte le risorse richieste dal browser (questo è sempre molto sorprendente), il tempo necessario per riceverle dal server e la quantità di larghezza di banda utilizzata durante il trasferimento.
Ironicamente, l'esecuzione della scheda Risorse influisce sulle prestazioni di caricamento delle pagine, pertanto è disattivata per impostazione predefinita. La prima volta che accedi alla funzionalità, devi attivarla per la pagina visualizzata.
Ti consiglio di lasciare selezionata l'impostazione predefinita "Abilita solo per questa sessione", in quanto non vuoi incorrere inutilmente per la piccola penalizzazione delle prestazioni. Dopo aver fatto clic su "Abilita monitoraggio risorse", la pagina viene ricaricata e gli Strumenti per sviluppatori monitorano e mostrano le risorse inviate dal server.
Il seguente screenshot mostra le risorse necessarie e caricate per la home page di Google.
Ci sono molte informazioni in questa schermata, quindi analizziamole un po' alla volta.
Il comportamento predefinito mostra quanto tempo è stato necessario per richiedere e caricare tutte le risorse della pagina. Scorrendo verso il basso l'elenco Risorse potrebbe sorprenderti, dato che potresti non sapere quante richieste individuali vengono effettuate dal client. Un numero elevato di richieste del client può influire notevolmente sulle prestazioni. Ottenere visibilità su ciò che viene richiesto è il primo passo per l'ottimizzazione e la riduzione finale 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.
Imparerai anche in che ordine vengono richieste le risorse. Utilizzando la visualizzazione della cronologia, puoi capire meglio perché determinati elementi della 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 delle richieste, puoi visualizzare in dettaglio 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 vengano fornite le intestazioni appropriate. Ad esempio, se la risorsa viene modificata raramente o mai, il server dovrebbe impostare un'intestazione Scadenza per le date più lontane nel futuro. In questo modo comunicherai al browser che non sarà necessario richiedere nuovamente la risorsa fino a quella data. In questo modo si riduce la quantità di connessioni HTTP necessarie per la pagina, velocizzando così il sito.
Riepilogo
La scheda Risorse contiene molto altro, di cui parleremo in un prossimo articolo.
Utilizza la scheda Risorse per ottenere visibilità sul modo in cui il browser client comunica con il server web. Utilizzando queste informazioni, tra cui il tempo e le dimensioni della richiesta e l'ordine delle richieste, puoi eseguire ottimizzazioni intelligenti per ridurre il carico e i costi del server, nonché per 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 ridotti il numero e la dimensione delle risorse e dopo che si sono verificate le conversazioni HTTP appropriate, il passaggio successivo consiste nell'analisi e nell'ottimizzazione degli script in esecuzione nella pagina. Fortunatamente, la scheda Script, di cui parleremo dopo, fa proprio questo.
Altre risorse
Per ulteriori informazioni sugli Strumenti per sviluppatori, ti consigliamo quanto segue:
- Presentazione degli Strumenti per sviluppatori di Chrome e slide dal Google I/O 2010
- Tutorial sugli strumenti per sviluppatori di Chrome
Continua a seguirci su html5rocks.com per la Parte 2 di questo articolo, oltre a tanti altri fantastici contenuti HTML5 e Chrome.