Novità di DevTools (Chrome 116)

Sofia Emelianova

Miglioramento del debug dei fogli di stile mancanti

DevTools offre una serie di miglioramenti per aiutarti a identificare e risolvere più rapidamente i problemi relativi ai fogli di stile mancanti:

• Per ridurre al minimo la confusione, ora l'albero Origini > Pagina mostra solo gli stili di cui è stato eseguito il deployment e il caricamento.
• La sezione Origini > Editor ora sottolinea e mostra descrizioni comando degli errori in linea accanto alle istruzioni @import, url() e href non riuscite.

• La console, oltre ai link alle richieste non riuscite, ora fornisce i link alla riga esatta che fa riferimento a un foglio di stile che non è stato caricato.

• Il riquadro Rete compila in modo coerente la colonna Initiator con i link alla riga esatta che fa riferimento a un foglio di stile il cui caricamento non è riuscito.

• Il riquadro Problemi elenca tutti i problemi di caricamento dei fogli di stile, inclusi URL non validi, richieste non riuscite e istruzioni @import fuori posto.

Problemi di Chromium: 1440626, 1442198, 1453611.

Supporto della temporizzazione lineare in Elementi > Stili > Editor di animazioni graduali

L' editor di animazioni in Elementi > Stili ti consente di modificare i valori transition-timing-function e animation-timing-function con un clic. In questa versione, l' editor di animazioni supporta la funzione di temporizzazione lineare.

Per configurare i tempi lineari, fai clic sul pulsante del selettore lineare. Per aggiungere un punto di controllo, fai clic in un punto qualsiasi della linea. Per rimuovere un punto di controllo, fai doppio clic su di esso. Puoi anche scegliere uno dei preset: linear, elastic, bounce o emphasized. Guarda il video per vedere l'aggiustamento lineare in azione.

Problema di Chromium: 1421241.

Supporto dei bucket di archiviazione e visualizzazione dei metadati

La sezione Applicazione > Spazio di archiviazione supporta i bucket di archiviazione. I bucket di archiviazione sono indipendenti tra loro, quindi puoi specificare la priorità di espulsione per i vari segmenti di dati e assicurarti che i dati più importanti non vengano eliminati. Ogni bucket di archiviazione può archiviare i dati associati ad API di archiviazione consolidate come IndexedDB e CacheStorage.

Dai un'occhiata a questo fiddle per testare la funzionalità. Apri DevTools, vai ad Application (Applicazione) > Storage (Spazio di archiviazione) > Indexed DB (DB indicizzato) ed esegui il codice. DevTools ora mostra i bucket e i relativi contenuti. Seleziona un bucket per visualizzarne i metadati.

La visualizzazione dei metadati unificata è ora disponibile anche per le sezioni di archiviazione locale, di sessione e della cache.

Problemi di Chromium: 1448011, 1406017.

Lighthouse 10.3.0

Il pannello Lighthouse ora esegue Lighthouse 10.3.0. In particolare, questa versione aggiunge quattro nuovi controlli che rilevano vari problemi di accessibilità relativi a intestazioni di tabelle e sottotitoli codificati, nomi dei pulsanti di immissione e mancata corrispondenza delle lingue. Ad esempio:

Consulta anche l'elenco completo delle modifiche. 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à: comandi da tastiera e lettura dello schermo migliorata

DevTools ora supporta più scorciatoie e corregge i problemi relativi agli screen reader:

• Ora puoi aprire il menu contestuale con una scorciatoia da tastiera, ad esempio Maiusc+F10 su Windows e su molte distribuzioni Linux. Per le scorciatoie per macOS, vedi Azioni del cursore alternative.
• Applicazioni per screen reader:
  • Non annuncerà due volte le etichette delle caselle di controllo inutilmente.
  • Annuncia i nomi delle intestazioni delle colonne ordinate quando premi la scorciatoia "Leggi intestazione colonna".

Il team di DevTools esprime la propria gratitudine a Yanling Wang e Elorm Coch per aver implementato questi miglioramenti.

Problemi di Chromium: 1446482, 1414952.

Altri punti salienti

Di seguito sono riportate alcune correzioni e miglioramenti significativi di questa release:

• Il riquadro Rete continua a registrare l'attività di rete anche dopo che hai interagito con la cronologia (1422552).
• Il riquadro Copertura ora riconosce se è stata attivata l'anteprima o la navigazione nella cache di navigazione avanti/indietro e ti chiede di ricaricare la pagina (1393057).
• Ora puoi spostarti nel riquadro Origini > Punti di interruzione con la tastiera: Freccia su e Freccia giù per spostarti e Barra spaziatrice per selezionare (1446150).
• È stato corretto il caricamento e il filtraggio dei file HAR nel riquadro Rete (1450622).
• Il grafico a forma di fiamma nel riquadro Rendimento ora inserisce piccoli spazi tra le tracce per visualizzarle meglio (1452150).
• È stata corretta la mappatura automatica per i file incorporati nelle mappe di origine (1446383).

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.

• Inviaci feedback e richieste di funzionalità all'indirizzo crbug.com.
• Segnala un problema DevTools utilizzando more_vert Altre opzioni > Guida > Segnala un problema DevTools in DevTools.
• Invia un tweet all'account @ChromeDevTools.
• Lascia un commento sui video di YouTube Novità di DevTools o sui video di YouTube Suggerimenti per DevTools.

Novità di DevTools

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