Chrome DevTools Revolutions 2013

introduzione

Chrome DevTools è cresciuto di pari passo con la complessità e la funzionalità delle applicazioni web. In questo riepilogo della presentazione di Paul Ireland Google I/O 2013, Chrome DevTools Revolutions 2013, offre uno sguardo alle ultime funzionalità che stanno rivoluzionando il modo in cui crei e testi le applicazioni web.

Se non hai seguito il discorso di Paolo, puoi leggerlo qui sopra (procediamo in attesa) oppure puoi andare direttamente al riepilogo delle funzionalità:

• Le aree di lavoro ti consentono di utilizzare DevTools come editor di codice sorgente.
• Se utilizzi Sass, ti piacerà avere la possibilità di modificare i file Sass (.scss) in DevTools e vedere subito le modifiche nella pagina.
• Per un certo periodo è possibile eseguire il debug delle pagine su Chrome per Android da remoto, ma l'estensione ADB semplifica la connessione ai dispositivi Android. Il port forwarding inverso 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 grafico a fiamme per la profilazione della CPU e diversi nuovi strumenti per il debug dei problemi di prestazioni relativi al rendering e all'utilizzo della memoria.

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

Aree di lavoro

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

Il seguente screenshot mostra un esempio di aree di lavoro in azione. Il sito di 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 salvate come permanenti su disco. Nello screenshot seguente sono state apportate alcune modifiche non salvate a Calendar.css, quindi accanto al nome del file è presente un asterisco.

La pressione di Control+S o Command+S comporta il mantenimento delle modifiche sul disco.

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

• Le modifiche del DOM nel riquadro Elementi non vengono rese persistenti. Vengono mantenute solo le modifiche di stile nel riquadro Elementi.
• Possono essere modificati solo gli stili definiti in un file CSS esterno. Le modifiche a element.style o agli stili incorporati non vengono salvate in modo permanente su disco. Gli stili incorporati possono essere modificati nel riquadro Origini.
• Le modifiche di stile nel riquadro Elementi vengono rese persistenti immediatamente; non è necessario premere Control+S o Command+S.

Aggiunta di una cartella dell'area di lavoro

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

Per aggiungere una nuova cartella dell'area 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. Passa 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 di accedere completo alla cartella.

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

Mappare 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, nel riquadro Origini vengono visualizzati i contenuti della cartella dell'area di lavoro al posto dei contenuti della cartella di rete.

Per mappare la cartella di un'area di lavoro a un URL:

1. Nel riquadro Origini, fai clic con il tasto destro del mouse o premi Ctrl e fai clic su un file in una cartella dell'area 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 dell'area di lavoro locale del sito, non le origini localhost, come mostrato di seguito.

Esistono altri due modi per collegare una cartella di rete a una cartella dell'area di lavoro:

• Fai clic con il pulsante destro del mouse (o premi Ctrl e fai clic) su una risorsa di rete e seleziona Mappa alla risorsa del file system.
• Aggiungi manualmente le mappature nella scheda Area di lavoro della finestra di dialogo Impostazioni DevTools.

Debug della mappa di origine Sass/CSS

Il debug dei file Sass (.scss) (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 esamini un elemento i cui stili sono forniti da un file CSS generato da Sass, nel riquadro Elementi viene visualizzato 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 tutte le modifiche che vuoi a questo file.

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

Utilizzo del debug Sass

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

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

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

1. Apri about:flags in Chrome.
2. Attiva l'opzione Attiva esperimenti di Strumenti per sviluppatori.
3. Riavvia Chrome.
4. Apri le impostazioni di DevTools e fai clic su Esperimenti.
5. Attiva Supporto per Sass (o Debug dei fogli di stile Sass, a seconda della versione del browser in uso).

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

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

Se utilizzi Compass, tieni presente che questa funzionalità non supporta ancora la versione pre-release di Sass, quindi non puoi utilizzare il debug 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 di mappa di origine, incorporato in un commento speciale:

/*# sourceMappingURL=<url>; */

Ad esempio, dato 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 il seguente, 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 di origine:

{
  "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 di Chrome semplifica il processo 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.
• UI per avviare e arrestare facilmente il daemon ADB e visualizzare i dispositivi connessi.

Il port forwarding inverso semplifica la connessione di Chrome su Android a un server web in esecuzione sul tuo localhost, cosa che alcuni ambienti di rete rendono difficile senza alcuni trucchi del DNS.

Utilizzo dell'estensione ADB

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

Al termine dell'installazione, in Chrome viene visualizzata un'icona di menu Android grigia. Per avviare ADB, fai clic sull'icona e quindi su Avvia ADB.

Una volta avviato ADB, l'icona del menu diventa verde e mostra 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 esaminare una scheda in DevTools, fai clic sul link "controlla" accanto al relativo URL.

Se non vedi alcun dispositivo collegato, verifica che il dispositivo sia collegato a una porta USB e che il debug USB sia attivato nelle impostazioni di Chrome per Android. Per istruzioni più dettagliate e per la procedura di risoluzione dei problemi, vedi Debug remoto su Android.

Port forwarding inverso (sperimentale)

In genere hai un server web in esecuzione sulla tua macchina di sviluppo locale e vuoi connetterti a quel sito dal tuo dispositivo. Se la macchina di sviluppo e il dispositivo si trovano sulla stessa rete, è facile. Tuttavia, in alcuni casi, ad esempio sulle reti aziendali limitate, questo potrebbe non essere possibile senza alcuni trucchi intelligenti per il DNS. Una nuova funzionalità di Chrome per Android chiamata inoltro alla porta inverso rende tutto più semplice. Il funzionamento consiste nella creazione di una porta TCP di ascolto sul dispositivo che inoltra il traffico tramite USB a una determinata porta TCP sul computer di sviluppo.

Per utilizzare questa funzionalità, avrai bisogno di:

• Chrome 28 o versione successiva installato sul tuo computer di sviluppo
• Chrome per Android Beta installato sul dispositivo
• Android Debug Bridge (estensione ADB di Chrome o SDK Android completo) installato sul computer di sviluppo

Per utilizzare il port forwarding inverso, è necessario che il dispositivo sia connesso per il debug remoto, come descritto in Utilizzare l'estensione ADB. Poi devi abilitare il port forwarding inverso e aggiungere una regola di port forwarding per la tua applicazione.

Innanzitutto, abilita il port forwarding inverso:

1. Apri Chrome sul computer di sviluppo.
2. In about:flags, attiva Attiva esperimenti di Strumenti per sviluppatori e riavvia Chrome.
3. Apri about:inspect. Dovresti visualizzare 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 DevTools che si apre, apri il riquadro Impostazioni.
6. In Esperimenti, attiva Attiva il port forwarding inverso.
7. Chiudi la finestra DevTools e torna a about:inspect.

Quindi aggiungi una regola di port forwarding:

1. Fai di nuovo clic sul link "inspect" (ispeziona) per aprire DevTools e poi apri di nuovo le impostazioni DevTools.
2. Fai clic sulla scheda Port Forwarding.
3. Nel campo Porta dispositivo, inserisci il numero di porta a cui Chrome deve connettersi sul tuo dispositivo Android (il valore predefinito è 8080).
4. Nel campo Target, aggiungi il numero di porta su cui è in esecuzione l'applicazione web sulla 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 forniti dalla tua macchina di sviluppo.

Visualizzazione grafico a fiamme per i profili JavaScript

La nuova visualizzazione Diagramma a fiamme offre una rappresentazione visiva dell'elaborazione JavaScript nel tempo, simile a quella dei riquadri Cronologia e Rete.

L'asse orizzontale è il tempo e l'asse verticale è lo stack di chiamate. Nella parte superiore del riquadro viene visualizzata una panoramica che mostra l'intera registrazione ed è possibile "aumentare lo zoom" su un'area della panoramica selezionandola con il mouse, come mostrato di seguito. La visualizzazione dei dettagli della tempistica si riduce di conseguenza.

Nella visualizzazione dei dettagli, uno stack di chiamate è rappresentato come uno stack di "blocchi" di funzioni. Un blocco posizionato sopra un altro è stato chiamato dal blocco funzione inferiore. Passa il mouse sopra un determinato blocco per visualizzare il nome della funzione e i dati relativi ai tempi:

• Nome: il nome della funzione.
• Tempo autonomo: il tempo necessario per completare la chiamata attuale alla funzione, incluse solo le istruzioni nella funzione stessa, escluse le funzioni che ha chiamato.
• Tempo totale: il tempo necessario per completare la chiamata attuale a questa funzione e alle eventuali funzioni chiamate.
• Tempo autonomo aggregato: il tempo aggregato per tutte le chiamate della funzione attraverso la registrazione, escluse le funzioni richiamate 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 funzione, si apre il file JavaScript che lo contiene nel riquadro Origini, alla riga in cui è stata 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 fiamma.

   

Cinque funzionalità chiave per la misurazione del rendimento

A completare questa indagine sui progressi rivoluzionari in DevTools ci sono diverse nuove funzionalità per l'analisi dei problemi di prestazioni:

• Modalità di pittura continua
• Visualizzazione dei rettangoli di colore e dei bordi del livello
• Misurazione f/s
• Ricerca di layout sincroni forzati (battitura del layout)
• Monitoraggio dell'allocazione di oggetti

Modalità di pittura continua

La modalità di pittura continua è un'opzione disponibile nelle impostazioni di DevTools (Rendering > Attiva ripetizione continua delle pagine) che ti consente di identificare il costo di rendering di singoli elementi o stili CSS.

In genere, Chrome mostra sullo schermo soltanto in risposta a una modifica del layout o dello stile e soltanto le aree dello schermo che richiedono un aggiornamento. Quando attivi la ricolorazione continua delle pagine, l'intero schermo viene continuamente ridipinto. Un avviso mostra il tempo impiegato da Chrome per colorare la pagina, nonché l'intervallo di tempi, nonché un grafico che mostra la distribuzione dei tempi di visualizzazione recenti. La linea orizzontale lungo l'istogramma indica l'indicatore di 16,6 ms.

Il vantaggio di usare questa funzionalità è che puoi percorrere 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 per quanto tempo un elemento o uno stile aggiunge alla pagina il "peso", se presente, notando le modifiche al tempo di visualizzazione della pagina. Se nascondere un singolo elemento riduce significativamente i tempi di colorazione, devi concentrarti sullo stile o sulla costruzione di quell'elemento.

Per attivare la modalità di dolore continuo:

1. Apri le impostazioni di DevTools. 1.Nella scheda Generali, in Rendering, attiva Abilita visualizzazione continua delle pagine.

Per ulteriori informazioni, consulta la sezione Profilazione dei tempi di visualizzazione lunghi con la modalità di visualizzazione continua di DevTools.

Visualizzazione di rettangoli di colore e bordi del livello

Un'altra opzione in DevTools è mostrare su quali regioni rettangolari del display vengono visualizzate. (Impostazioni > Rendering > Mostra rettangoli colorati). Ad esempio, nello screenshot sotto, un rettangolo di pittura viene disegnato sopra l'area in cui era stato applicato un effetto di passaggio del mouse CSS alla grafica viola. Questo va bene, poiché si tratta di una parte relativamente piccola dello schermo.

È consigliabile evitare pratiche di progettazione e sviluppo che causino la ricolorazione dell'intero display. Ad esempio, nello screenshot seguente l'utente sta scorrendo la pagina. Un rettangolo di colore circonda la barra di scorrimento, mentre un altro circonda il resto della pagina. In questo caso la causa è l'immagine di sfondo dell'elemento body. La posizione dell'immagine è impostata su Fissa in CSS, il che richiede a Chrome di ridipingere l'intera pagina a ogni scorrimento.

Misurazione f/s

Lo strumento di misurazione f/s mostra la frequenza fotogrammi corrente, la frequenza fotogrammi minima e massima della pagina, un grafico a barre che mostra la frequenza fotogrammi nel tempo e un istogramma che mostra la variabilità della frequenza frame.

Per visualizzare l'indicatore f/s:

1. Apri le impostazioni di DevTools.
2. Fai clic su Generali.
3. Nella sezione Rendering, attiva Compositing con accelerazione forzata e Mostra misuratore f/s.

Puoi forzare la visualizzazione sempre dello strumento di misurazione FPS aprendo about:flags, attivando il contatore FPS e riavviando Chrome.

Ricerca di layout sincroni forzati (battitura del layout)

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

La registrazione della sequenza temporale ti avvisa quando rileva un layout sincrono forzato con un'icona di avviso gialla accanto al record corrispondente nella sequenza temporale. Passa il mouse sopra uno di questi record per visualizzare le analisi dello stack relative al codice che ha invalidato il layout e al codice che lo ha forzato.

Questo popup mostra anche il numero di nodi che hanno richiesto il layout, le dimensioni dell'albero di re-layout, l'ambito del layout e la radice del layout.

Per ulteriori informazioni, consulta Demo della sequenza temporale: diagnostica dei layout sincroni forzati.

Monitoraggio dell'allocazione di oggetti

Il monitoraggio dell'allocazione degli oggetti è un nuovo tipo di profilo di memoria che mostra l'allocazione nel tempo. Quando avvii il monitoraggio dell'allocazione, DevTools acquisisce gli snapshot dell'heap in modo continuo nel tempo. Il profilo di allocazione 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. Una volta completata la raccolta dei dati, fai clic su Interrompi registrazione profilo heap (il cerchio rosso nell'angolo in basso a sinistra del riquadro Profilazione).

Profilazione canvas (sperimentale)

Infine, ecco una funzionalità completamente sperimentale da esplorare. La profilazione di Canvas consente di registrare e riprodurre chiamate WebGL effettuate su un elemento canvas. Puoi spostarti tra singole chiamate o gruppi di chiamate WebGL per vedere i risultati visualizzati. Viene visualizzato anche il tempo impiegato per riprodurre queste chiamate specifiche.

Per utilizzare la profilazione di canvas:

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