Novità di DevTools (Chrome 72)

Kayce Basques

Le nuove funzionalità e le modifiche principali che verranno introdotte in Chrome DevTools in Chrome 72 includono:

Versione video di queste note di rilascio

Visualizzare le metriche sul rendimento

Dopo aver registrato un caricamento pagina, DevTools ora contrassegna le metriche sul rendimento come DOMContentLoaded e First Meaningful Paint nella sezione Tempistiche.

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 lo evidenzia nel visualizzatore.

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 il clic su un nodo (utilizzando la funzione page.click() di Puppeteer, ad esempio) e tu voglia ottenere rapidamente un riferimento a quel nodo DOM. Il flusso di lavoro consueto consiste nel passare 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 restituisce un percorso all'interno dell'albero ombra.

Per ottenere rapidamente un riferimento a un nodo DOM, fai clic con il pulsante destro del mouse sul nodo DOM e seleziona Copia > Copia percorso JS. DevTools copia negli appunti un'espressione document.querySelector() che fa riferimento al node. Come accennato in precedenza, questo è particolarmente utile quando si lavora con Shadow DOM, ma puoi utilizzarlo 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

Nel riquadro Controlli è ora in esecuzione Lighthouse 3.2. La versione 3.2 include un nuovo controllo chiamato Librerie JavaScript rilevate. Questo controllo elenca le librerie JS rilevate da Lighthouse 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 di comando digitando Lighthouse o PWA.

Digitare "lighthouse" nel menu dei comandi

Figura 5. Digitare 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, di testare API di piattaforme web all'avanguardia e di trovare i problemi sul tuo sito prima che lo facciano gli utenti.

Contatta il team di Chrome DevTools

Utilizza le seguenti opzioni per discutere delle nuove funzionalità, degli aggiornamenti o di qualsiasi altra cosa relativa a DevTools.

Novità di DevTools

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