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 ripensati

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

Per semplificare l'interfaccia utente, le caselle di controllo relative a nascondi, blocca e terze parti vengono spostate in un elenco a discesa. L'elenco contiene un numero che indica quanti filtri sono selezionati nel menu a discesa.

Prima e dopo lo spostamento dei filtri relativi a nascondi, blocca e terze parti in un menu a discesa.

Per ripristinare il vecchio design dei filtri, deseleziona Impostazioni > Esperimenti > Riprogettazione 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 divulgazione 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 le Impostazioni > Preferenze > Rete > Consenti di generare HAR con dati sensibili. Il riquadro Rete contrassegnerà il pulsante Esporta con una freccia. Tieni premuto il pulsante e seleziona Esporta HAR (con dati sensibili) dal menu a discesa.

Prima e dopo l'aggiunta delle 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.

Overflow di scorrimento contrassegnati da un badge

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

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

Problema di Chromium: 40670442.

Le dichiarazioni semplici dopo le regole nidificate non vengono "spostate verso l'alto"

In seguito alla decisione del CSS Working Group di consentire che le dichiarazioni semplici vengano 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 ora non causa il riordino 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 alle dichiarazioni semplici di seguire le regole nidificate.

Problema di Chromium: 358119261.

Miglioramenti al riquadro Prestazioni

Questa versione introduce una serie di miglioramenti al pannello Rendimento.

Consigli nelle metriche live

Le metriche live ora possono fornire consigli specifici per le metriche che ti aiutano a configurare l'ambiente di sviluppo il più vicino possibile a quello che sperimentano i tuoi utenti.

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

Sezioni espanse con consigli.

Segui i consigli per approssimare l'esperienza dei tuoi utenti.

Ora puoi navigare tra i breadcrumb nella sequenza temporale di una registrazione delle prestazioni: "saltare" 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 pannello Memoria

Questa versione introduce una serie di miglioramenti al pannello Memoria.

Nuovo profilo "Elementi scollegati"

Il riquadro Memoria riceve un nuovo tipo di profilo: Elementi staccati. 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.

Nomenclatura migliorata degli oggetti JS semplici

Per organizzare e riordinare la categoria Object nelle istantanee heap, ora gli oggetti JavaScript semplici sono:

  • Denominati in base alle proprietà che contengono, ad esempio {firstProperty, secondProperty, ..., *nthProperty}.
  • Possono essere cercati 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 di DevTools con i colori del tema personalizzato in Chrome.

Per disattivare i temi dinamici, deseleziona Impostazioni > Preferenze > Aspetto > Corrispondenza con 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 dallo stesso sito web (ad esempio Documenti Google), Chrome crea un processo di rendering separato per ciascuna. L'esperimento Condivisione dei processi modifica questo comportamento consentendo a più schede di condividere lo stesso processo di rendering per migliorare le prestazioni.

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

La barra informativa "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 saperne di più, consulta Esperimento di Chrome: condivisione dei processi.

Lighthouse 12.2.1

Il riquadro Lighthouse ora esegue Lighthouse 12.2.1.

Questo aggiornamento introduce una soglia di ignoranza < 20 KB per i suggerimenti di compressione delle risorse, in modo da concentrarti solo sui risparmi significativi delle dimensioni dei file. Consulta l'elenco completo delle modifiche.

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

Problema di Chromium: 772558.

Punti salienti vari

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

  • Elementi:
    • Sono state apportate diverse correzioni alla modifica del CSS nidificato (41486635, 361477264, 328263458, 41487826).
    • È stato corretto l'analisi delle proprietà personalizzate definite ma con valore vuoto come non definite (365578428).
  • Console: è stato corretto un carattere & non sottoposto a 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: l'evidenziazione dello schema URL ora si aggiorna correttamente man mano che cambia la fase di sicurezza di un'origine (359920086).

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 funzionalità più recenti di DevTools, testare le API della piattaforma web all'avanguardia e trovare problemi sul tuo sito prima che lo facciano i tuoi utenti.

Contatta il team di Chrome DevTools

Utilizza le seguenti opzioni per discutere delle nuove funzionalità, degli aggiornamenti o di qualsiasi altro argomento relativo a DevTools.

Novità di DevTools

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