Novità di DevTools (Chrome 85)

Jecelyn Yeen

Modifica dello stile per framework CSS-in-JS

Il riquadro Stili ora supporta meglio la modifica degli stili creati con l'oggetto CSS API Model (CSSOM). Molti framework e librerie CSS-in-JS utilizzano le API CSSOM in background per creare stili.

Ora puoi anche modificare gli stili aggiunti in JavaScript utilizzando i fogli di stile costruibili. Costruibile I fogli di stile 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 puoi modificare l'opzione nel riquadro Stili:

Problema di Chromium #946975

Lighthouse 6 nel riquadro Lighthouse

Nel riquadro Lighthouse ora è in esecuzione Lighthouse 6. Dai un'occhiata alle novità di Lighthouse 6.0 per il 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 Tempo di blocco totale (TBT). LCP e CLS sono due dei nuovi strumenti di Google Core Web Vitals e TBT è un proxy di misurazione di laboratorio per un altro Core Web Vital, First Input Ritardo.

La formula del punteggio di rendimento è stata inoltre ponderata per riflettere meglio caricamento in corso... un'esperienza senza intervento manuale.

Nuove metriche delle prestazioni in Lighthouse 6.0

Problema di Chromium #772558

Ritiro della funzionalità First Meaningful Paint (FMP)

La funzionalità First Meaningful Paint (FMP) è stata ritirata in Lighthouse 6.0. È stata inoltre rimossa dalla Riquadro Rendimento. Largest Contentful Paint è la soluzione consigliata per la sostituzione di FMP. Vedi Primo Meaningful Paint per una spiegazione sul motivo per cui è stato ritirato.

Problema di Chromium #1096008

Supporto per nuove funzionalità JavaScript

DevTools ora supporta meglio alcune delle più recenti funzionalità del linguaggio JavaScript:

  • Concatenamento facoltativo della sintassi: completamento automatico della proprietà ora nella Console supporta la sintassi di concatenamento facoltativa, ad esempio name?. ora funziona in aggiunta a name. e name[.
  • Evidenziazione della sintassi per i campi privati: ora i campi dei corsi privati sono corretti con la sintassi evidenziata e la formattazione nel riquadro Origini.
  • Evidenziazione della sintassi per l'operatore di coalescing Nullish: gli strumenti DevTools ora funzionano correttamente l'operatore di coalescenza null nel riquadro Origini.

Problemi relativi a Chromium #1083214, #1073903, #1083797

Avvisi di nuove scorciatoie 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 app sono più piccole di 96 x 96 pixel
  • le icone delle scorciatoie dell'app e del file manifest non sono quadrate (in quanto verranno ignorate).

Avvisi relativi alle scorciatoie app

Problema di Chromium #955497

Eventi respondWith del service worker nella scheda Tempi

La scheda Tempi del riquadro Rete ora include gli eventi respondWith dei service worker. respondWith corrisponde al tempo immediatamente prima dell'esecuzione del gestore di eventi fetch del worker di servizio, fino al momento in cui La promessa respondWith del gestore fetch è risolta.

service worker "respondWith"

Problema di Chromium #1066579

Visualizzazione coerente del riquadro elaborato

Il riquadro Elaborato nel riquadro Elementi ora viene visualizzato in modo coerente come un riquadro in tutta l'area visibile dimensioni. In precedenza, il riquadro Elaborato veniva unito all'interno del riquadro Stili quando la larghezza del DevTools l'area visibile era stretta.

Problema di Chromium #1073899

Offset bytecode per file WebAssembly

DevTools ora utilizza gli offset di bytecode per visualizzare i numeri di riga dello smontaggio di Wasm. Ciò rende è più chiaro che tu stia osservando dati binari ed è più coerente con il modo in cui il runtime Wasm le località di riferimento.

Offset bytecode

Problema di Chromium #1071432

Copia e taglia a livello di riga nel riquadro Origini

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

Problema di Chromium #800028

Aggiornamenti delle impostazioni della console

Separa i messaggi della stessa console

Il pulsante di attivazione/disattivazione Gruppo simile nelle impostazioni della console ora si applica ai messaggi duplicati. In precedenza applicata a messaggi simili.

Ad esempio, in precedenza DevTools non ha separato il raggruppamento dei messaggi hello anche se Raggruppa simile. è deselezionata. Ora i messaggi di hello non sono più raggruppati:

Problema di Chromium #1082963

Impostazioni persistenti di Solo contesto selezionato

Le impostazioni Solo contesto selezionato in Impostazioni della console sono ora persistenti. In precedenza, le impostazioni sono stati reimpostati ogni volta che chiudi e riapri DevTools. Questa modifica rende il comportamento dell'impostazione in modo coerente con le altre opzioni di Impostazioni console.

Solo contesto selezionato

Problema di Chromium #1055875

Aggiornamenti al riquadro del rendimento

Informazioni sulla cache di compilazione JavaScript nel riquadro Prestazioni

Le informazioni sulla cache di compilazione JavaScript vengono ora visualizzate sempre nella scheda Riepilogo del Riquadro Rendimento. In precedenza, DevTools non mostrava nulla di relativo alla memorizzazione nella cache del codice e la memorizzazione nella cache.

Informazioni sulla cache di compilazione JavaScript

Problema di Chromium #912581

Riquadro Prestazioni utilizzato per mostrare gli orari nei righelli in base all'inizio della registrazione. Questo ha ora modificata per le registrazioni in cui l'utente naviga, dove DevTools ora mostra i tempi relativi al righello alla navigazione.

Allinea i tempi di navigazione nel riquadro Rendimento

Abbiamo aggiornato gli orari anche per DOMContentLoaded, First Paint, First Contentful Paint e Largest Gli eventi Contentful Paint devono essere relativi all'inizio della navigazione, il che significa che corrispondono al tempi segnalati da PerformanceObserver.

Problema di Chromium #974550

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

Il riquadro Origini ha nuovi design per punti di interruzione, punti di interruzione condizionali e punti di log. I punti di interruzione hanno un design rinnovato con colori più brillanti e amichevoli. Le icone vengono aggiunte a e differenziare i punti di interruzione condizionali e i punti di log.

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 in anteprima ti consentono di accedere alle funzionalità più recenti di DevTools, testare le API delle piattaforme web all'avanguardia e 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 utilizzando Altre opzioni   Altro > 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.

Novità di DevTools

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