Novità di DevTools (Chrome 85)

Jecelyn Yeen

Modifica degli stili 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 CSS componibili. Gli stili 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 sono modificabili in precedenza. Ora sono modificabili nel riquadro Stili:

Problema di Chromium #946975

Lighthouse 6 nel riquadro Lighthouse

Il riquadro Lighthouse ora esegue Lighthouse 6. Consulta la pagina Novità di Lighthouse 6.0 per un riepilogo di tutte le modifiche principali o 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 dei nuovi Core Web Vitals di Google e TBT è un proxy di misurazione in laboratorio per un altro Core Web Vital, il tempo di caricamento del primo input.

Anche la formula del punteggio del rendimento è stata rivalutata 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) è deprecato in Lighthouse 6.0. Inoltre, è stato rimosso dal riquadro "Rendimento". Largest Contentful Paint è la sostituzione consigliata per FMP. Consulta la sezione First Meaningful Paint per una spiegazione del motivo per cui è stato ritirato.

Problema di Chromium #1096008

Supporto per nuove funzionalità JavaScript

DevTools ora offre un supporto migliore per alcune delle funzionalità più recenti del linguaggio JavaScript:

  • Completamento automatico della sintassi di coda facoltativa: il completamento automatico delle proprietà nella console ora supporta la sintassi di coda facoltativa, ad esempio name?. ora funziona oltre a name. e name[.
  • Evidenziazione della sintassi per i campi privati: i campi di classe privati ora sono correttamente evidenziati e stampati in un formato gradevole nel riquadro Origini.
  • Evidenziazione della sintassi per l'operatore di unione nullo: ora DevTools stampa correttamente in un formato gradevole l'operatore di unione nullo nel riquadro Origini.

Problemi di Chromium #1083214, #1073903, #1083797

Nuovi avvisi relativi alle scorciatoie per le app nel riquadro Manifest

Le scorciatoie per le 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 dell'app e le icone manifest non sono quadrate (poiché verranno ignorate)

Avvisi relativi alle scorciatoie delle app

Problema di Chromium #955497

Eventi respondWith del service worker nella scheda Tempi

La scheda Tempi del riquadro Rete ora include gli eventi respondWith del service worker. respondWith è il momento immediatamente precedente all'esecuzione del gestore eventi fetch del servizio worker fino al momento in cui la promessa respondWith del gestore fetch viene risolta.

metodo `respondWith` del service worker

Problema di Chromium #1066579

Visualizzazione coerente del riquadro Calcolata

Il riquadro Calcolata nel riquadro Elementi ora viene visualizzato in modo coerente in tutti i riquadri delle dimensioni del viewport. In precedenza, il riquadro Calcolata si univa al riquadro Stili quando la larghezza dell'area visibile di DevTools era ridotta.

Problema di Chromium #1073899

Offset del bytecode per i file WebAssembly

DevTools ora utilizza gli offset del bytecode per visualizzare i numeri di riga dello smontaggio 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

Tagliare e copiare riga per riga nel riquadro Origini

Quando esegui la copia o il taglio senza una selezione nell'editor del riquadro Origini, DevTools copia o taglia i contenuti della riga corrente. Ad esempio, nel video di seguito, 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

Annullare il raggruppamento degli stessi messaggi della console

L'opzione di attivazione/disattivazione Raggruppa i messaggi simili nelle impostazioni della console ora si applica ai messaggi duplicati. In precedenza, veniva applicata solo ai messaggi simili.

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

Problema di Chromium #1082963

Mantenimento delle impostazioni Solo contesto selezionato

Le impostazioni Solo contesto selezionato nelle impostazioni di Console ora sono permanenti. 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 di Impostazioni della console.

Solo contesto selezionato

Problema di Chromium #1055875

Aggiornamenti del riquadro sul rendimento

Informazioni sulla cache della compilazione di JavaScript nel riquadro Rendimento

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

Informazioni sulla cache di compilazione JavaScript

Problema di Chromium #912581

Il riquadro Rendimento mostrava i tempi nelle righe in base all'ora di inizio della registrazione. Ora questo comportamento è cambiato per le registrazioni in cui l'utente naviga, in quanto DevTools ora mostra i tempi del righello relativi alla navigazione.

Allineare la temporizzazione della navigazione nel riquadro Rendimento

Abbiamo anche aggiornato i tempi di 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 registrati da PerformanceObserver.

Problema di Chromium #974550

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

Il riquadro Origini presenta nuovi design per breakpoint, breakpoint condizionali e punti di log. I breakpoint hanno un design aggiornato degli indicatori con colori più brillanti e accattivanti. Le icone vengono aggiunte per distinguere i punti di interruzione condizionali e i punti di log.

Punti di interruzione

Problema di Chromium #1041830

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.