Novità di DevTools, Chrome 130

Sofia Emelianova

Miglioramenti al riquadro Network

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.

Per ripristinare il vecchio design dei filtri, deseleziona Impostazioni Impostazioni > Esperimenti > check_box_outline_blank Riprogettazione della barra dei filtri nel riquadro Rete.

Facci sapere cosa ne pensi del nuovo design.

Problema di Chromium: 362672528.

Ora le esportazioni HAR 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 Impostazioni > Preferenze > Rete > casella di controllo Consenti di generare HAR con dati sensibili. Il riquadro Rete contrassegnerà il pulsante Esporta download con una freccia. Tieni premuto il pulsante e seleziona Esporta HAR (con dati sensibili) dal menu a discesa.

Problema di Chromium: 361717594.

Miglioramenti al riquadro Elementi

Questa versione introduce una serie di miglioramenti al pannello Elementi.

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

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

• Abbreviazione text-emphasis
• text-emphasis-style
• text-emphasis-color
• text-emphasis-position

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.

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 in Chrome:

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

  background-color: green;
}

Problema di Chromium: 358119261.

Miglioramenti del riquadro Prestazioni

Questa versione introduce una serie di miglioramenti al pannello Rendimento.

Consigli nelle metriche live

Metriche live ora può fornire consigli specifici per le metriche che ti aiutano a configurare l'ambiente di sviluppo nel modo più simile 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 la sezione Considera gli ambienti utente reali in Impostazioni ambiente.

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

Navigare tra i breadcrumb

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ù elementi 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 pannello Memoria.

Nuovo profilo "Elementi scollegati"

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

Problema di Chromium: 350519222.

Miglioramento della denominazione degli oggetti JS semplici

Per organizzare e riordinare la categoria Object negli snapshot heap, gli oggetti JavaScript semplici ora 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à.

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 Impostazioni > Preferenze > Aspetto > check_box_outline_blank Corrispondenza con la combinazione di colori di Chrome e ricarica DevTools.

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 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 aiutarti a concentrarti solo sui risparmi significativi in termini di 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 multiline 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.

• Inviaci feedback e richieste di funzionalità all'indirizzo crbug.com.
• Segnala un problema di DevTools utilizzando more_vert Altre opzioni > Guida > Segnala un problema di DevTools in DevTools.
• Invia un tweet a @ChromeDevTools.
• Lascia un commento sui video di YouTube Novità di DevTools o sui video di YouTube Suggerimenti di DevTools.

Novità di DevTools

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