Novità di DevTools, Chrome 130

Sofia Emelianova

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 semplificare l'interfaccia utente, le caselle di controllo per l'occultamento, il blocco e i contenuti di 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 settings Settings > Experiments > check_box_outline_blank Redesign of the filter bar in the Network panel.

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 settings Impostazioni > Preferenze > Rete > check_box Consenti di generare HAR con dati sensibili. Il riquadro Rete contrassegnerà il pulsante Scarica Esporta con una freccia. Fai clic a lungo sul 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 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:

• Scrittura stenografica text-emphasis
• text-emphasis-style
• text-emphasis-color
• text-emphasis-position

Problema di Chromium: 361471205.

Scorrimenti in eccesso contrassegnati da 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.

Problema di Chromium: 40670442.

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

In seguito alla decisione del gruppo di lavoro CSS di consentire che le dichiarazioni senza parametri vengano inserite 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;
}

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 consigli specifici per le metriche che ti aiutano a configurare l'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.

Segui i consigli per avvicinarti all'esperienza dei tuoi utenti.

Navigare nei breadcrumb

Ora puoi spostarti tra i breadcrumb nella sequenza temporale di una registrazione del rendimento: "saltare" da un breadcrumb all'altro, sovrascrivere un breadcrumb secondario e rimuovere più elementi secondari. In precedenza, quando selezionavi un breadcrumb principale, i relativi figli 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.

Problema di 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à.

Problema di Chromium: 350519222.

Disattivare 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 Settings > Preferences > Appearance > check_box_outline_blank Adatta la combinazione di colori di Chrome e ricarica DevTools.

Problema di Chromium: 328472696.

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

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

La condivisione dei processi può influire sul debug dei breakpoint 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 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 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 significativi di questa release:

• Elementi:
  • Più correzioni per la modifica del 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: è 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 lo stato 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 di nuove funzionalità, aggiornamenti o qualsiasi altro argomento relativo a DevTools.

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

Novità di DevTools

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