Novità di DevTools (Chrome 121)

Sofia Emelianova
Sofia Emelianova

Barra dei filtri semplificata nel riquadro Rete

La barra dei filtri è stata riprogettata per consentirti di filtrare più facilmente le richieste e ridurre il numero di elementi 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 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 > Redesign 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à all'indirizzo 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 alternativo 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, tra cui, a titolo esemplificativo:

Per maggiori dettagli, consulta l'RFC corrispondente.

Problema di Chromium: 1444349.

Miglioramenti al riquadro sul rendimento

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.

L'aspetto prima e dopo l'aggiunta di trattini 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 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).

Le norme Content Security Policy nel riquadro Applicazione.

Inoltre, il riquadro Problemi segnala le violazioni del CSP.

Le norme Content Security Policy 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 alcuni 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 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.

Novità di DevTools

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