Novità di DevTools (Chrome 98)

Jecelyn Yeen

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

Il nuovo albero di accessibilità della pagina intera ti consente di ottenere più facilmente una panoramica dell'albero di accessibilità della pagina intera e di comprendere meglio come i tuoi contenuti web vengono esposti alla tecnologia assistiva.

Nel riquadro Elementi, apri il riquadro Accessibilità e seleziona la casella di controllo Attiva l'albero dell'accessibilità a pagina intera. Poi 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 nodo dell'albero di accessibilità. Funziona anche per la visualizzazione ad albero DOM ⬌ albero dell'accessibilità.

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

Il nostro team sta ancora lavorando attivamente a questa funzionalità di anteprima. Siamo alla ricerca del 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 automaticamente in modo leggibile.

In precedenza, era difficile tracciare le modifiche effettive del codice sorgente minimizzato perché tutto il codice viene visualizzato in una singola 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 nel Registratore per tutti i passaggi o per un passaggio specifico. Ciò è utile soprattutto per le pagine con richieste di rete lente e animazioni lunghe.

Ad esempio, ho registrato un flusso utente in questa pagina demo per caricare e fare clic sulla voce di menu. Tuttavia, il caricamento delle voci di menu è lento (richiede 6 secondi). La ripetizione 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).

(Facoltativo) Puoi regolare il timeout nelle impostazioni di riproduzione per tutti i passaggi. Espandi Impostazioni di riproduzione e modifica il valore di Timeout.

impostazioni del timeout per la registrazione del flusso utente

Problema di Chromium: 1257499

Assicurati che le tue 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 indietro/avanti può aiutarti a testare le tue pagine per assicurarti che siano ottimizzate per la cache indietro/avanti e identificare eventuali problemi che potrebbero impedirne l'idoneità.

Per testare una pagina specifica, vai alla pagina in Chrome e poi in DevTools vai ad Applicazione > Cache indietro/avanti. A questo punto, fai clic sul pulsante Testa cache back-forward e DevTools tenterà di uscire dalla pagina e di tornarci per determinare se è possibile ripristinarla dalla cache back-forward.

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

Scheda Cache back-forward

Problema di Chromium: 1110752

Nuovo filtro del riquadro 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 Filtro.

Per impostazione predefinita, le proprietà con valore null o undefined non vengono visualizzate. Seleziona 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 quindi di migliorare la tua produttività.

Filtro del riquadro delle proprietà

Problema di Chromium: 1269674

Emula la funzionalità multimediale dei colori forzati CSS

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

Apri il menu Comando, esegui il comando Mostra rendering e poi imposta il menu a discesa Emula funzionalità multimediale dei colori forzati CSS.

Funzionalità multimediale dei colori forzati CSS

Problema di Chromium: 1130859

Mostra righelli al passaggio del puntatore del mouse

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

In precedenza, potevi attivare i righelli della pagina solo tramite la casella di controllo Impostazioni > Mostra righelli.

Mostra righelli al passaggio del puntatore del mouse

Problema di Chromium: 1270562

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

L'editor di Flexbox ha aggiunto 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 Network

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

replay XHR

Problema di Chromium: 1050021

Scorciatoia da tastiera per espandere tutti i risultati di ricerca

Nella scheda Ricerca è 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 > Cerca. 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/comprimere i file di ricerca:

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

Consulta le scorciatoie da tastiera per un riferimento alle scorciatoie da tastiera in Chrome DevTools.

Problema di Chromium: 1255073

Lighthouse 9 nel pannello 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 viene fatto riferimento in un attributo aria-labelledby viene utilizzato in più elementi.

Per ulteriori dettagli sugli aggiornamenti, consulta la sezione 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

Numerosi miglioramenti alla stabilità nel riquadro Fonti, che è stato aggiornato per utilizzare CodeMirror 6. Ecco alcuni miglioramenti degni di nota:

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

Problema di Chromium: 1241848

Punti salienti vari

Di seguito sono riportate alcune correzioni degne di nota in questa release:

  • Visualizzazione corretta del diagramma a cascata delle richieste di rete. In precedenza, lo stile era danneggiato. (1275501)
  • L'evidenziazione del codice non funzionava durante la ricerca nei documenti con righe molto lunghe nel riquadro Origini. Il problema è stato risolto. (1275496)
  • Nessuna scheda Payload duplicata nelle richieste di rete. (1273972)
  • Sono stati corretti i dettagli mancanti degli spostamenti del layout nella sezione Riepilogo del pannello Rendimento. (1259606)
  • Supporta caratteri arbitrari (ad es. ,, .) nelle query di Ricerca nella rete. (1267196)

[Sperimentale] Endpoint nel riquadro dell'API Reporting

Il riquadro sperimentale API Reporting è stato introdotto in Chrome 96 per aiutarti a monitorare i report generati nella tua pagina e il loro 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 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.