Novità di DevTools (Chrome 98)

Jecelyn Yeen

Funzionalità di anteprima: albero dell'accessibilità a pagina intera

Il nuovo albero di accessibilità a pagina intera ti consente di avere una panoramica dell'albero di accessibilità a pagina intera e di comprendere meglio in che modo i tuoi contenuti web sono esposti alle tecnologie per la disabilità.

Nel riquadro Elementi, apri il riquadro Accessibilità e seleziona la casella di controllo Attiva l'albero dell'accessibilità a pagina intera. Ricarica DevTools e vedrai un nuovo pulsante di accessibilità nel riquadro Elementi.

Puoi fare clic per passare alla visualizzazione Albero dell'accessibilità a pagina intera. Puoi espandere i nodi o fare clic per visualizzare i dettagli nel riquadro Accessibilità.

Seleziona un nodo e torna alla visualizzazione ad albero DOM. Il nodo DOM corrispondente è ora selezionato. Questo è un ottimo modo per comprendere la mappatura tra il nodo DOM e il relativo nodo dell'albero di accessibilità. Questo funziona anche per la visualizzazione ad albero dell'accessibilità ⬌ albero DOM.

In precedenza, l'albero di accessibilità era disponibile nel riquadro Accessibilità. La visualizzazione è limitata e consente di esplorare solo un singolo nodo e i relativi antenati.

Il nostro team sta ancora lavorando attivamente a questa funzionalità di anteprima. Attendiamo il tuo feedback per ulteriori miglioramenti.

Albero dell'accessibilità a pagina intera

Problema di Chromium: 887173

Modifiche più precise nella scheda Modifiche

Le modifiche al codice nella scheda Modifiche vengono stampate in modo leggibile automaticamente.

In precedenza, era difficile risalire alle modifiche effettive del codice sorgente minimizzato perché tutto il codice viene visualizzato in un'unica riga.

Scheda Modifiche

Problemi di Chromium: 1238818, 1268754 , 1086491

Impostare un timeout più lungo per la registrazione del flusso utente

Ora puoi regolare le impostazioni di Timeout in Registratore per tutti i passaggi o per un passaggio specifico. Questa opzione è utile soprattutto per le pagine con richieste di rete lente e animazioni lunghe.

Ad esempio, ho registrato un flusso utente in questa pagina di demo per caricare e fare clic sull'elemento del menu. Tuttavia, il caricamento degli elementi del menu è lento (sono necessari 6 secondi). La riproduzione di questo flusso utente non è riuscita perché supera i 5 secondi (il timeout predefinito).

Per risolvere il problema, possiamo utilizzare le nuove impostazioni di timeout. Espandi il passaggio in cui facciamo clic sulla voce di menu. Modifica il passaggio Aggiungi timeout e impostalo su 6000 millisecondi (pari a 6 secondi).

Se vuoi, puoi modificare il timeout nelle Impostazioni di riproduzione per tutti i passaggi. Espandi le Impostazioni di riproduzione e modifica il valore Timeout.

impostazioni di timeout per la registrazione del flusso utente

Problema di Chromium: 1257499

Verificare che le pagine siano memorizzabili nella cache con la scheda Cache back-forward

La cache back-forward (o bfcache) è un'ottimizzazione del browser che consente la navigazione immediata avanti e indietro.

La nuova scheda Cache avanti/indietro può aiutarti a testare le tue pagine per assicurarti che siano ottimizzate per la cache bfcache e a identificare eventuali problemi che potrebbero impedirne l'idoneità.

Per testare una determinata pagina, vai a quella pagina in Chrome e poi in DevTools vai a Application > Back-forward Cache. Quindi, fai clic sul pulsante Testa la cache back-forward e DevTools tenterà di uscire e tornare indietro per determinare se la pagina può essere ripristinata dalla cache bfcache.

In qualità di sviluppatori web, è fondamentale sapere come ottimizzare le pagine per la cache bf su tutti i browser, perché questo migliorerà notevolmente l'esperienza di navigazione degli utenti, in particolare quelli con reti o dispositivi più lenti.

Scheda Cache back-forward

Problema di Chromium: 1110752

Filtro del riquadro Nuove proprietà

Se vuoi concentrarti su una proprietà specifica nel riquadro Proprietà, ora puoi digitare il nome o il valore della proprietà nella nuova casella di testo Filtra.

Per impostazione predefinita, le proprietà il cui valore è null o undefined non vengono mostrate. Attiva la casella di controllo Mostra tutto per visualizzare tutte le proprietà.

Questi miglioramenti ti consentono di accedere più rapidamente alle proprietà che ti interessano e di migliorare così la tua produttività.

Filtro riquadro Proprietà

Problema di Chromium: 1269674

Emula la funzionalità dei contenuti multimediali dei colori forzati CSS

La funzionalità multimediale CSS forced-colors viene utilizzata per rilevare se l'agente utente ha attivato una modalità di colori forzati (ad es. la modalità ad alto contrasto di Windows) in cui viene applicata una tavolozza di colori limitata scelta dall'utente nella pagina.

Apri il menu Comando, esegui il comando Mostra rendering e imposta il menu a discesa Emula funzionalità dei contenuti multimediali CSS forced-colors.

Funzionalità dei contenuti multimediali dei colori forzati CSS

Problema di Chromium: 1130859

Comando Mostra righelli al passaggio del mouse

Ora puoi aprire il menu Comando ed eseguire il comando Mostra righello al passaggio del mouse. I righelli della pagina semplificano la misurazione della larghezza e dell'altezza di un elemento.

In precedenza, era possibile attivare i righi della pagina solo tramite la casella di controllo Impostazioni > Mostra righi.

Comando Mostra righelli al passaggio del mouse

Problema di Chromium: 1270562

Supporto di row-reverse e column-reverse nell'editor di Flexbox

Nell'editor di Flexbox sono stati aggiunti due nuovi pulsanti per supportare row-reverse e column-reverse in flex-direction.

Editor di Flexbox

Problema di Chromium: 1263866

Nuove scorciatoie da tastiera per riprodurre XHR ed espandere tutti i risultati di ricerca

Scorciatoie da tastiera per riprodurre XHR nel riquadro Rete

Seleziona una richiesta XHR nel riquadro Rete e premi R sulla tastiera per riprodurre di nuovo la richiesta XHR. In precedenza, potevi riprodurre l'XHR solo tramite il menu contestuale (clic con il tasto destro del mouse > Riproduci XHR).

replay XHR

Problema di Chromium: 1050021

Scorciatoia da tastiera per espandere tutti i risultati di ricerca

Nella scheda Cerca è stata aggiunta una nuova scorciatoia che ti consente di espandere e comprimere tutti i risultati di ricerca. In precedenza, potevi espandere e comprimere i risultati di ricerca solo facendo clic su un file alla volta.

Apri la scheda di ricerca tramite Esc > menu con tre puntini > Ricerca. Inserisci una stringa di ricerca (ad es. una funzione) e premi Invio per visualizzare l'elenco dei risultati di ricerca. Concentrati sui risultati di ricerca e utilizza la seguente scorciatoia per espandere/chiudere i file di ricerca:

  • Windows / Linux: Ctrl + Shift + { o }
  • MacOS: Cmd + Options + { o }

Per consultare le scorciatoie da tastiera in Chrome DevTools, vai alle scorciatoie da tastiera.

Problema di Chromium: 1255073

Lighthouse 9 nel riquadro Lighthouse

Il riquadro Lighthouse ora esegue Lighthouse 9. Lighthouse ora elenca tutti gli elementi che condividono lo stesso ID.

L'ID elemento non univoco è un problema di accessibilità comune. Ad esempio, l'ID a cui si fa riferimento in un attributo aria-labelledby viene utilizzato in più elementi.

Per ulteriori dettagli sugli aggiornamenti, consulta la pagina Novità di Lighthouse 9.0.

​Un controllo Lighthouse per "Tutti gli elementi attivabili devono avere un "id" univoco" che mostra due elementi, entrambi con lo stesso "id"

Problema di Chromium: 772558

Riquadro Origini migliorato

Abbiamo apportato numerosi miglioramenti alla stabilità del riquadro Origini durante l'upgrade a CodeMirror 6. Ecco alcuni miglioramenti significativi:

  • Molto più veloce quando si aprono file di grandi dimensioni (ad es. WASM, JavaScript)
  • Niente più scorrimento casuale durante l'esecuzione del codice
  • Suggerimenti di completamento automatico migliorati per le origini modificabili (ad es. snippet, override locale)

Problema di Chromium: 1241848

Altri punti salienti

Di seguito sono riportate alcune correzioni importanti di questa release:

  • Visualizzazione corretta del diagramma a cascata delle richieste di rete. In precedenza, lo stile non funzionava. (1275501)
  • L'evidenziazione del codice non funzionava quando si cercava in documenti con righe molto lunghe nel riquadro Origini. Il problema è stato risolto. (1275496)
  • Non sono più presenti schede Payload duplicate nelle richieste di rete. (1273972)
  • Sono stati corretti i dettagli mancanti relativi ai cambiamenti di layout nella sezione Riepilogo del riquadro Rendimento. (1259606)
  • Supporta caratteri arbitrari (ad es. ,, .) nelle query della Ricerca sulla rete. (1267196)

[Sperimentale] Endpoint nel riquadro dell'API di reporting

Il riquadro dell'API Reporting sperimentale è stato introdotto in Chrome 96 per aiutarti a monitorare i report generati nella tua pagina e il relativo stato.

La sezione Endpoint è ora disponibile. Fornisce una panoramica di tutti gli endpoint configurati nell'intestazione Reporting-Endpoints.

Scopri come utilizzare l'API Reporting per monitorare violazioni della sicurezza, chiamate API ritirate e altro ancora.

Riquadro API di reporting

Problema di Chromium: 1200732

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.