Novità di DevTools (Chrome 98)

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

Il nuovo albero dell'accessibilità a pagina intera ti consente di ottenere più facilmente una panoramica dell'albero dell'accessibilità a pagina intera e ti aiuta a 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 albero dell'accessibilità a pagina intera. Quindi, ricarica DevTools e vedrai un nuovo pulsante di accessibilità nel riquadro Elementi.

Puoi fare clic sul pulsante 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 dell'accessibilità. Questa operazione funziona anche per la visualizzazione ad albero DOM ⬌ Accessibilità.

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

Il nostro team sta ancora lavorando attivamente a questa funzionalità in anteprima. Vorremmo conoscere il tuo feedback per ulteriori miglioramenti.

Problema relativo a Chromium: 887173

Modifiche più precise nella scheda Modifiche

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

In precedenza, era difficile tracciare le effettive modifiche del codice sorgente minimizzato perché l'intero codice veniva mostrato in un'unica riga.

Problemi relativi a Chromium: 1238818, 1268754 , 1086491

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

Ora puoi modificare le impostazioni di Timeout nel Registratore per tutti i passaggi o un passaggio specifico. Ciò è particolarmente utile per le pagine con richieste di rete lente e animazioni lunghe.

Ad esempio, ho registrato un flusso di utenti in questa pagina dimostrativa per caricarlo e fare clic sulla voce di menu. Tuttavia, il caricamento delle voci di menu è lento (sono necessari 6 secondi). La riproduzione di questo flusso utente non è riuscita perché supera i 5 secondi (timeout predefinito).

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

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

Problema relativo a Chromium: 1257499

Assicurati che le pagine siano memorizzabili nella cache usando 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 back/forward può aiutarti a testare le pagine per assicurarti che siano ottimizzate per bfcache e per identificare eventuali problemi che potrebbero impedirne l'idoneità.

Per testare una pagina specifica, aprila in Chrome, quindi in DevTools vai ad Applicazione > Cache back-forward. Quindi, fai clic sul pulsante Testa la cache back-forward e DevTools proverà a uscire e tornare indietro per determinare se la pagina può essere ripristinata da bfcache.

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

Problema relativo a Chromium: 1110752

Nuovo filtro del riquadro Proprietà

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

Per impostazione predefinita, le proprietà il cui valore è null o undefined non vengono mostrate. 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, migliorando quindi la tua produttività.

Problema relativo a Chromium: 1269674

Emula la funzionalità dei contenuti multimediali per i colori forzati del CSS

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

Apri il menu Comando, esegui il comando Mostra rendering, quindi imposta il menu a discesa Emula la funzionalità multimediale CSS forced-colors.

Problema relativo a Chromium: 1130859

Mostra righelli al comando del passaggio del mouse

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

In precedenza, era possibile attivare i righelli di pagina solo da Impostazioni > Casella di controllo Mostra righelli.

Problema relativo a Chromium: 1270562

Supporta row-reverse e column-reverse nell'editor Flexbox

L'editor Flexbox ha aggiunto due nuovi pulsanti per supportare row-reverse e column-reverse in flex-direction.

Problema relativo a 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 Network e premi R sulla tastiera per riprodurre di nuovo l'XHR. In precedenza, puoi riprodurre l'XHR solo tramite il menu contestuale (clic con il tasto destro del mouse > Riproduci XHR).

Problema relativo a Chromium: 1050021

Scorciatoia da tastiera per espandere tutti i risultati di ricerca

Viene aggiunta una nuova scorciatoia alla scheda Cerca per 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. funzione) e premi Invio per visualizzare l'elenco dei risultati di ricerca. Imposta lo stato attivo 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 }

Vai alle scorciatoie da tastiera per riferimento alle scorciatoie da tastiera in Chrome DevTools.

Problema relativo a Chromium: 1255073

Lighthouse 9 nel riquadro Lighthouse

Nel riquadro Lighthouse ora è in esecuzione Lighthouse 9. Lighthouse ora elenca tutti gli elementi che condividono lo stesso ID.

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

Consulta Novità di Lighthouse 9.0 per maggiori dettagli sugli aggiornamenti.

​

Problema relativo a Chromium: 772558

Riquadro Origini migliorato

Numerosi miglioramenti della stabilità nel riquadro Origini in seguito all'upgrade per l'utilizzo di CodeMirror 6. Ecco alcuni miglioramenti degni di nota:

• Molto più veloce quando apri file di grandi dimensioni (ad es. WASM, JavaScript)
• Niente più scorrimento casuale durante la visualizzazione del codice
• Suggerimenti di completamento automatico migliorati per le fonti modificabili (ad es. snippet, override locale)

Problema relativo a Chromium: 1241848

Varie in evidenza

Di seguito sono riportate alcune importanti correzioni 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 durante la ricerca in documenti con righe molto lunghe nel riquadro Origini. Il problema è stato risolto. (1275496)
• Niente più schede Payload duplicate nelle richieste di rete. (1273972)
• Sono stati corretti i dettagli mancanti delle variazioni di layout nella sezione Riepilogo del riquadro Rendimento. (1259606)
• Supporta caratteri arbitrari (ad es. ,, .) nelle query di ricerca nella rete. (1267196)

[Sperimentale] Endpoint nel riquadro API di reporting

Il riquadro sperimentale API di reporting è stato introdotto in Chrome 96 per aiutarti a monitorare i report generati nella 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 di reporting per monitorare le violazioni della sicurezza, le chiamate API ritirate e altro ancora.

Problema relativo a 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 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   > 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.