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

Evidenzia 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 (ad esempio utilizzando la funzione page.click() di Puppeteer) 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 tasto 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, questa funzionalità è particolarmente utile quando si lavora con Shadow DOM, ma puoi usarla 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 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 di anteprima

Valuta la possibilità di utilizzare 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 i tuoi utenti.

Contatta il team di Chrome DevTools

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

Novità di DevTools

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