Chrome DevTools si evolve rapidamente e volevamo richiamare la tua attenzione su alcune nuove funzionalità e miglioramenti che abbiamo introdotto in alcuni componenti. Nello specifico, parleremo di alcune modifiche all'interfaccia utente, alla profilazione JS ad alta risoluzione e alle nuove funzionalità di Workspaces.
- Il profiling ad alta risoluzione ora raggiunge una precisione di 0,1 millisecondi
- Le barre degli strumenti sono state spostate nella parte superiore di DevTools e le sostituzioni sono state spostate nel riquadro della console
- Agli spazi di lavoro sono state aggiunte diverse funzionalità per supportare l'aggiunta/rimozione/ricerca di file
Profilazione ad alta risoluzione
Il profiling della CPU è una funzionalità molto utile per verificare l'efficienza di JavaScript. Oltre alle visualizzazioni dei profili tradizionali, abbiamo introdotto un grafico a forma di fiamma quest'estate, che rappresenta visivamente l'elaborazione di JavaScript di una pagina nel tempo. Può essere utilizzato per visualizzare facilmente la profondità dello stack di chiamate e il tempo di elaborazione delle singole funzioni.
Fino a poco tempo fa, sia le rappresentazioni tradizionali Heavy (dal basso verso l'alto) e Tree (dall'alto verso il basso), sia il grafico a forma di fiamma mostravano i processi solo con una precisione di 1 millisecondo. Per la maggior parte delle applicazioni, va bene. Tuttavia, se lavori a un progetto in cui la velocità è fondamentale nell'interfaccia utente, come un gioco, una risoluzione di 1 millisecondo potrebbe essere troppo approssimativa per ottenere risultati significativi in merito ai motivi per cui il tuo sito è lento o la tua UI sembra avere dei ritardi. Per attivare il profiling ad alta risoluzione (attualmente solo Canary):
- Apri le impostazioni di DevTools.
- Nella scheda Generale, in Profiler, attiva Profiling della CPU ad alta risoluzione.
Ecco un esempio di fiamma visualizzato durante il normale profiling e con alta risoluzione, in cui viene eseguito il profiling del caricamento della home page di HTML5Rocks.com:
Con la normale risoluzione del profilo, il tempo di elaborazione viene sempre arrotondato per eccesso al millisecondo successivo, pertanto un processo che richiede solo 0,1 millisecondi o meno viene comunque registrato come se richiedesse 1,0 millisecondi e altri processi potrebbero non essere affatto visualizzati nello stack chiamate.
Il profiling ad alta risoluzione ha un overhead elevato nella VM JavaScript, motivo per cui è disattivato per impostazione predefinita. Sebbene sia sicuramente più interessante della normale risoluzione del profilo, ti consigliamo di utilizzarla solo se hai davvero bisogno di precisione.
Miglioramenti all'interfaccia utente di DevTools
Anche se in Canary vengono sempre implementate nuove funzionalità, volevamo richiamare la tua attenzione su alcune modifiche sostanziali all'interfaccia utente: i pulsanti che si spostano nella parte superiore dell'interfaccia utente in generale, i riquadri di navigazione e di informazioni della cronologia e il trasferimento delle sostituzioni nel riquadro laterale della console.
Innanzitutto, diamo un'occhiata a cosa stiamo parlando. Dato che parliamo di Spostamenti, proverò a risolvere i primi due problemi con una coppia di screenshot. Ecco come appare Spostamenti in Chrome (versione stabile) al momento:
Ecco come appare ora Spostamenti.
Tieni presente quanto segue:
- Le barre degli strumenti e i pulsanti ora si trovano nella parte superiore dello schermo, sia per quelle specifiche di Spostamenti a sinistra sia per quelle generali di DevTools a destra.
- Ora i record della cronologia hanno la loro struttura di nidificazione nel riquadro a sinistra e puoi persino utilizzare la tastiera per scorrerli. Oltre a utilizzare i tasti SU e GIÙ per scorrere verso l'alto e verso il basso, puoi anche utilizzare i tasti Freccia sinistra e Freccia destra per aprire e chiudere i record nidificati.
- I dettagli relativi all'ora vengono ora visualizzati in un riquadro a destra per la voce selezionata. Puoi anche passare il mouse sopra altre voci per visualizzarne le informazioni.
Ora diamo un'occhiata al riquadro della console. Per aprire il riquadro della console, premi
Esc da DevTools o premi il pulsante del riquadro della console 
e il riquadro si arrotola dal basso.
Per impostazione predefinita, sono presenti le schede Console e Ricerca. Per accedere alla funzionalità precedentemente nota come Sostituzioni, apri le impostazioni di DevTools e seleziona la casella accanto a "Mostra la visualizzazione "Emulazione" nel riquadro della console". Chiudi la finestra delle impostazioni e vedrai una scheda Emulazione nel riquadro della console, come nello screenshot riportato di seguito:
e puoi eseguire tutte le emulazioni.
Il motivo di questa modifica è che in precedenza dovevi aprire e chiudere le Impostazioni per modificare le sostituzioni dell'emulazione, quindi tornare indietro e visualizzare la pagina. Ora puoi modificare le sostituzioni di emulazione continuando a manipolare gli stili.
Aree di lavoro migliorate
Gli spazi di lavoro, in particolare, sono una funzionalità che può semplificare notevolmente il flusso di lavoro di creazione dei contenuti, eppure non riceve l'attenzione che merita. Con gli spazi di lavoro, anziché eseguire esperimenti e apportare modifiche in DevTools e dover copiare e incollare le modifiche nei file di origine, puoi apportare modifiche in DevTools, visualizzarle nel browser e salvarle in una versione locale persistente dei file, il tutto senza uscire da Chrome.
Se non hai ancora letto l'articolo Chrome Developer Tools Revolutions 2013, dai un'occhiata e poi torna qui per scoprire come abbiamo migliorato queste funzionalità negli ultimi mesi.
Aggiunta di file più facile
Al momento della pubblicazione dell'articolo Revolutions 2013, la creazione di una nuova area di lavoro richiedeva l'aggiunta della cartella alle aree di lavoro e la successiva mappatura della cartella a una risorsa di rete. Abbiamo semplificato questa procedura in un unico passaggio: fai clic con il tasto destro del mouse nel riquadro a sinistra delle origini e seleziona Aggiungi cartella allo spazio di lavoro. Viene visualizzata una finestra di dialogo del file in cui puoi scegliere una nuova cartella da aggiungere ai tuoi spazi di lavoro. La cartella attualmente evidenziata non viene aggiunta agli Workspace.
Creazione e rimozione di file
Ora puoi aggiungere nuovi file alla directory locale che utilizzi per gli spazi di lavoro all'interno degli stessi spazi di lavoro. Basta fare clic con il tasto destro del mouse su una cartella nel riquadro Origini a sinistra e selezionare Nuovo file.
Puoi anche rimuovere i file da Workspaces. Fai clic con il tasto destro del mouse su un file nel riquadro Origini a sinistra e seleziona Elimina file.
Puoi anche duplicare un file selezionando Duplica file.
Aggiorna
Ora che puoi creare nuovi file (o eliminarli) direttamente negli spazi di lavoro, anche la directory Origini verrà aggiornata automaticamente e mostrerà questi nuovi file. In caso contrario, puoi sempre fare clic con il tasto destro del mouse su una cartella e selezionare Aggiorna dal menu popup per forzare un aggiornamento.
Questa opzione è utile anche se modifichi i file aperti in un altro editor e vuoi che le modifiche vengano visualizzate in DevTools.
Cerca in più file
Abbiamo perfezionato un po' l'interfaccia per la ricerca nei file e ora puoi anche cercare stringhe in tutti i file delle tue aree di lavoro, nonché in tutti i file caricati in DevTools. Puoi cercare una stringa o un'espressione regolare e rileviamo ogni occorrenza in ogni file o pagina. Per cercare in più file in Workspaces (attualmente in Canary):
- Apri il riquadro della console premendo il tasto Esc e fai clic sulla scheda Ricerca accanto a Console per aprire la finestra di ricerca
OPPURE
Premi Ctrl + Shift + F (Cmd + Opt + F su Mac) per aprire la finestra di ricerca.
- Digita la query nella casella Origini di ricerca e premi Invio. Se la query è un'espressione regolare o deve essere insensibile alle maiuscole, fai clic sulla casella appropriata.
Elenchi di elementi da ignorare
La ricerca nel testo dei file o il filtro dei nomi file può diventare molto tediosa se hai una serie di file .git o README.md che ingombrano i risultati.
Di conseguenza, abbiamo aggiunto una funzionalità di elenco di ignorati in Workspaces per consentirti di escludere determinati tipi di file o cartelle durante la visualizzazione e la ricerca nello spazio di lavoro.
Ecco come visualizzare e modificare l'elenco ignorato condiviso corrente in Workspaces:
- Apri le Impostazioni di DevTools.
- Fai clic su Area di lavoro.
- In Comuni, nella casella Pattern di esclusione della cartella, puoi visualizzare e/o modificare i pattern.
Sono disponibili i seguenti pattern di esclusione globale predefiniti:
Questa regex esclude i metadati di Git, SVN, Mercurial, i file di progetto di Eclipse e IntelliJ, i file OS X DS_Store e Trash e alcune altre cose che vale la pena ignorare, come la cache di Sass. L'intera cartella, incluse eventuali cartelle secondarie, viene esclusa dall'interfaccia utente e non viene visualizzata quando si eseguono ricerche tra i file.
Elenchi di ignoramenti specifici per lo spazio di lavoro
Per specificare ulteriormente, puoi anche scegliere di escludere file e cartelle all'interno del tuo spazio di lavoro specifico per ridurre il numero di risultati nelle ricerche. Le cartelle escluse non verranno visualizzate nemmeno nella directory delle origini.
Per escludere un'intera cartella dallo spazio di lavoro, fai clic con il tasto destro del mouse sulla cartella nel riquadro Origini a sinistra e seleziona Escludi cartella. Per visualizzare le mappature e le cartelle escluse per una determinata cartella dello spazio di lavoro:
- Apri le impostazioni di DevTools.
- Fai clic su Area di lavoro.
- Evidenzia la cartella che ti interessa.
- Fai clic su Modifica e viene visualizzata la finestra "Modifica file system". Da questa finestra puoi aggiungere o rimuovere mappature e/o cartelle escluse.
