Chrome DevTools Revolutions 2013

Introduzione

Con l'aumento della complessità e della funzionalità delle applicazioni web, è aumentata anche la complessità di Chrome DevTools. In questo riepilogo del talk di Paul Irish Chrome DevTools Revolutions 2013 tenuto al Google I/O 2013, puoi dare un'occhiata alle ultime funzionalità che stanno rivoluzionando il modo in cui crei e testi le applicazioni web.

Se non hai potuto seguire il discorso di Paul, puoi guardarlo qui sopra (dai, non c'è fretta) o passare direttamente al riepilogo delle funzionalità:

• Workspaces ti consente di utilizzare DevTools come editor di codice sorgente.
• Se utilizzi Sass, ti innamorerai della possibilità di modificare in tempo reale i file Sass (.scss) in DevTools e di vedere le modifiche applicate immediatamente alla pagina.
• Il debug remoto delle pagine su Chrome per Android è possibile da un po' di tempo, ma l'estensione ADB semplifica la connessione ai dispositivi Android. Il port forwarding inverso ti consente di connetterti facilmente a localhost sulla tua macchina di sviluppo dal tuo dispositivo.
• Le prestazioni sono sempre un problema nelle applicazioni web e DevTools offre una serie di nuove funzionalità per aiutarti a individuare i colli di bottiglia, tra cui la nuova visualizzazione della mappa di calore per il profiling della CPU e diversi nuovi strumenti per il debug dei problemi di prestazioni relativi al rendering e all'utilizzo della memoria.

Queste funzionalità sono disponibili in Chrome 28, ora disponibile nel canale di aggiornamento stabile.

Aree di lavoro

Le aree di lavoro ti consentono di mappare le risorse servite da un server web locale ai file su disco, in modo da poter modificare qualsiasi tipo di file di origine nel riquadro Origini e mantenere le modifiche sul disco. Analogamente, le modifiche apportate nell'editor esterno vengono visualizzate immediatamente nel riquadro Origini.

Lo screenshot seguente mostra un esempio di spazi di lavoro in azione. Il sito Calendar è stato caricato su localhost, mentre il riquadro Origini mostra la visualizzazione del file system locale della cartella principale del sito. Le modifiche apportate ai file in questa cartella vengono mantenute sul disco. Nello screenshot di seguito sono state apportate alcune modifiche non salvate a Calendar.css, quindi accanto al nome del file è presente un asterisco.

Se premi Control+S o Command+S, le modifiche vengono salvate sul disco.

Analogamente, le modifiche apportate agli stili di un elemento nel riquadro Elementi si riflettono sia nel riquadro Origini sia nell'editor esterno. Ricorda:

• Le modifiche al DOM nel riquadro Elementi non vengono mantenute. Solo le modifiche allo stile nel riquadro Elementi vengono mantenute.
• Possono essere modificati solo gli stili definiti in un file CSS esterno. Le modifiche a element.style o agli stili in linea non vengono ripristinate sul disco. Se hai stili in linea, puoi modificarli nel riquadro Origini.
• Le modifiche allo stile nel riquadro Elementi vengono applicate immediatamente; non è necessario premere Control+S o Command+S.

Aggiunta di una cartella dello spazio di lavoro

L'utilizzo degli spazi di lavoro prevede due parti: rendere disponibili i contenuti di una cartella locale a DevTools e mappare la cartella a un URL.

Per aggiungere una nuova cartella dello spazio di lavoro:

1. In DevTools, fai clic su Impostazioni per aprire le impostazioni di DevTools.
2. Fai clic su Area di lavoro.
3. Fai clic su Aggiungi cartella.
4. Vai alla cartella contenente i file di origine del progetto e fai clic su Seleziona.
5. Quando richiesto, fai clic su Consenti per consentire a DevTools l'accesso completo alla cartella.

Il riquadro Origini mostra la nuova cartella dello spazio di lavoro insieme alle origini caricate su localhost. Ora puoi modificare in tempo reale i file all'interno della cartella dello spazio di lavoro e le modifiche verranno mantenute sul disco.

Mappatura di una cartella a un URL

Dopo aver aggiunto una cartella dell'area di lavoro, puoi mapparla a un URL. Ogni volta che Chrome carica l'URL specificato, il riquadro Origini mostra i contenuti della cartella dell'area di lavoro anziché quelli della cartella di rete.

Per mappare una cartella dello spazio di lavoro a un URL:

1. Nel riquadro Origini, fai clic con il tasto destro del mouse o Ctrl+clic su un file in una cartella dello spazio di lavoro.
2. Seleziona Mappa alla risorsa di rete.

   

3. Seleziona la risorsa di rete corrispondente dalla pagina attualmente caricata.

   

4. Ricarica la pagina in Chrome.

Il riquadro Origini ora dovrebbe mostrare solo i contenuti della cartella dello spazio di lavoro locale del tuo sito, non le origini localhost, come mostrato di seguito.

Esistono altri due modi per collegare una cartella di rete a una cartella dello spazio di lavoro:

• Fai clic con il tasto destro del mouse (o Ctrl+clic) su una risorsa di rete e seleziona Mappa a risorsa del file system.
• Aggiungi le mappature manualmente nella scheda Spazio di lavoro della finestra di dialogo Impostazioni di DevTools.

Debug delle mappe di origine Sass/CSS

Il debug di Sass (mappa di origine CSS) ti consente di modificare in tempo reale i file Sass (.scss) nel riquadro Origini e di visualizzare i risultati senza dover uscire da DevTools o aggiornare la pagina. Quando ispezioni un elemento i cui stili sono forniti da un file CSS generato da Sass, il riquadro Elementi mostra un link al file .scss, non al file .css generato.

Se fai clic sul link, si apre il file SCSS (modificabile) nel riquadro Origini. Puoi apportare le modifiche che preferisci a questo file.

Quando salvi le modifiche a un file SCSS (in DevTools o altrove), il compilatore Sass rigenera i file CSS. Quindi, DevTools ricarica il file CSS appena generato.

Utilizzo del debug di Sass

Per utilizzare il debug di Sass in Chrome, devi disporre della versione pre-release del compilatore Sass, che è l'unica versione che attualmente supporta la generazione di mappe sorgente.

gem install sass -v '>=3.3.0alpha' --pre

Devi anche attivare la funzionalità di debug di Sass negli esperimenti di DevTools:

1. Apri about:flags in Chrome.
2. Attiva Attiva gli esperimenti degli Strumenti per sviluppatori.
3. Riavvia Chrome.
4. Apri le impostazioni di DevTools e fai clic su Sperimentali.
5. Attiva Supporto di Sass (o Debug delle stylesheet Sass, a seconda della versione del browser in uso).

Una volta installato Sass, avvia il compilatore Sass per rilevare le modifiche ai file di origine Sass e creare file di mappa sorgente per ogni file CSS generato, ad esempio:

sass --watch **--sourcemap** sass/styles.scss:styles.css

Se utilizzi Compass, tieni presente che questo strumento non supporta ancora la versione pre-release di Sass, pertanto non puoi utilizzare il debug di Sass con Compass.

Come funziona

Per ogni file di origine SCSS elaborato, il compilatore Sass genera un file mappa di origine (file .map) oltre al CSS compilato. Il file della mappa di origine è un file JSON che definisce le mappature tra il file .scss e i file .css. Ogni file CSS contiene un'annotazione che specifica l'URL del relativo file della mappa di origine, incorporato in un commento speciale:

/*# sourceMappingURL=<url>; */

Ad esempio, con il seguente file SCSS:

<!-- styles.scss -->
$textSize: 26px;
$fontColor: red;
$bgColor: whitesmoke;

h2 {
    font-size: $textSize;
    color: $fontColor;
    background: $bgColor;
}

Sass genera un file CSS come questo, con l'annotazione sourceMappingURL:

<!-- styles.css -->
h2 {
  font-size: 24px;
  color: orange;
  background-color: darkblue; 
}
/*# sourceMappingURL=styles.css.map */

Di seguito è riportato un esempio di file di mappa sorgente:

{
  "version": "3",
  "mappings":"AAKA,EAAG;EACC,SAAS,EANF,IAAI;EAOX,KAAK..."
  "sources": ["sass/styles.scss"],
  "file": "styles.css"
}

Debug remoto semplificato su Chrome per Android

Un paio di nuove funzionalità in DevTools semplificano la configurazione del debug remoto su Chrome per Android: l'estensione ADB e il port forwarding inverso.

L'estensione ADB per Chrome semplifica la procedura di configurazione del debug remoto. Offre i seguenti vantaggi:

• Raggruppa Android Debug Bridge (ADB) in modo che non sia necessario installarlo.
• Non è richiesta alcuna interazione con la riga di comando.
• Interfaccia utente per avviare e arrestare facilmente il daemon ADB e visualizzare i dispositivi connessi.

Il port forwarding inverso semplifica il collegamento di Chrome su Android a un server web in esecuzione su localhost, un'operazione resa difficile da alcuni ambienti di rete senza alcuni trucchi DNS.

Utilizzare l'estensione ADB

Innanzitutto, installa l'estensione ADB per Chrome dal Chrome Web Store. Fai clic su Aggiungi a Chrome per installare l'estensione.

Una volta installato, in Chrome viene visualizzata un'icona del menu Android grigia. Per avviare ADB, fai clic sull'icona e poi su Avvia ADB.

Una volta avviato ADB, l'icona del menu diventa verde e viene visualizzato il numero di dispositivi attualmente connessi, se presenti.

Fai clic su Visualizza dispositivi per aprire la pagina about:inspect che mostra ogni dispositivo connesso e le relative schede. Per ispezionare una scheda in DevTools, fai clic sul link "Controlla" accanto al relativo URL.

Se non vedi dispositivi connessi, controlla che il dispositivo sia connesso alla porta USB e che il debug USB sia attivo nelle impostazioni di Chrome per Android. Per istruzioni più dettagliate e la procedura per la risoluzione dei problemi, vedi Debug remoto su Android.

Port forwarding inverso (sperimentale)

In genere, sulla tua macchina di sviluppo locale è in esecuzione un server web e vuoi connetterti a quel sito dal tuo dispositivo. Se la macchina di sviluppo e il dispositivo sono sulla stessa rete, è tutto molto semplice. Tuttavia, in alcuni casi, ad esempio nelle reti aziendali con limitazioni, ciò potrebbe non essere possibile senza alcuni trucchi DNS intelligenti. Una nuova funzionalità di Chrome per Android chiamata inoltro di porte in reverse semplifica questa operazione. Funziona creando una porta TCP in ascolto sul dispositivo che inoltra il traffico tramite USB a una determinata porta TCP sulla macchina di sviluppo.

Per utilizzare questa funzionalità, devi avere:

• Chrome 28 o versioni successive installate sulla macchina di sviluppo
• Chrome per Android beta installato sul dispositivo
• Android Debug Bridge (estensione di Chrome per ADB o SDK Android completo) installato sulla macchina di sviluppo

Per utilizzare il port forwarding inverso, devi collegare il dispositivo per il debug remoto, come descritto nell'articolo sull'utilizzo dell'estensione ADB. Poi devi attivare il port forwarding inverso e aggiungere una regola di port forwarding per la tua applicazione.

Innanzitutto, attiva il port forwarding inverso:

1. Apri Chrome sulla macchina di sviluppo.
2. In about:flags, attiva Attiva gli esperimenti degli Strumenti per sviluppatori e riavvia Chrome.
3. Apri about:inspect. Dovresti vedere il tuo dispositivo mobile e un elenco delle schede aperte.
4. Fai clic sul link "Controlla" accanto a uno dei siti elencati.
5. Nella finestra di DevTools che si apre, apri il riquadro Impostazioni.
6. Nella sezione Esperimenti, attiva Attiva il port forwarding inverso.
7. Chiudi la finestra di DevTools e torna a about:inspect.

Aggiungi una regola di port forwarding:

1. Fai di nuovo clic sul link "Ispeziona" per aprire DevTools e poi di nuovo le impostazioni di DevTools.
2. Fai clic sulla scheda Inoltro di porta.
3. Nel campo Porta del dispositivo, inserisci il numero di porta a cui Chrome deve connettersi sul tuo dispositivo Android (il valore predefinito è 8080).
4. Nel campo Destinazione, aggiungi il numero di porta in cui è in esecuzione l'applicazione web sulla tua macchina di sviluppo.

   

5. In Chrome per Android, apri localhost:, dove è il valore inserito nel campo Porta dispositivo (il valore predefinito è 8080).

Dovresti vedere i contenuti pubblicati dalla tua macchina di sviluppo.

Visualizzazione del grafico a fiamme per i profili JavaScript

La nuova visualizzazione grafico a forma di fiamma fornisce una rappresentazione visiva dell'elaborazione di JavaScript nel tempo, simile a quella disponibile nei riquadri Sequenza temporale e Rete.

L'asse orizzontale è il tempo e l'asse verticale è lo stack di chiamate. Nella parte superiore del riquadro è presente una panoramica che mostra l'intera registrazione. Puoi "aumentare lo zoom" su una regione della panoramica selezionandola con il mouse, come mostrato di seguito. La scala temporale della visualizzazione dei dettagli si riduce di conseguenza.

Nella visualizzazione dei dettagli, uno stack di chiamate è rappresentato come una serie di "blocchi" di funzioni. Un blocco sopra un altro è stato chiamato dal blocco di funzione inferiore. Se passi il mouse sopra un determinato blocco, vengono visualizzati il nome della funzione e i dati relativi ai tempi:

• Nome: il nome della funzione.
• Tempo di esecuzione: il tempo necessario per completare l'attuale chiamata della funzione, inclusi solo gli enunciati nella funzione stessa, senza includere le funzioni chiamate.
• Tempo totale: il tempo necessario per completare l'attuale chiamata di questa funzione e di eventuali funzioni chiamate.
• Tempo singola attività aggregato: tempo aggregato per tutte le chiamate della funzione nella registrazione, non incluse le funzioni chiamate da questa funzione.
• Tempo totale aggregato: il tempo totale aggregato per tutte le chiamate della funzione, incluse le funzioni chiamate da questa funzione.

Se fai clic su un blocco di funzioni, nel riquadro Origini si apre il file JavaScript contenente la riga in cui è definita la funzione.

Per utilizzare il grafico a fiamme:

1. In DevTools, fai clic sulla scheda Profili.
2. Scegli Registra profilo CPU JavaScript e fai clic su Avvia.
3. Al termine della raccolta dei dati, fai clic su Interrompi.
4. Nella visualizzazione del profilo, seleziona la visualizzazione Grafico a forma di fiamma.

   

Cinque funzionalità chiave per la misurazione del rendimento

A completare questo panorama di progressi rivoluzionari in DevTools sono diverse nuove funzionalità per esaminare i problemi di prestazioni:

• Modalità di disegno continuo
• Visualizzazione di rettangoli e bordi del livello di Paint
• Misuratore FPS
• Ricerca di layout sincroni forzati (thrashing del layout)
• Monitoraggio dell'allocazione degli oggetti

Modalità di pittura continua

La modalità di disegno continuo è un'opzione nelle impostazioni di DevTools (Rendering > Attiva la ridivisione continua della pagina) che consente di identificare il costo di rendering dei singoli elementi o stili CSS.

In genere, Chrome dipinge sullo schermo solo in risposta a una modifica del layout o dello stile e solo nelle regioni dello schermo che devono essere aggiornate. Quando attivi il ridipingimento continuo della pagina, l'intero schermo viene ridipinto costantemente. Un popup mostra il tempo impiegato da Chrome per dipingere la pagina, nonché l'intervallo di tempo e un grafico che mostra la distribuzione dei tempi di pittura recenti. La linea orizzontale nell'istogramma indica il valore di 16,6 ms.

Il vantaggio di questo approccio è che puoi esaminare l'albero DOM nel riquadro Elementi e nascondere i singoli elementi (premi il tasto H per nascondere l'elemento attualmente selezionato) o disattivare gli stili CSS di un elemento. Puoi vedere il tempo che un elemento o uno stile aggiunge al "peso" del rendering della pagina, se presente, notando le modifiche al tempo di aggiornamento della pagina. Se nascondere un singolo elemento riduce notevolmente i tempi di aggiornamento, devi concentrarti sullo stile o sulla costruzione di quell'elemento.

Per attivare la modalità di disegno continuo:

1. Apri le impostazioni di DevTools. 1.Nella scheda Generali, in Rendering, attiva Attiva la ridipintura continua della pagina.

Per ulteriori informazioni, consulta Eseguire il profiling dei tempi di pittura lunghi con la modalità di pittura continua di DevTools.

Visualizzazione di rettangoli colorati e bordi dei livelli

Un'altra opzione in DevTools è mostrare le regioni rettangolari del display in cui viene applicata la pittura. (Impostazioni > Rendering > Mostra i rettangoli colorati). Ad esempio, nello screenshot seguente viene disegnato un rettangolo di pittura sulla regione in cui è stato applicato un effetto CSS al passaggio del mouse alla grafica viola. Questo è positivo, poiché si tratta di una parte relativamente piccola dello schermo.

Evita le pratiche di progettazione e sviluppo che richiedono la ridisegnatura dell'intero display. Ad esempio, nello screenshot seguente l'utente sta scorrendo la pagina. Un rettangolo di colore circonda la barra di scorrimento e un altro circonda l'intero resto della pagina. In questo caso, il colpevole è l'immagine di sfondo nell'elemento body. La posizione dell'immagine è impostata su fissa in CSS, il che richiede a Chrome di ridipingere l'intera pagina a ogni scorrimento.

Misuratore FPS

Il misuratore di FPS mostra la frequenza frame corrente della pagina, la frequenza frame minima e massima, un grafico a barre che mostra la frequenza frame nel tempo e un'istogramma che mostra la variabilità della frequenza frame.

Per visualizzare il misuratore di FPS:

1. Apri le impostazioni di DevTools.
2. Fai clic su Generali.
3. In Rendering, attiva Forza composizione accelerata e Mostra misuratore FPS.

Puoi forzare la visualizzazione sempre del misuratore FPS aprendo about:flags, attivando Contatore FPS e riavviando Chrome.

Ricerca di layout sincroni forzati (thrashing del layout)

Per massimizzare le prestazioni di rendering, Chrome raggruppa normalmente le modifiche al layout richieste dall'applicazione e pianifica un passaggio di layout per calcolare e visualizzare in modo asincrono le modifiche richieste. Tuttavia, se un'applicazione richiede il valore di una proprietà dipendente dal layout (ad esempio offsetHeight o offsetWidth), Chrome è costretto a eseguire immediatamente e in modo sincrono un layout della pagina. Questi cosiddetti layout sincronizzati forzati possono ridurre notevolmente le prestazioni di rendering, soprattutto se eseguiti ripetutamente su alberi DOM di grandi dimensioni. Questo scenario è stato anche chiamato "thrashing del layout".

Una registrazione di Spostamenti ti avvisa quando rileva un layout sincrono forzato con un'icona di avviso gialla accanto al record di Spostamenti corrispondente. Se passi il mouse sopra uno di questi record, vengono visualizzate le tracce dello stack per il codice che ha invalidato il layout e il codice che lo ha forzato.

Questo popup mostra anche il numero di nodi che richiedono il layout, le dimensioni dell'albero di riallineamento, l'ambito del layout e la radice del layout.

Per ulteriori informazioni, consulta la demo di Spostamenti nel tempo: diagnosi dei layout sincronizzati forzati.

Monitoraggio dell'allocazione degli oggetti

Il monitoraggio dell'allocazione degli oggetti è un nuovo tipo di profilo della memoria che mostra l'allocazione nel tempo. Quando avvii il monitoraggio dell'allocazione, DevTools acquisisce snapshot dell'heap in modo continuo nel tempo. Il profilo di allocazione dell'heap mostra dove vengono creati gli oggetti e identifica il percorso di conservazione.

Per monitorare le allocazioni degli oggetti:

1. In DevTools, fai clic sulla scheda Profili.
2. Scegli Registra allocazioni heap e fai clic su Avvia.
3. Al termine della raccolta dei dati, fai clic su Interrompi la registrazione del profilo heap (il cerchio rosso nell'angolo in basso a sinistra del riquadro di profilazione).

Profilazione di Canvas (sperimentale)

Infine, ecco una funzionalità completamente sperimentale da esplorare. Il profiling di Canvas ti consente di registrare e riprodurre le chiamate WebGL effettuate su un elemento canvas. Puoi eseguire la procedura passo passo per le singole chiamate WebGL o per i gruppi di chiamate e visualizzare i risultati visualizzati. Viene visualizzato anche il tempo necessario per riprodurre queste chiamate specifiche.

Per utilizzare il profilo della tela:

1. Attiva la funzionalità di ispezione della tela nella scheda Esperimenti delle impostazioni di DevTools. Se non vedi questa scheda, apri about:flags, attiva Attiva gli esperimenti degli Strumenti per sviluppatori e riavvia Chrome.
2. Fai clic sulla scheda Profili.
3. Seleziona Acquisisci fotogramma della tela e fai clic su Acquisisci istantanea.
4. Ora puoi esplorare le chiamate utilizzate per creare il frame del canvas.