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 le richieste più facilmente e per riordinare il riquadro Rete.

L'esperimento corrispondente è stato attivato per impostazione predefinita in questa versione, ma verrà ripristinato. Puoi tenere traccia dei progressi su crbug.com/1523150.

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

Per ripristinare immediatamente la barra dei filtri precedente, disattiva le impostazioni Impostazioni > Esperimenti > check_box_outline_blank Nuovo design della barra dei filtri nel riquadro Rete.

Prima e dopo aver semplificato la barra dei filtri nel riquadro Rete.

Non esitare a lasciare un feedback sulla funzionalità alla pagina crbug.com/1500573.

Problema relativo a Chromium: 1486431.

Miglioramenti agli elementi

Assistenza @font-palette-values

Il riquadro Elementi ora supporta la regola at-rule del 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 reindirizzerà alla sezione dedicata @font-palette-values, in cui potrai modificare i valori personalizzati.

La sezione @font-palette-values in Stili.

Problema relativo a Chromium: 1501781.

Caso supportato: proprietà personalizzata come alternativa di un'altra proprietà personalizzata

Elementi > Ora la funzionalità Stili risolve una proprietà personalizzata di riserva di un'altra proprietà personalizzata.

La prima e dopo la risoluzione di una proprietà personalizzata come riserva di un'altra proprietà personalizzata.

Problema relativo a Chromium: 1499265.

Supporto migliorato per le mappe di origine

Le impostazioni Impostazioni > Esperimenti > check_box 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, inclusi, a titolo esemplificativo:

Per maggiori dettagli, consulta il documento RFC corrispondente.

Problema relativo a Chromium: 1444349.

Miglioramenti al riquadro Prestazioni

Monitoraggio Interazioni avanzate

La sezione Rendimento > La traccia Interazioni mostra dei baffi che indicano ritardi nell'inserimento e nella presentazione in corrispondenza dei limiti del tempo di elaborazione.

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

Inoltre, se passi il mouse sopra un'interazione, puoi visualizzare un'utile descrizione comando che descrive in dettaglio le tempistiche.

Problema relativo a Chromium: 1495751.

Filtri avanzati nelle schede In basso, Struttura ad albero e Registro eventi

Le schede Dal basso verso l'alto, Struttura ad albero delle chiamate e Log eventi nel riquadro Rendimento sono disponibili tre nuovi pulsanti per i filtri avanzati:

  • match_case Maiuscole/minuscole.
  • regular_expression Espressione regolare.
  • match_word 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 relativo a Chromium: 1496355.

Indicatori di rientro nel riquadro Origini

Per praticità, l'Editor nel riquadro Origini ora contrassegna i blocchi di codice rientrati con linee verticali.

Blocchi di codice rientrati prima e dopo il segno con linee verticali.

Problema relativo a 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 del punto viola accanto alle schede Intestazioni e Risposta di una richiesta. Le descrizioni comando indicano quali elementi sono stati sostituiti da DevTools.

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

Problema relativo a Chromium: 1469776.

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

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

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

Il comando Aggiungi apre la finestra di dialogo per specificare il pattern, mentre il comando Rimuovi rimuove tutti i pattern senza aprire il riquadro Blocco richieste di rete.

L'esperimento sulle violazioni CSP è stato rimosso

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

Per vedere un riepilogo dei dettagli del CSP, vai a Applicazione > Frame > Criterio di sicurezza del contenuto (CSP).

Criterio di sicurezza del contenuto nel riquadro Applicazione.

Inoltre, il riquadro Problemi segnala violazioni dei CSP.

Criterio di sicurezza del contenuto nel riquadro Applicazione.

Lighthouse 11.3.0

Nel riquadro Lighthouse ora è in esecuzione Lighthouse 11.3.0. Consulta l'elenco completo delle modifiche. Una delle modifiche più importanti è la possibilità di eseguire report su 404 pagine.

Per apprendere le nozioni di base sull'utilizzo del riquadro Lighthouse in DevTools, consulta Lighthouse: ottimizzare la velocità del sito web.

Problema relativo a Chromium: 772558.

Accessibilità

Questa versione presenta i seguenti miglioramenti all'accessibilità:

  • In Rete > Payload, ora puoi impostare lo stato attivo sui pulsanti Visualizza sorgente e Visualizza con codifica URL e premere Invio o la barra spaziatrice per attivare l'azione corrispondente.
  • Per evitare confusione, nella console i link che rimandano agli script non più disponibili per il Debugger sono ora non selezionabili e non è possibile fare clic.
  • Negli alberi di navigazione, ad esempio in Origini > Pagina, la chiave Invio ora espande e comprime i nodi con elementi secondari.

Problemi relativi a Chromium: 1338391, 1500662, 1420362.

Varie in evidenza

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

  • Rendimento. Se una registrazione non va a buon fine, ora hai la possibilità di scaricare eventi di traccia non elaborata e provare a capire cosa non ha funzionato (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 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 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 > Area di lavoro. È stato 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 download corretti nella 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 in anteprima ti consentono di accedere alle funzionalità più recenti di DevTools, testare le API delle piattaforme web all'avanguardia e individuare i problemi sul tuo sito prima che lo facciano gli utenti.

Contattare il team di Chrome DevTools

Utilizza le seguenti opzioni per discutere delle nuove funzionalità e modifiche nel post o di qualsiasi altra informazione relativa a DevTools.

  • Inviaci un suggerimento o un feedback tramite crbug.com.
  • Segnala un problema di DevTools utilizzando Altre opzioni   Altro > Guida > Segnala un problema di DevTools in DevTools.
  • Invia un tweet all'indirizzo @ChromeDevTools.
  • Lascia commenti sulle novità nei video di YouTube di DevTools o nei video di YouTube dei suggerimenti di DevTools.

Novità di DevTools

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