Novità di DevTools, Chrome 130

Sofia Emelianova
Sofia Emelianova
GitHub

Miglioramenti al riquadro Rete

Questa versione introduce una serie di miglioramenti al riquadro Rete.

Filtri di rete reinventati

Il riquadro Rete include nuovi filtri, riprogettati in base al tuo feedback. I filtri specifici per tipo rimangono invariati: un insieme di badge in una barra di selezione multipla chiara.

Per riordinare l'interfaccia utente, le caselle di controllo relative a elementi nascosti, di blocco e di terze parti vengono spostate in un elenco a discesa. L'elenco contiene un numero che indica quanti filtri sono stati controllati nel menu a discesa.

Prima e dopo lo spostamento dei filtri di blocco, di visualizzazione e di terze parti in un menu a discesa.

Per ripristinare il vecchio design dei filtri, deseleziona Impostazioni > Sperimentali > Nuovo design della barra dei filtri nel riquadro Rete.

Facci sapere cosa ne pensi del nuovo design.

Problema di Chromium: 362672528.

Le esportazioni HAR ora escludono i dati sensibili per impostazione predefinita

Per ridurre le probabilità di fuga accidentale di informazioni sensibili, il log di rete esportato in formato HAR non conterrà più le intestazioni Cookie, Set-Cookie e Authorization per impostazione predefinita.

Per esportare i log in formato HAR con i dati sensibili, attiva Impostazioni > Preferenze > Rete > Consenti di generare HAR con dati sensibili. Il riquadro Rete contrassegnerà il pulsante Esporta con una freccia. Fai clic a lungo sul pulsante e seleziona Esporta HAR (con dati sensibili) dal menu a discesa.

Prima e dopo l'aggiunta di opzioni di esportazione con e senza dati sensibili all'esportazione HAR.

Problema di Chromium: 361717594.

Miglioramenti al riquadro Elementi

Questa versione introduce una serie di miglioramenti al riquadro Elementi.

Valori di completamento automatico per le proprietà text-emphasis-*

Il completamento automatico nella scheda Stili ora suggerisce valori per le seguenti proprietà CSS:

Prima e dopo l'aggiunta dell'opzione di completamento automatico per le proprietà "text-emphasis-*".

Problema di Chromium: 361471205.

Scorri gli overflow contrassegnati con un badge

Il riquadro Elementi ora contrassegna con un nuovo badge "Scorrimento" gli elementi con contenuti overflow e contrassegnati da overflow: scroll o overflow: auto, in modo da poter individuare facilmente gli overflow di scorrimento. Come gli altri badge, questo badge riflette l'attuale DOM e scompare se i contenuti smettono di riempirsi di contenuti, ad esempio a causa di una modifica delle dimensioni.

Prima e dopo aver contrassegnato gli overflow di scorrimento con un badge.

Problema relativo a Chromium: 40670442.

Le dichiarazioni senza parametri dopo le regole nidificate non "si spostano verso l'alto"

A seguito della decisione del gruppo di lavoro CSS di consentire l'invio di dichiarazioni semplici dopo le regole nidificate, la scheda Stili ora non "sposta in alto" queste dichiarazioni durante l'analisi.

Nel seguente esempio di codice, la dichiarazione semplice dopo la regola nidificata non causa il riordinamento imprevisto degli stili nella cascata da parte di Chrome:

p {
  width: 100px;
  height: 100px;
  @media screen {
    background-color: red;
  }

  background-color: green;
}

Prima e dopo aver consentito l'inserimento di dichiarazioni semplici dopo le regole nidificate.

Problema di Chromium: 358119261.

Miglioramenti al riquadro Prestazioni

Questa versione introduce una serie di miglioramenti al riquadro Rendimento.

Consigli nelle metriche in tempo reale

Ora le metriche in tempo reale possono fornire suggerimenti specifici per le singole metriche, che ti aiutano a configurare il tuo ambiente di sviluppo il più vicino possibile all'esperienza degli utenti.

Per ricevere consigli, configura il recupero dei dati sul campo dal Report sull'esperienza utente di Chrome (CrUX) ed espandi la sezione Prendi in considerazione le condizioni di test locali in ogni scheda delle metriche (se presente) e Prendi in considerazione gli ambienti utente reali nelle Impostazioni ambiente.

Sezioni espanse con consigli.

Segui i consigli per avere un'esperienza più approssimativa per i tuoi utenti.

Ora puoi spostarti tra i breadcrumb nella sequenza temporale di una registrazione della performance: "saltare" da un breadcrumb all'altro, sovrascrivere un breadcrumb secondario e rimuovere più elementi secondari. In precedenza, quando selezioni un breadcrumb principale, i relativi elementi secondari scomparivano.

Miglioramenti al riquadro Memoria

Questa versione introduce una serie di miglioramenti al riquadro Memoria.

Nuovo profilo "Elementi scollegati"

Il riquadro Memoria include un nuovo tipo di profilo: Elementi scollegati. Mostra gli oggetti conservati da un riferimento JavaScript.

Prima e dopo l'aggiunta del tipo di profilo "Elementi scollegati" al riquadro Memoria.

Problema relativo a Chromium: 350519222.

Denominazione migliorata degli oggetti JS semplici

Per organizzare e riordinare la categoria Object negli snapshot dell'heap, gli oggetti JavaScript semplici ora sono:

  • Nominati in base alle proprietà che contengono, ad esempio {firstProperty, secondProperty, ..., *nthProperty}.
  • Possono essere cercati tramite questi nomi creati da DevTools.
  • Raggruppati se hanno le stesse proprietà.

Prima e dopo l'organizzazione della categoria Oggetto negli snapshot dell'heap.

Problema di Chromium: 350519222.

Disattiva i temi dinamici

Ora puoi disattivare la corrispondenza automatica dei colori di DevTools ai colori del tema personalizzato in Chrome.

Per disattivare i temi dinamici, deseleziona Settings > Preferences > Appearance > Match Chrome color scheme e ricarica DevTools.

L'aspetto prima e dopo la disattivazione del tema dinamico.

Problema relativo a Chromium: 328472696.

Esperimento Chrome: condivisione dei processi

In genere, quando apri più schede dello stesso sito web (ad esempio Documenti Google), Chrome crea un processo di rendering separato per ciascuna. L'esperimento Condivisione dei processi cambia questo aspetto consentendo a più schede di condividere lo stesso processo del renderer per migliorare le prestazioni.

Se viene visualizzato il messaggio "Questa scheda condivide le risorse con altre schede..." mentre DevTools è aperto, significa che fai parte del piccolo gruppo con l'esperimento Condivisione dei processi abilitato.

La barra di informazioni "Questa scheda condivide le risorse con altre schede…".

La condivisione dei processi può influire sul debug dei punti di interruzione e sull'analisi delle prestazioni. Per ulteriori informazioni, consulta Esperimento Chrome: condivisione dei processi.

Lighthouse 12.2.1

Il riquadro Lighthouse ora esegue Lighthouse 12.2.1.

Questo aggiornamento introduce una soglia di ignoramento < 20 KB per i suggerimenti di compressione delle risorse per aiutarti a concentrarti solo sui risparmi significativi delle dimensioni dei file. Consulta l'elenco completo delle modifiche.

Per apprendere le nozioni di base sull'utilizzo del riquadro Lighthouse in DevTools, consulta Lighthouse: ottimizzare la velocità del sito web.

Problema relativo a Chromium: 772558.

Varie in evidenza

Di seguito sono riportate alcune correzioni e miglioramenti significativi di questa release:

  • Elementi:
    • Correzioni multiple per la modifica del codice CSS nidificato (41486635, 361477264, 328263458, 41487826).
    • Corrette le proprietà personalizzate definite ma con valore vuoto che vengono analizzate come non definite (365578428).
  • Console: è stato corretto un & non sfuggito nelle stringhe multiriga nei comandi cURL (352651673).
  • Memoria: è stata corretta la selezione predefinita nelle pagine con service worker, ora selezionato il thread principale (40669896).
  • Sicurezza: l'evidenziazione dello schema URL ora si aggiorna correttamente quando cambia la fase di sicurezza di un'origine (359920086).

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 gli utenti.

Contatta il team di Chrome DevTools

Utilizza le seguenti opzioni per discutere delle nuove funzionalità, degli aggiornamenti o di qualsiasi altra cosa relativa a DevTools.

Novità di DevTools

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