Questa pagina è stata tradotta dall'API Cloud Translation.

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, incluso un nuovo controllo che rileva le librerie JS e nuove parole chiave per l'accesso al riquadro Controlli dal menu dei comandi.

Versione video di queste note di rilascio

Visualizza le metriche sul rendimento

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

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 nell'area visibile.

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 (ad esempio utilizzando la funzione page.click() di Puppeteer) e di voler ottenere rapidamente un riferimento a quel nodo DOM. Il flusso di lavoro abituale prevede di accedere al riquadro Elementi, fare clic con il tasto destro del mouse sul nodo nella struttura DOM, selezionare Copia > Copia selettore e passare il selettore CSS a document.querySelector(). Tuttavia, se il nodo si trova in un Shadow DOM, questo approccio non funziona perché il selettore restituisce un percorso dall'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 punta al nodo. 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 pannello di controllo

Nel riquadro Controlli è ora in esecuzione Lighthouse 3.2. La versione 3.2 include un nuovo controllo denominato Librerie JavaScript rilevate. Questo controllo elenca le librerie JS rilevate da Lighthouse nella pagina. Questo controllo è disponibile nel report in Best practice > Controlli superati.

Librerie JavaScript rilevate

Figura 4. Librerie JavaScript rilevate

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

Digita "faro" nel menu di comando.

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 di anteprima ti consentono di accedere alle ultime funzionalità di DevTools, di testare le API delle piattaforme web all'avanguardia e di 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 usando 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.