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 fughe accidentali di informazioni sensibili, per impostazione predefinita il log di rete esportato in formato HAR non conterrà più le intestazioni Cookie, Set-Cookie e Authorization.

Per esportare i log in formato HAR con i dati sensibili, attiva Impostazioni > Preferenze > Rete > Consenti di generare HAR con dati sensibili. Nel riquadro Rete il pulsante di Esporta verrà contrassegnato 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 text-emphasis-* proprietà

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 "text-emphasis-*" proprietà.

Problema di Chromium: 361471205.

Scorri gli overflow contrassegnati con un badge

Il riquadro Elementi ora contrassegna con un nuovo badge "scorrimento" gli elementi che contengono contenuti in eccesso e hanno overflow: scroll o overflow: auto, in modo da individuare facilmente gli overflow dello scorrimento. Come gli altri badge, riflette il DOM corrente e scompare se i contenuti non fuoriescono più a causa, ad esempio, di una modifica delle dimensioni.

Prima e dopo il contrassegno degli overflow dello scorrimento con un badge.

Problema di 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'applicazione di semplici dichiarazioni dopo le regole nidificate, la scheda Stili ora non "sposta in alto" queste dichiarazioni durante l'analisi.

Nel seguente esempio di codice, la dichiarazione senza elementi dopo la regola nidificata ora non causa un riordinamento imprevisto degli stili nella gerarchia:

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

  background-color: green;
}

Prima e dopo aver consentito che le dichiarazioni senza parametri vengano inserite dopo le regole nidificate.

Problema di Chromium: 358119261.

Miglioramenti al riquadro Prestazioni

Questa versione introduce una serie di miglioramenti al riquadro Prestazioni,

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 avvicinarti all'esperienza dei tuoi utenti.

Ora puoi spostarti tra i breadcrumb nella sequenza temporale di una registrazione di un'esibizione: "jump" avanti e indietro tra i breadcrumb, sovrascrivere un breadcrumb secondario e rimuovere più breadcrumb secondari. In precedenza, quando selezionavi 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 di Chromium: 350519222.

Denominazione migliorata degli oggetti JS semplici

Per organizzare e semplificare 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}.
  • Ricercabile in base a 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.

Disattivare i temi dinamici

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

Per disattivare i temi dinamici, cancella le Impostazioni > Preferenze > Aspetto > Utilizza la combinazione di colori di Chrome e ricarica DevTools.

Prima e dopo la disattivazione dei temi dinamici.

Problema di Chromium: 328472696.

Esperimento di Chrome: condivisione dei processi

Normalmente, 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 di rendering per migliorare le prestazioni.

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

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

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

Lighthouse 12.2.1

Nel riquadro Lighthouse ora è in esecuzione Lighthouse 12.2.1.

Questo aggiornamento introduce una soglia di < 20 KB da ignorare per i suggerimenti di compressione delle risorse per aiutarti a concentrarti solo sul risparmio significativo delle dimensioni dei file. Consulta l'elenco completo delle modifiche.

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

Problema di Chromium: 772558.

Altri punti salienti

Di seguito sono riportate alcune correzioni e miglioramenti degni di nota in questa release:

  • Elementi:
    • Correzioni multiple per la modifica del codice CSS nidificato (41486635, 361477264, 328263458, 41487826).
    • È stato corretto l'errore di analisi delle proprietà personalizzate definite, ma con valore vuoto, come non definite (365578428).
  • Console: è stata corretta una e commerciale senza caratteri di escape 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: ora lo schema URL che evidenzia lo schema URL 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, 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.

Novità di DevTools

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