Questa pagina è stata tradotta dall'API Cloud Translation.

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 le API CSS Object 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. 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 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. Consulta 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 Block Time (TBT). LCP e CLS sono due dei nuovi Core Web Vitals di Google e TBT è un proxy di misurazione di laboratorio per un altro Core Web Vital, First Input Delay.

La formula del punteggio delle prestazioni è stata inoltre rivalutata per riflettere meglio l'esperienza di caricamento degli utenti.

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 dal riquadro Rendimento. Largest Contentful Paint è la soluzione consigliata per la sostituzione di FMP. Consulta First Meaningful Paint per spiegazioni 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:

Completamento automatico della sintassi con concatenamento facoltativo: il completamento automatico della proprietà nella Console ora supporta la sintassi di concatenamento facoltativa. Ad esempio, name?. ora funziona in aggiunta a name. e name[.
Evidenziazione della sintassi per i campi privati: i campi dei corsi privati sono ora opportunamente evidenziati tramite sintassi e stampati nel riquadro Origini.
Evidenziazione della sintassi per l'operatore di coalescenza Nullish. DevTools ora stampa correttamente l'operatore di coalescenza nullo 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 è il 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 viene 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 tutte le dimensioni dell'area visibile. In precedenza, il riquadro Elaborato veniva unito all'interno del riquadro Stili quando la larghezza dell'area visibile di DevTools era ridotta.

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 stai osservando i dati binari ed è più coerente con il modo in cui il runtime Wasm fa riferimento alle località.

Offset bytecode

Problema di Chromium #1071432

Copia e taglia a livello di riga nel riquadro Origini

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

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, si applicava ai messaggi simili.

Ad esempio, in precedenza DevTools non ha separato il raggruppamento dei messaggi hello anche se l'opzione Gruppo 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 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 del rendimento

Informazioni sulla cache di compilazione JavaScript nel riquadro Prestazioni

Ora le informazioni sulla cache di compilazione JavaScript vengono visualizzate sempre nella scheda Riepilogo del riquadro Rendimento. In precedenza, DevTools non mostrava nulla di relativo alla memorizzazione nella cache del codice se non veniva eseguita.

Informazioni sulla cache di compilazione JavaScript

Problema di Chromium #912581

Allineamento dei tempi di navigazione nel riquadro Rendimento

Riquadro Prestazioni utilizzato per mostrare gli orari nei righelli in base all'inizio della registrazione. Ora il problema è cambiato per le registrazioni in cui l'utente naviga, in cui DevTools ora mostra i tempi del righello relativi alla navigazione.

Allinea i tempi di navigazione nel riquadro Rendimento

Abbiamo anche aggiornato gli orari degli 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 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 per 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 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.