Introduzione
Google Chrome è un browser web potente e potente, in grado di aprire la strada a tutte le possibilità delle 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à. Inoltre, Google si è assicurata che gli sviluppatori come te abbiano un'esperienza straordinaria con Chrome. Gli Strumenti per sviluppatori, in bundle e disponibili in Chrome e Safari, consentono a programmatori e sviluppatori web di accedere in modo approfondito 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, gli screenshot sono stati acquisiti con Google Chrome 6, pertanto potrebbero esserci lievi differenze nel browser.
In questo articolo faremo un tour introduttivo degli Strumenti per sviluppatori e evidenzieremo le funzionalità più utili e utilizzate. Il nostro pubblico di destinazione è costituito da sviluppatori web che non sono a conoscenza degli Strumenti per sviluppatori o non hanno ancora esaminato gli Strumenti per sviluppatori. Tuttavia, siamo certi che anche gli sviluppatori web esperti riceveranno un paio di consigli.
Se la tua istanza di Strumenti per sviluppatori non corrisponde esattamente agli screenshot riportati in questo articolo, ti consigliamo di eseguire l'upgrade alla versione 5 in modo da poter continuare a utilizzare le funzionalità qui descritte.
Panoramica
Nel complesso, sono disponibili otto gruppi principali di strumenti per visualizzare gli Strumenti per sviluppatori e le funzionalità vengono estese a ogni release. Chrome 5 ora offre Elementi, Risorse, Script, Spostamenti, Profili, Spazio di archiviazione, Controlli e Console.
Elementi
Lo strumento Elementi ti consente di visualizzare la pagina web così come la vede il browser. In altre parole, con lo strumento Elementi puoi visualizzare il codice HTML non elaborato, gli stili CSS non elaborati e il Document Object Model (oggetto documento) e modificarli in tempo reale.
Risorse
Usa lo strumento Risorse per sapere quali componenti la tua pagina web o 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 accelerare i tempi di caricamento delle pagine.
Script
Per eseguire il peering all'interno del codice JavaScript di una pagina, userai lo strumento Script. Qui puoi trovare un elenco degli script richiesti dalla pagina oltre a un debugger di script in primo piano. Puoi persino modificare JavaScript al volo.
Sequenza temporale
Per un'analisi avanzata dei tempi e della velocità, lo strumento Spostamenti offre una visibilità approfondita sulle varie attività dietro le quinte di Chrome. Puoi scoprire quanto tempo impiega il browser a gestire gli eventi DOM, a eseguire il rendering dei layout di pagina e a colorare la finestra.
Profili
Lo strumento Profili ti aiuta ad acquisire e analizzare le prestazioni degli script JavaScript. Ad esempio, puoi capire quali funzioni richiedono più tempo per essere eseguite e capire esattamente dove ottimizzarle.
Spazio di archiviazione
Le applicazioni web moderne richiedono più persistenza rispetto ai semplici cookie e lo strumento Storage ti aiuta a monitorare, eseguire query ed eseguire il debug dello spazio di archiviazione del browser locale. Questo strumento può visualizzare ed eseguire query sui dati memorizzati in database locali, nella memoria locale, nella memoria di sessione e nei cookie.
Audit
Lo strumento di controllo è come avere un proprio consulente per l'ottimizzazione web che si trova accanto a te. Questo strumento può analizzare una pagina durante il caricamento e fornire suggerimenti e ottimizzazioni per ridurre il tempo di caricamento della pagina 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 con la pagina in modo programmatico.
Avvio in corso
È facile avviare gli Strumenti per sviluppatori mentre ti trovi in Chrome.
Per qualsiasi sistema operativo, è sufficiente fare clic con il tasto destro del mouse su un elemento della pagina e selezionare l'opzione "Ispeziona elemento" dal menu contestuale. Vengono visualizzati Strumenti per sviluppatori e puoi visualizzare in dettaglio l'elemento su cui hai fatto clic.
Per vedere come funziona, visita il sito http://www.google.com nel browser Chrome. Fai clic con il pulsante destro del mouse sul logo di Google per visualizzare le seguenti opzioni:
Se selezioni "Ispeziona elemento", verranno 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 e hanno selezionato automaticamente in dettaglio ed evidenziato il tag <img> per il logo di Google. Questo è molto utile quando si vuole sapere quale codice HTML ha generato un particolare elemento della 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 le chiavi
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, Strumenti per sviluppatori dalla barra del menu principale dell'applicazione.
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 esplorando gli elementi nella home page di Google.
Elementi
La prima scheda di Strumenti per sviluppatori è Elementi. Questa è la finestra che apre la struttura della pagina web, presentata così come la vede il browser.
Navigazione nel DOM
Ti capita spesso di visitare le schede Elementi quando devi identificare lo snippet HTML per un aspetto della pagina. Ad esempio, potresti essere curioso di sapere se un'immagine ha un attributo ID HTML e qual è il valore di tale attributo.
La scheda Elementi a volte rappresenta un modo migliore per "visualizzare il codice sorgente" di una pagina. All'interno della scheda Elementi, il DOM della pagina sarà formattato correttamente e mostrerà facilmente gli elementi HTML, i relativi antenati e i relativi discendenti. Troppo spesso le pagine visitate presentano HTML minimizzato o semplicemente brutto, il che rende difficile vedere la struttura della pagina. La scheda Elementi è la soluzione per visualizzare la reale struttura sottostante della pagina.
Ad esempio, il seguente è l'output dalla sezione "Visualizza sorgente" della home page di Google.
È difficile leggere la fonte riportata sopra perché è ottimizzata e minimizzata. Il formato è adatto a 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 molto stampata con la sintassi evidenziata.
La scheda Elementi ti consente inoltre di sfogliare, interagire e talvolta persino modificare stili, metriche, proprietà e listener di eventi per qualsiasi elemento della pagina.
Navigazione negli stili
La natura a cascata del codice CSS rende molto utile il browser Stili nella scheda Elementi. A volte gli stili si comprimono e appaiono elementi visivi indesiderati. Sapere quale regola di stile che il browser applica all'elemento ti aiuta a eseguire il debug di un problema di questo tipo.
Se fai clic su un elemento nella scheda Elementi, vengono visualizzati tutti gli stili associati a quell'elemento.
Nello screenshot riportato sopra puoi vedere che siamo in grado di distinguere tutti gli attributi di stile che vengono applicati. Ad esempio, la spaziatura interna proviene direttamente dall'attributo di stile dell'elemento <img>. Tuttavia, larghezza e altezza provengono dai rispettivi attributi nativi. È interessante notare che ci sono stili ereditati anche dal tag <center>, dal tag <body> e da altri.
Sebbene sia fantastico vedere i singoli stili e la loro provenienza, è anche molto utile vedere l'insieme finale di stili dopo che è stato calcolato e applicato all'elemento. Puoi vedere il prodotto finale selezionando il menu Stile elaborato, come mostrato nello screenshot di seguito.
Daremo quindi una breve occhiata alle altre funzionalità offerte dalla scheda Elementi. Nei prossimi articoli, verranno trattati i seguenti argomenti più in dettaglio.
Modello a scatola
Puoi vedere il modello a scatola così come viene applicato all'elemento selezionato selezionando il menu Metriche:
Proprietà elemento
Selezionando il menu Proprietà, puoi vedere tutte le proprietà dell'elemento, come lo vedrebbero JavaScript e il DOM:
Listener di eventi
Infine, mediante il menu Listener di eventi, puoi anche vedere i listener di eventi associati all'elemento, oppure i fumetti visualizzati:
Riepilogo
Nella scheda Elementi sono disponibili molte funzionalità. Gli articoli futuri approfondiranno i singoli menu.
Devi usare la scheda Elementi quando vuoi vedere l'aspetto della pagina nel browser. I problemi comuni quali "Come viene calcolato questo stile?" o "Quali tag HTML hanno generato il componente?" possono essere risolti in modo facile e veloce tramite la scheda Elementi.
Considera la scheda Elementi come un'uber-"visualizza sorgente" e ottieni una visibilità molto chiara della tua pagina.
Dopo aver esaminato la pagina, ti starai chiedendo in che modo HTML, CSS e immagini sono arrivati fin qui. La scheda Risorse, descritta di seguito, mostra in che modo il browser client e il server web comunicano per l'invio di tali risorse.
Risorse
Quando l'applicazione funziona, il passaggio successivo è ottimizzare le prestazioni della rete e della larghezza di banda. Dovresti cercare di rendere il trasferimento dell'applicazione, da server a client, il più veloce ed efficiente possibile. I tuoi utenti ti ringrazieranno per la velocità di caricamento delle pagine, risparmieranno 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 tengono conto della velocità del sito).
La scheda Risorse in Strumenti per sviluppatori è la finestra di comunicazione tra il server web e il browser client. Puoi visualizzare tutte le risorse richieste dal browser (è sempre sorprendente!), il tempo necessario per riceverle dal server e quanta larghezza di banda viene utilizzata durante il trasferimento.
Ironia della sorte, l'esecuzione della scheda Risorse influisce sulle prestazioni di caricamento della pagina, quindi è disattivata per impostazione predefinita. La prima volta che accedi alla funzionalità, devi abilitarla per la pagina che stai visualizzando.
Ti consiglio di lasciare selezionata l'opzione predefinita "Attiva solo per questa sessione", dato che non vuoi inutilmente incorrere nella piccola riduzione delle prestazioni. Dopo aver fatto clic su "Abilita monitoraggio delle risorse", la pagina verrà ricaricata e gli Strumenti per sviluppatori monitorano e visualizzano le risorse inviate dal server.
Il seguente screenshot mostra le risorse richieste e caricate per la home page di Google.
La schermata contiene molte informazioni, quindi analizziamola un po' alla volta.
Il comportamento predefinito mostra quanto tempo è stato necessario per richiedere e caricare tutte le risorse della pagina. Scorri 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 dal client può influire notevolmente sulle prestazioni. Ottenere visibilità su ciò che viene richiesto è il primo passo verso l’ottimizzazione e l’eventuale riduzione delle risorse.
Se ti interessano solo le immagini o i fogli di stile, puoi filtrare il tipo di risorsa utilizzando il menu direttamente sotto la finestra della scheda principale.
Imparerai anche l'ordine in cui vengono richieste le risorse. Utilizzando la visualizzazione della sequenza temporale, puoi capire meglio perché alcuni 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 cronologia delle richieste, ti consigliamo di 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 deve impostare un'intestazione Scade per il futuro. Questo comunicherà al browser che la risorsa non deve essere richiesta di nuovo 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 molte altre funzioni, che tratteremo in un prossimo articolo.
Utilizzare la scheda Risorse per avere visibilità sulle modalità di comunicazione del browser client con il server web. Utilizzando queste informazioni, tra cui ora e dimensioni delle richieste e ordine delle richieste, puoi effettuare 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, i tuoi utenti e i motori di ricerca. Una volta ridotto il numero e la dimensione delle risorse e dopo aver verificato le conversazioni HTTP appropriate, il passaggio successivo consiste nell'indagare e ottimizzare gli script in esecuzione nella pagina. Fortunatamente, la scheda Script, di cui parleremo dopo, fa esattamente questo.
Altre risorse
Per ulteriori informazioni sugli Strumenti per sviluppatori, ti consigliamo di procedere nel seguente modo:
- Video di presentazione degli Strumenti per sviluppatori di Chrome e slide da Google I/O 2010
- Tutorial sugli Strumenti per sviluppatori di Chrome
Naturalmente, rimani sintonizzato su html5rocks.com per la Parte 2 di questo articolo, insieme a molti altri ottimi contenuti HTML5 e Chrome.