Novità di DevTools (Chrome 121)

Sofia Emelianova
Sofia Emelianova
GitHub

Barra dei filtri semplificata nel riquadro Network

La barra dei filtri è stata riprogettata per consentirti di filtrare più facilmente le richieste e ridurre il disordine nel riquadro Rete.

L'esperimento corrispondente è stato attivato per impostazione predefinita in questa versione, ma verrà ripristinato. Puoi monitorare l'avanzamento all'indirizzo crbug.com/1523150.

La nuova barra dei filtri ha due menu a discesa: uno per scegliere i tipi di richieste e un altro per nascondere i dati e gli URL delle estensioni o per mostrare solo i cookie e le richieste bloccati e le richieste di terze parti. Entrambi i menu supportano la selezione multipla.

Per ripristinare immediatamente la vecchia barra dei filtri, disattiva Impostazioni > Esperimenti > Riprogettazione della barra dei filtri nel riquadro Rete.

Prima e dopo la semplificazione della barra dei filtri nel riquadro Rete.

Puoi lasciare un feedback sulla funzionalità all'indirizzo crbug.com/1500573.

Problema di Chromium: 1486431.

Miglioramenti degli elementi

Assistenza @font-palette-values

Il riquadro Elementi ora supporta la regola CSS @font-palette-values. Consente di personalizzare i valori predefiniti della proprietà font-palette.

In Stili, fai clic sul valore della proprietà font-palette e DevTools ti reindirizza alla sezione dedicata @font-palette-values, dove puoi modificare i valori personalizzati.

La sezione @font-palette-values in Stili.

Problema di Chromium: 1501781.

Scenario supportato: proprietà personalizzata come fallback di un'altra proprietà personalizzata

Elementi > Stili ora risolve una proprietà personalizzata che è un fallback di un'altra proprietà personalizzata.

Prima e dopo la risoluzione di una proprietà personalizzata come fallback di un'altra proprietà personalizzata.

Problema di Chromium: 1499265.

Supporto migliorato della mappa di origine

L'opzione Impostazioni > Esperimenti > Risolvi i nomi delle variabili nelle espressioni utilizzando le mappe di origine è stata attivata per impostazione predefinita.

DevTools utilizza le mappe di origine per consentirti di eseguire il debug del codice originale in Origini e Ambito anche dopo averlo combinato, minimizzato o compilato. Questo esperimento ti consente di valutare i nomi delle variabili originali in modo coerente in DevTools, tra cui:

Per maggiori dettagli, consulta la RFC corrispondente.

Problema di Chromium: 1444349.

Miglioramenti del riquadro Prestazioni

Traccia Interazioni avanzate

La traccia Rendimento > Interazioni presenta dei baffi che indicano i ritardi di input e presentazione ai limiti del tempo di elaborazione.

Prima e dopo l'aggiunta dei baffi alla traccia Interazioni.

Inoltre, quando passi il mouse sopra un'interazione, puoi visualizzare una descrizione comando utile con i dettagli delle tempistiche.

Problema di Chromium: 1495751.

Filtro avanzato nelle schede Dal basso verso l'alto, Albero delle chiamate e Log eventi

Le schede Dal basso, Albero delle chiamate e Log eventi nel riquadro Rendimento hanno tre nuovi pulsanti per il filtro avanzato:

  • Maiuscole/minuscole.
  • Espressione regolare.
  • Trova parola intera.

I tre nuovi pulsanti per il filtro avanzato.

Inoltre, per aiutarti a mantenere il contesto, ora solo gli elementi di primo livello corrispondono al filtro nella scheda Dal basso verso l'alto. In precedenza, il filtro corrispondeva a ogni nodo.

Problema di Chromium: 1496355.

Indicatori di rientro nel riquadro Origini

Per comodità, l'editor nel riquadro Fonti ora contrassegna i blocchi di codice rientrati con linee verticali.

Prima e dopo la marcatura dei blocchi di codice rientrati con linee verticali.

Problema di Chromium: 1479986.

Descrizioni comando utili per le intestazioni e i contenuti sostituiti nel riquadro Rete

Il riquadro Rete ora mostra descrizioni comando quando passi il mouse sopra l'icona a forma di punto viola accanto alle schede Intestazioni e Risposta di una richiesta. Le descrizioni comando indicano cosa è stato sottoposto a override da DevTools.

Le nuove descrizioni comando accanto all'icona del punto viola nelle schede Intestazioni e Risposta.

Problema di Chromium: 1469776.

Nuove opzioni del menu dei comandi per aggiungere e rimuovere pattern di blocco delle richieste

Ora puoi digitare i comandi per aggiungere o rimuovere pattern di blocco di richiesta di rete nel menu dei comandi.

Prima e dopo l'aggiunta di nuovi comandi per aggiungere o rimuovere pattern di blocco di rete.

Il comando Aggiungi ti porta alla finestra di dialogo per specificare il pattern, mentre il comando Rimuovi rimuove tutti i pattern senza aprire il riquadro Blocco delle richieste di rete.

L'esperimento sulle violazioni del CSP viene rimosso

La scheda sperimentale Violazioni CSP introdotta nella versione 89 è stata rimossa perché ridondante.

Per visualizzare i dettagli di CSP a colpo d'occhio, vai a Applicazione > Frame > Content Security Policy (CSP).

La Content Security Policy nel pannello Applicazione.

Inoltre, il pannello Problemi segnala le violazioni della CSP.

La Content Security Policy nel pannello Applicazione.

Lighthouse 11.3.0

Il riquadro Lighthouse ora esegue Lighthouse 11.3.0. Consulta l'elenco completo delle modifiche. Tra le modifiche più importanti c'è la possibilità di generare report sulle pagine 404.

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.

Accessibilità

Questa versione include i seguenti miglioramenti dell'accessibilità:

  • In Rete > Payload, ora puoi selezionare con il tasto Tab i pulsanti Visualizza origine e Visualizza codifica URL e premere Invio o la barra spaziatrice per attivare l'azione corrispondente.
  • In Console, per ridurre la confusione, i link che portano a script non più disponibili per il debugger ora sono visualizzati in grigio e non è possibile farci clic.
  • Negli alberi di navigazione, come l'albero in Sorgenti > Pagina, il tasto Invio ora espande e comprime i nodi con elementi secondari.

Problemi di Chromium: 1338391, 1500662, 1420362.

Punti salienti vari

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

  • Rendimento. Se una registrazione non va a buon fine, ora hai la possibilità di scaricare gli eventi di traccia non elaborati e cercare di capire cosa è andato storto (commit).
  • La scorciatoia Mostra console (Ctrl+` per Mac, Ctrl++ per Windows e Linux) ora non solo apre la console, ma si chiude anche quando viene premuta una seconda volta.
  • Risorse per gli sviluppatori. È stato corretto un bug che impediva la segnalazione delle risorse CSS e dei relativi problemi (1420362).
  • Elementi:
    • È stato corretto un bug relativo all'ispezione degli elementi negli iframe (1453375).
    • Calcolato. È stato corretto un bug che impediva il rendering dei valori predefiniti (1499882).
    • Cerca: È stato corretto un bug che impediva il calcolo del numero di corrispondenze per le query brevi di uno o due caratteri (1416457).
  • Console. Ora analizza correttamente le espressioni regolari che terminano con un carattere di escape nella casella Filtro (1346936).
  • Impostazioni > Workspace. Corretto un bug che impediva l'aggiunta di una cartella esclusa (1503580).
  • Rete > Anteprima. Ora esegue il rendering delle immagini con URI data: (1381791).
  • Memoria. Sono stati aggiunti i pulsanti di caricamento e di salvataggio corretti alla barra delle azioni (1275407).

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.