Novità di DevTools (Chrome 72)

Kayce Basques

Le nuove funzionalità e i cambiamenti principali in arrivo in Chrome DevTools in Chrome 72 includono:

• Visualizza le metriche sul rendimento nel riquadro Rendimento.
• Evidenzia i nodi di testo nell'albero DOM.
• Copia il percorso JS su un nodo DOM dalla struttura DOM.
• Aggiornamenti del pannello di controllo, compreso un nuovo controllo che rileva le librerie JS e nuove parole chiave per accedendo al riquadro Controlli dal menu Comandi.

Versione video di queste note di rilascio

Visualizza le metriche sul rendimento

Dopo aver registrato un caricamento pagina, DevTools ora contrassegna metriche sulle prestazioni come DOMContentLoaded e First Meaningful Paint nella sezione Tempi.

Figura 1. First Meaningful Paint nella sezione Tempi

Evidenziare i nodi di testo

Quando passi il mouse sopra un nodo di testo nell'albero DOM, DevTools ora evidenzia tale nodo di testo nel area visibile.

Figura 2. Evidenziazione di un nodo di testo

Copia percorso JS

Supponiamo che tu stia scrivendo un test di automazione che prevede il clic su un nodo (utilizzando lo strumento page.click(), forse) e vuoi ottenere rapidamente un riferimento a quel nodo DOM. La il flusso di lavoro abituale consiste nell'accedere al riquadro Elementi, fare clic con il tasto destro del mouse sul nodo nell'albero DOM, selezionare Copia > Copia selettore, quindi passa il selettore CSS a document.querySelector(). Ma se Se il nodo si trova in un Shadow DOM, questo approccio non funziona perché il selettore restituisce un percorso da all'interno dell'albero ombra.

Per ottenere rapidamente un riferimento a un nodo DOM, fai clic con il tasto destro del mouse sul nodo DOM e seleziona Copia > Copia JS del tuo percorso di apprendimento. DevTools copia negli appunti un'espressione document.querySelector() che rimanda allo nodo. Come accennato in precedenza, questo è particolarmente utile quando si lavora con Shadow DOM, ma puoi usare per qualsiasi nodo DOM.

Figura 3. Copia percorso JS

DevTools copia negli appunti un'espressione come quella riportata di seguito:

document.querySelector('#demo1').shadowRoot.querySelector('p:nth-child(2)')

Aggiornamenti del pannello di controllo

Nel riquadro Controlli è ora in esecuzione Lighthouse 3.2. La versione 3.2 include un nuovo controllo chiamato Librerie JavaScript rilevate. Questo controllo elenca quali librerie JS sono state rilevate da Lighthouse della pagina. Puoi trovare questo controllo nel report in Best practice > Controlli superati.

Figura 4. Librerie JavaScript rilevate

Inoltre, ora puoi accedere al riquadro Controlli dal menu Comando digitando Lighthouse o PWA.

Figura 5. Digita lighthouse nel menu dei comandi

Scaricare i canali in anteprima

Prendi in considerazione l'utilizzo di Chrome Canary, Dev o Beta come browser di sviluppo predefinito. Questi canali in anteprima ti consentono di accedere alle funzionalità più recenti di DevTools, testare le API delle piattaforme web all'avanguardia e individuare i problemi sul tuo sito prima che lo facciano gli utenti.

Contattare il team di Chrome DevTools

Utilizza le seguenti opzioni per discutere delle nuove funzionalità e modifiche nel post o di qualsiasi altra informazione relativa a DevTools.

• Inviaci un suggerimento o un feedback tramite crbug.com.
• Segnala un problema di DevTools utilizzando Altre opzioni   > Guida > Segnala un problema di DevTools in DevTools.
• Invia un tweet all'indirizzo @ChromeDevTools.
• Lascia commenti sulle novità nei video di YouTube di DevTools o nei video di YouTube dei suggerimenti di DevTools.

Novità di DevTools

Un elenco di tutto ciò che è stato trattato nella serie Novità di DevTools.