Novità di DevTools (Chrome 121)

Sofia Emelianova
Sofia Emelianova
GitHub

Barra dei filtri semplificata nel riquadro Rete

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

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

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

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

La situazione prima e dopo la semplificazione della barra dei filtri nel riquadro Rete.

Non esitare a lasciare il tuo feedback sulla funzionalità in crbug.com/1500573.

Problema di Chromium: 1486431.

Miglioramenti agli elementi

Assistenza @font-palette-values

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

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

La sezione @font-palette-values in Stili.

Problema di Chromium: 1501781.

Caso supportato: proprietà personalizzata come opzione di riserva di un'altra proprietà personalizzata

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

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

Problema di Chromium: 1499265.

Supporto migliorato per le mappe di origine

L'opzione Impostazioni > Esperimenti > Risolvi i nomi delle variabili nelle espressioni utilizzando le mappe di origine è attiva 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, inclusi, a titolo esemplificativo:

Per maggiori dettagli, consulta l'RFC corrispondente.

Problema di Chromium: 1444349.

Miglioramenti al riquadro Prestazioni

Canale Interazioni avanzate

Al canale Rendimento > Interazioni vengono applicati dei trattini che indicano i ritardi di inserimento e presentazione ai confini del tempo di elaborazione.

Prima e dopo l'aggiunta di whisker al canale Interazioni.

Inoltre, quando passi il mouse sopra un'interazione, puoi vedere una descrizione comando utile che indica i tempi.

Problema di Chromium: 1495751.

Filtri avanzati nelle schede Dal basso verso l'alto, Albero delle chiamate ed Event Log

Le schede Dal basso verso l'alto, Albero chiamate e Log eventi nel riquadro Prestazioni ora includono tre nuovi pulsanti per i filtri avanzati:

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

I tre nuovi pulsanti per i filtri avanzati.

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 maggiore praticità, l'editor nel riquadro Origini ora contrassegna i blocchi di codice rientrati con linee verticali.

Il prima e il dopo che contrassegnano i blocchi di codice rientrati con linee verticali.

Problema di Chromium: 1479986.

Descrizioni comando utili per intestazioni e contenuti sostituiti nel riquadro Rete

Il riquadro Rete ora mostra le 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 sostituito 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 di comando per aggiungere e rimuovere pattern di blocco delle richieste

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

Lo stato prima e dopo l'aggiunta di nuovi comandi per aggiungere o rimuovere pattern di blocco della rete.

Il comando Aggiungi ti indirizza 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 in quanto ridondante.

Per visualizzare rapidamente i dettagli del CSP, vai a Applicazione > Frame > Content Security Policy (CSP).

I criteri di sicurezza del contenuto nel riquadro Applicazione.

Inoltre, il riquadro Problemi segnala le violazioni del CSP.

I criteri di sicurezza del contenuto nel riquadro Applicazione.

Lighthouse 11.3.0

Il pannello Lighthouse ora esegue Lighthouse 11.3.0. Consulta l'elenco completo delle modifiche. Tra le modifiche più importanti, è possibile eseguire report sulle pagine 404.

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.

Accessibilità

Questa versione include i seguenti miglioramenti dell'accessibilità:

  • In Network > Payload, ora puoi dare il focus ai pulsanti Visualizza codice sorgente e Visualizza URL codificato con il tasto Tab e premere Invio o Barra spaziatrice per attivare l'azione corrispondente.
  • In Console, per ridurre la confusione, i link che rimandano a script non più disponibili per il Debugger non sono più selezionabili e non è possibile fare clic su di essi.
  • Negli alberi di navigazione, come quello in Origini > Pagina, il tasto Invio ora espande e comprime i nodi con elementi secondari.

Problemi di Chromium: 1338391, 1500662, 1420362.

Altri punti salienti

Di seguito sono riportate alcune correzioni e miglioramenti significativi di questa release:

  • Rendimento. Se una registrazione non va a buon fine, ora hai la possibilità di scaricare gli eventi traccia non elaborati e provare a capire cosa è andato storto (commit).
  • La scorciatoia Mostra console (Ctrl+` per Mac, Ctrl++ per Windows e Linux) ora non solo apre la console, ma la chiude anche se 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).
    • Calcolata. È stato corretto un bug che impediva il rendering dei valori predefiniti (1499882).
    • Cerca: È stato corretto un bug che impediva di calcolare il numero di corrispondenze per query brevi di uno o due caratteri (1416457).
  • Console. Ora vengono analizzate correttamente le espressioni regolari che terminano con un carattere di sfuggita nella casella Filtro (1346936).
  • Impostazioni > Spazio di lavoro. È stato corretto un bug che impediva l'aggiunta di una cartella esclusa (1503580).
  • Rete > Anteprima. Ora vengono visualizzate le immagini con gli URI data: (1381791).
  • Memoria. Sono stati aggiunti i pulsanti di caricamento e di salvataggio appropriati all'apposita barra (1275407).

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 i tuoi utenti.

Contatta il team di Chrome DevTools

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

Novità di DevTools

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