Novità di DevTools (Chrome 85)

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 sottostanti per creare gli stili.

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

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

Problema di Chromium #946975

Lighthouse 6 nel pannello Lighthouse

Nel riquadro Lighthouse ora è in esecuzione 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 Blocca Time (TBT). LCP e CLS sono due dei nuovi Segnali web essenziali di Google, e TBT è un proxy di misurazione di laboratorio per un altro Segnale web essenziale, First Input Delay.

Anche la formula del punteggio delle prestazioni è stata riponderata per riflettere meglio l'esperienza di caricamento degli utenti.

Nuove metriche sulle prestazioni in Lighthouse 6.0

Problema di Chromium #772558

Ritiro della funzionalità First Meaningful Paint (FMP)

La funzionalità First Meaningful Paint (FMP) è deprecata in Lighthouse 6.0. È stato anche rimosso dal riquadro Rendimento. Largest Contentful Paint è la sostituzione consigliata per FMP. Per saperne di più sul motivo del ritiro, consulta First Signalful Paint.

Problema di Chromium #1096008

Supporto per nuove funzionalità JavaScript

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

  • Completamento automatico della sintassi concatenamento facoltativo: il completamento automatico delle proprietà nella console ora supporta una 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 evidenziati tramite sintassi e stampati correttamente nel riquadro Origini.
  • Evidenziazione della sintassi per l'operatore di coalescenza null: DevTools ora genera una copia corretta dell'operatore di coalescenza null nel riquadro Origini.

Problemi di Chromium #1083214, #1073903, #1083797

Nuovi avvisi relativi alle scorciatoie app nel riquadro Manifest

Le scorciatoie app consentono agli utenti di 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 app e le icone manifest non sono quadrate (poiché 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 del service worker. respondWith è il tempo immediatamente precedente l'esecuzione del gestore di eventi fetch del service worker al momento in cui la promessa respondWith del gestore fetch è stata risolta.

"respondWith" del service worker

Problema di Chromium #1066579

Visualizzazione coerente del riquadro Calcolato

Il riquadro Calcolato nel riquadro Elementi ora viene visualizzato in modo coerente come riquadro per 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 byte per i file WebAssembly

DevTools ora utilizza gli offset di bytecode per visualizzare i numeri di riga del disassemblaggio di Wasm. In questo modo è 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 riga nel riquadro Origini

Quando esegui copia o taglia 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 console

L'opzione di attivazione/disattivazione Gruppo simile in Impostazioni console ora si applica ai messaggi duplicati. In precedenza si applicava solo a messaggi simili.

Ad esempio, in precedenza DevTools non ha separato i messaggi hello anche se l'opzione Gruppo simile è deselezionata. Ora i messaggi hello sono separati:

Problema di Chromium #1082963

Impostazioni Solo contesto selezionato esistenti

Le impostazioni Solo contesto selezionato nelle Impostazioni della console ora sono rese 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 del riquadro sul rendimento

Informazioni sulla cache di compilazione di JavaScript nel riquadro Prestazioni

Le informazioni sulla cache di compilazione JavaScript sono ora sempre visualizzate nella scheda Riepilogo del riquadro Rendimento. In precedenza, DevTools non mostrava nulla di ciò che riguarda la memorizzazione nella cache del codice se non veniva eseguita questa operazione.

Informazioni sulla cache di compilazione JavaScript

Problema di Chromium #912581

Il riquadro Rendimento mostrava i tempi nei righelli in base all'inizio della registrazione. Questo valore è cambiato per le registrazioni in cui l'utente naviga, dove DevTools ora mostra le ore del righello relative 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, ovvero che corrispondano alle tempistiche indicate da PerformanceObserver.

Problema di Chromium #974550

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

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 ottengono un design delle bandiere rinnovato con colori più accesi e amichevoli. Vengono aggiunte icone per differenziare i punti di interruzione condizionali e i punti di log.

Punti di interruzione

Problema di Chromium #1041830

Scarica 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à di DevTools più recenti, di testare le API per piattaforme web all'avanguardia e di individuare eventuali problemi sul tuo sito prima che lo facciano gli utenti.

Contattare il team di Chrome DevTools

Utilizza le opzioni seguenti per discutere delle nuove funzionalità e delle modifiche nel post o di qualsiasi altra cosa relativa a DevTools.

  • Inviaci un suggerimento o un feedback tramite crbug.com.
  • Segnala un problema DevTools utilizzando Altre opzioni   Altre   > Guida > Segnala i problemi di DevTools in DevTools.
  • Tweet all'indirizzo @ChromeDevTools.
  • Lascia commenti sui video di YouTube o sui suggerimenti di DevTools in DevTools Video di YouTube.

Novità di DevTools

Un elenco di tutti gli argomenti trattati nella serie Novità di DevTools.

Chrome 123

Chrome 122

Guida introduttiva di Chrome

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Versione 115 di Chrome

Chrome 114

Chrome 113

Chrome 112

Guida introduttiva di Chrome

Versione 110 di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome versione 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 è stato annullato.

Chrome 81

Chrome versione 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome versione 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59