Novità di DevTools (Chrome 85)

Jecelyn Yeen

Modifica dello stile per i framework CSS-in-JS

Il riquadro Stili ora supporta meglio la modifica degli stili creati con le API CSS Object Model (CSSOM). Molti framework e librerie CSS-in-JS utilizzano le API CSSOM per costruire gli stili.

Ora puoi anche modificare gli stili aggiunti in JavaScript utilizzando i fogli di stile costruibili. I fogli di stile costruibili sono un nuovo modo per creare e distribuire stili riutilizzabili quando si utilizza Shadow DOM.

Ad esempio, gli stili h1 aggiunti con CSSStyleSheet (API CSSOM) non erano modificabili in precedenza. Ora sono modificabili nel riquadro Stili:

Problema di Chromium #946975

Lighthouse 6 nel pannello Lighthouse

Il riquadro Lighthouse ora esegue Lighthouse 6. Consulta l'articolo Novità di Lighthouse 6.0 per un riepilogo di tutte le modifiche principali oppure le note di rilascio della versione 6.0.0 per un elenco completo di tutte le modifiche.

Lighthouse 6.0 introduce tre nuove metriche nel report: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) e Total Blocking Time (TBT). LCP e CLS sono due delle nuove metriche di Core Web Vitals di Google, mentre TBT è un proxy di misurazione di laboratorio per un'altra metrica di Core Web Vitals, First Input Delay.

La formula del punteggio di rendimento è stata anche ponderata nuovamente per riflettere meglio l'esperienza di caricamento degli utenti.

Nuove metriche sul rendimento in Lighthouse 6.0

Problema di Chromium #772558

Ritiro di First Meaningful Paint (FMP)

First Meaningful Paint (FMP) è ritirato in Lighthouse 6.0. È stato rimosso anche dal pannello Rendimento. Largest Contentful Paint è la metrica consigliata in sostituzione di FMP. Consulta la sezione First Meaningful Paint per una spiegazione del motivo per cui è stata ritirata.

Problema di Chromium #1096008

Supporto per nuove funzionalità JavaScript

Gli strumenti di sviluppo ora supportano meglio alcune delle funzionalità più recenti del linguaggio JavaScript:

  • Completamento automatico della sintassi di concatenamento opzionale: il completamento automatico delle proprietà nella console ora supporta la sintassi di concatenamento opzionale, ad esempio name?. ora funziona oltre a name. e name[.
  • Evidenziazione della sintassi per i campi privati: i campi delle classi private ora sono evidenziati correttamente nella sintassi e formattati in modo leggibile nel riquadro Sources.
  • Evidenziazione della sintassi per l'operatore di coalescenza nullish: DevTools ora stampa correttamente l'operatore di coalescenza nullish nel riquadro Origini.

Problemi di Chromium #1083214, #1073903, #1083797

Nuovi avvisi relativi alle scorciatoie dell'app nel riquadro Manifest

Le scorciatoie delle app aiutano gli utenti ad avviare rapidamente attività comuni o consigliate all'interno di un'app web.

Il riquadro Manifest ora mostra avvisi se:

  • le icone delle scorciatoie delle app sono più piccole di 96 x 96 pixel
  • le icone delle scorciatoie delle app e le icone manifest non sono quadrate (in quanto verranno ignorate)

Avvisi relativi alle scorciatoie delle app

Problema di Chromium #955497

Eventi respondWith del service worker nella scheda Timing

La scheda Tempistiche del riquadro Rete ora include gli eventi respondWith del service worker. respondWith è il tempo che intercorre tra l'esecuzione del gestore eventi fetch del service worker e il momento in cui la promessa respondWith del gestore fetch viene risolta.

service worker `respondWith`

Problema di Chromium #1066579

Visualizzazione coerente del riquadro Calcolato

Il riquadro Calcolato nel riquadro Elementi ora viene visualizzato in modo coerente come riquadro in tutte le dimensioni della finestra. In precedenza, il riquadro Calcolato veniva unito al riquadro Stili quando la larghezza dell'area visibile di DevTools era ridotta.

Problema di Chromium #1073899

Offset del bytecode per i file WebAssembly

Ora DevTools utilizza gli offset del bytecode per visualizzare i numeri di riga del disassemblaggio Wasm. In questo modo è più chiaro che stai esaminando dati binari ed è più coerente con il modo in cui il runtime Wasm fa riferimento alle posizioni.

Offset del bytecode

Problema di Chromium #1071432

Copia e taglio riga per riga nel riquadro Origini

Quando esegui un'operazione di copia o taglio senza selezione nell'editor del riquadro Origini, DevTools copia o taglia i contenuti della riga corrente. Ad esempio, nel video qui sotto, il cursore si trova alla fine della riga 1. Dopo aver premuto la scorciatoia da tastiera per tagliare, l'intera riga viene copiata negli appunti e eliminata.

Problema di Chromium #800028

Aggiornamenti delle impostazioni della console

Separa i messaggi della stessa console

L'opzione Raggruppa i messaggi simili nelle impostazioni della console ora si applica ai messaggi duplicati. In precedenza, si applicava solo a messaggi simili.

Ad esempio, in precedenza DevTools non raggruppava i messaggi hello anche se l'opzione Raggruppa simili non è selezionata. Ora i hello messaggi non sono più raggruppati:

Problema di Chromium #1082963

Mantenere le impostazioni di Solo contesto selezionato

Le impostazioni Solo contesto selezionato in Impostazioni console ora vengono mantenute. In precedenza, le impostazioni venivano reimpostate ogni volta che chiudevi e riaprivi DevTools. Questa modifica rende il comportamento dell'impostazione coerente con le altre opzioni delle impostazioni della console.

Solo contesto selezionato

Problema di Chromium #1055875

Aggiornamenti al riquadro Prestazioni

Informazioni sulla cache di compilazione JavaScript nel pannello Rendimento

Le informazioni sulla cache di compilazione JavaScript vengono ora sempre visualizzate nella scheda Riepilogo del riquadro Prestazioni. In precedenza, DevTools non mostrava nulla di correlato alla memorizzazione nella cache del codice se non si verificava.

Informazioni sulla cache di compilazione JavaScript

Problema di Chromium #912581

Il riquadro Rendimento mostrava i tempi nei righelli in base all'inizio della registrazione. Questa impostazione è stata modificata per le registrazioni in cui l'utente naviga. Ora DevTools mostra i tempi del righello relativi alla navigazione.

Allineare la tempistica di navigazione nel riquadro Prestazioni

Abbiamo anche aggiornato i tempi per gli eventi DOMContentLoaded, First Paint, First Contentful Paint e Largest Contentful Paint in modo che siano relativi all'inizio della navigazione, il che significa che corrispondono ai tempi riportati da PerformanceObserver.

Problema di Chromium #974550

Nuove icone per punti di interruzione, punti di interruzione condizionali e logpoint

Il riquadro Origini presenta nuovi design per i punti di interruzione, i punti di interruzione condizionali e i punti di log. I punti di interruzione hanno un design del flag rinnovato con colori più luminosi e accattivanti. Le icone vengono aggiunte per distinguere i punti di interruzione condizionali e i logpoint.

Punti di interruzione

Problema di Chromium #1041830

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.