Chrome DevTools si sposta rapidamente e volevamo attirare la tua attenzione su alcune nuove funzionalità e alcuni miglioramenti che abbiamo introdotto per alcuni componenti. Parleremo di alcune modifiche dell'interfaccia utente, della profilazione JS ad alta risoluzione e delle nuove funzionalità di Workspace.
- La profilazione ad alta risoluzione ora raggiunge una precisione di 0,1 millisecondo
- Le barre degli strumenti si trovavano in cima a DevTools e le sostituzioni sono state spostate nel riquadro a scomparsa della console
- Workspace ha aggiunto diverse funzionalità per supportare l'aggiunta, la rimozione e la ricerca di file
Profilazione ad alta risoluzione
La profilazione della CPU è una funzionalità molto utile per verificare l'efficienza di JavaScript. Oltre alle tradizionali visualizzazioni del profilo, quest'estate abbiamo introdotto un grafico a fiamme, che rappresenta visivamente l'elaborazione JavaScript di una pagina nel tempo. Può essere utilizzato per visualizzare facilmente la profondità dell'andamento dello stack di chiamate, nonché il tempo necessario per l'elaborazione delle singole funzioni.
Fino a poco tempo fa, sia la tradizionale rappresentazione pesante (dal basso verso l'alto) che quella ad albero (dall'alto verso il basso), nonché il diagramma a fiamme, mostravano i processi con una precisione di 1 millisecondo. Per la maggior parte delle applicazioni, questo non è un problema. Tuttavia, se ti stai occupando di qualcosa in cui la velocità è davvero importante nell'interfaccia utente, come un gioco, la risoluzione di 1 millisecondo potrebbe essere troppo complessa per ottenere risultati significativi per la lentezza del tuo sito o per l'aspetto lento dell'interfaccia utente. Per abilitare la profilazione ad alta risoluzione (attualmente solo canary):
- Apri le impostazioni di DevTools.
- Nella scheda Generale, in Profiler, attiva Profilazione della CPU ad alta risoluzione.
Ecco un esempio di un diagramma a fiamma visto in una normale profilazione e ad alta risoluzione, in cui profiliamo il caricamento della home page di HTML5Rocks.com:
Con la normale risoluzione della profilazione, il tempo di processo viene sempre arrotondato al millisecondo successivo, di conseguenza un processo che richiede solo 0,1 millisecondi o meno viene segnalato come che richiede 1,0 millisecondi e gli altri processi potrebbero non essere visualizzati affatto nello stack di chiamate.
La profilazione ad alta risoluzione ha un overhead elevato nella VM JavaScript, motivo per cui è disattivata per impostazione predefinita. Anche se la risoluzione dei profili sembra essere più fresca del normale, ti consigliamo di utilizzarlo solo se hai davvero bisogno della precisione.
Miglioramenti all'interfaccia utente di DevTools
Anche se ci sono sempre novità in fase di implementazione in Canary, abbiamo voluto richiamare la tua attenzione su alcune importanti modifiche all'interfaccia utente: i pulsanti che si trovano nella parte superiore dell'interfaccia utente in generale, i riquadri informativi e di navigazione della sequenza temporale e lo spostamento degli override nel riquadro a scomparsa della console.
Per prima cosa, diamo un'occhiata alla nostra provenienza. Dato che stiamo comunque parlando di Spostamenti, cercherò di uccidere i primi due uccelli con un paio di screenshot. Ecco l'aspetto attuale di Spostamenti in Chrome (stabile):
Ecco l'aspetto attuale di Spostamenti.
Tieni presente quanto segue:
- Le barre degli strumenti e i pulsanti si trovano ora nella parte superiore dello schermo, sia per le specifiche Spostamenti a sinistra sia per quelle generali DevTools a destra.
- Ora i record degli Spostamenti hanno la struttura nidificata nel riquadro a sinistra, che possono essere visualizzati da una tastiera per scorrere. Oltre a usare i tasti SU e GIÙ per scorrere verso l'alto e verso il basso, puoi anche usare i tasti Freccia sinistra e destra per aprire e chiudere i record nidificati.
- I dettagli relativi all'orario sono ora visualizzati in un riquadro sulla destra per qualsiasi voce selezionata. Puoi anche passare il mouse sopra altre voci per visualizzare le relative informazioni.
Ora diamo un'occhiata al riquadro a scomparsa della console. Per aprire il riquadro a scomparsa della console, premi
Esc dall'interno di DevTools o premi il pulsante del riquadro a scomparsa della console
per far ruotare il cassetto dal basso verso l'alto.
Per impostazione predefinita, sono disponibili le schede Console e Ricerca. Per accedere alla funzionalità precedentemente nota come Override, apri le impostazioni DevTools e seleziona la casella accanto a "Mostra la visualizzazione 'Emulazione' nel riquadro a scomparsa della console". Chiudi la finestra delle impostazioni. Visualizzerai una scheda Emulazione nel riquadro a scomparsa della console, come mostrato in questo screenshot:
Qui puoi eseguire tutta la tua emulazione.
Il motivo di questa modifica è che prima era necessario accedere e uscire dalle Impostazioni per modificare gli override di emulazione, quindi tornare indietro e visualizzare la pagina. Ora puoi modificare gli override di emulazione mentre modifichi gli stili.
Aree di lavoro migliorate
Workspace in particolare è una funzionalità che può semplificare un po' il flusso di lavoro di creazione eppure non riceve tanto l'amore quanto merita. Con Workspace, invece di sperimentare e apportare modifiche in DevTools e dover copiare e incollare le modifiche nei file di origine, puoi apportarle in DevTools, vederle visualizzate nel browser e salvarle in una versione locale permanente dei tuoi file, il tutto senza uscire da Chrome.
Se non hai ancora letto l'articolo Rivoluzione degli strumenti per sviluppatori di Chrome nel 2013, dai un'occhiata a questo articolo e torna qui per scoprire come abbiamo migliorato queste funzionalità negli ultimi mesi.
Aggiunta di file più semplice
Ai tempi dell'articolo Revolutions 2013, per creare una nuova area di lavoro era necessario aggiungere la cartella alle aree di lavoro e poi mapparla a una risorsa di rete. Abbiamo semplificato questo processo in un unico passaggio: basta fare clic con il tasto destro del mouse nel riquadro a sinistra delle Origini e selezionare Aggiungi cartella all'area di lavoro. Viene visualizzata una finestra di dialogo del file in cui puoi scegliere una nuova cartella da aggiungere agli spazi di lavoro. La cartella attualmente evidenziata non viene aggiunta alle tue Aree di lavoro.
Creazione e rimozione di file
Ora puoi aggiungere nuovi file alla directory locale che stai utilizzando per le aree di lavoro all'interno delle aree di lavoro stesso. Fai clic con il tasto destro del mouse su una cartella nel riquadro Origini e seleziona Nuovo file.
Puoi anche rimuovere file dall'interno delle aree di lavoro. 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 eliminare file) direttamente nelle aree di lavoro, 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 operazione è utile anche se cambi i file aperti in un altro editor e vuoi che le modifiche vengano visualizzate in DevTools.
Cerca nei file
Abbiamo perfezionato l'interfaccia per la ricerca nei file. Ora puoi anche cercare stringhe in tutti i file delle aree di lavoro e in tutti i file caricati in DevTools. Puoi cercare una stringa o un'espressione regolare, così facciamo corrispondere ogni occorrenza in ogni file o pagina. Per cercare più file in Workspace (attualmente in Canary):
- Apri il riquadro a scomparsa della console premendo il tasto Esc e fai clic sulla scheda Cerca accanto alla console per aprire la finestra di ricerca.
OR
Premi Ctrl + Shift + F (Cmd + Opt + F su Mac) per aprire la finestra di ricerca.
- Digita la query nella casella Sorgenti di ricerca e premi Invio. Se la query è un'espressione regolare o non deve fare distinzione tra maiuscole e minuscole, fai clic sulla casella appropriata.
Ignora elenchi
Cercare nel testo dei file o filtrare i nomi dei file può diventare molto noiosa se hai molti file .git o README.md che ingombrano i risultati.
Abbiamo quindi aggiunto una funzionalità per l'elenco degli elementi da ignorare in Workspace, in modo che tu possa escludere determinati tipi di file o cartelle quando visualizzi e cerchi l'area di lavoro.
Ecco come visualizzare e modificare l'attuale elenco di elementi da ignorare in Workspace:
- Apri le Impostazioni di DevTools.
- Fai clic su Area di lavoro.
- In Comune, nella casella Pattern di esclusione delle cartelle, puoi visualizzare e/o modificare i pattern.
Spediamo con questi pattern di esclusione globale predefiniti:
Questa regex esclude i metadati da Git, SVN, Mercurial, file di progetto da Eclipse e IntelliJ, OS X DS_Store e file del cestino e alcuni altri elementi che vale la pena ignorare, come la cache di Sass. L'intera cartella, inclusi gli eventuali asset secondari, viene esclusa dall'interfaccia utente in modo da non essere visualizzata nell'interfaccia e non quando si esegue la ricerca nei file.
Elenchi di elementi da ignorare specifici per Workspace
Per specificare ulteriori dettagli, puoi anche scegliere di escludere file e cartelle all'interno della tua specifica area di lavoro per ridurre il disordine nelle ricerche. Le cartelle escluse non verranno visualizzate nemmeno nella directory di origine.
Per escludere un'intera cartella dall'area 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 dell'area di lavoro:
- Apri le impostazioni di DevTools.
- Fai clic su Area di lavoro.
- Evidenzia la cartella che ti interessa.
- Fai clic su Modifica. Viene visualizzata la finestra "Modifica file system", in cui puoi aggiungere o rimuovere mappature e/o cartelle escluse da questa finestra.
