Novità di DevTools (Chrome 72)

Kayce Basques
Kayce Basques
X GitHub

Le nuove funzionalità e le modifiche principali in arrivo in Chrome DevTools nella versione 72 di Chrome includono:

Versione video di queste note di rilascio

Visualizzare le metriche sul rendimento

Dopo aver registrato il caricamento di una pagina, DevTools ora contrassegna le metriche sulle prestazioni come DOMContentLoaded e First Meaningful Paint nella sezione Tempistiche.

First Meaningful Paint nella sezione Timing

Figura 1. First Meaningful Paint nella sezione Timing

Evidenziare i nodi di testo

Quando passi il mouse sopra un nodo di testo nell'albero DOM, DevTools ora evidenzia quel nodo di testo nella viewport.

Evidenziazione di un nodo di testo

Figura 2. Evidenziazione di un nodo di testo

Copia percorso JS

Supponiamo che tu stia scrivendo un test di automazione che prevede di fare clic su un nodo (utilizzando la funzione page.click() di Puppeteer, ad esempio) e che tu voglia ottenere rapidamente un riferimento a quel nodo DOM. Il flusso di lavoro abituale consiste nell'andare al riquadro Elementi, fare clic con il tasto destro del mouse sul nodo nell'albero DOM, selezionare Copia > Copia selettore e poi passare il selettore CSS a document.querySelector(). Tuttavia, se il nodo si trova in un DOM ombra, questo approccio non funziona perché il selettore genera un percorso dall'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 percorso JS. DevTools copia negli appunti un'espressione document.querySelector() che punta al nodo. Come accennato in precedenza, questa funzionalità è particolarmente utile quando si lavora con Shadow DOM, ma puoi utilizzarla per qualsiasi nodo DOM.

Copia percorso JS

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 riquadro Controlli

Il riquadro Controlli ora esegue Lighthouse 3.2. La versione 3.2 include un nuovo controllo chiamato Librerie JavaScript rilevate. Questo controllo elenca le librerie JS che Lighthouse ha rilevato nella pagina. Puoi trovare questo controllo nel report in Best practice > Controlli superati.

Librerie JavaScript rilevate

Figura 4. Librerie JavaScript rilevate

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

Digitare "lighthouse" nel menu dei comandi

Figura 5. Digitazione di 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 di anteprima ti consentono di accedere alle funzionalità più recenti di DevTools, testare le API della piattaforma web all'avanguardia e trovare problemi sul tuo sito prima che lo facciano i tuoi utenti.

Contatta il team di Chrome DevTools

Utilizza le seguenti opzioni per discutere delle nuove funzionalità, degli aggiornamenti o di qualsiasi altro argomento relativo a DevTools.

Novità di DevTools

Un elenco di tutti gli argomenti trattati nella serie Novità di DevTools.