Novità di DevTools (Chrome 116)

Sofia Emelianova

Debug migliorato dei fogli di stile mancanti

DevTools riceve una serie di miglioramenti per aiutarti a identificare ed eseguire il debug più rapidamente dei problemi relativi ai fogli di stile mancanti:

• L'albero Origini > Pagina ora mostra solo i fogli di stile caricati e di cui è stato eseguito il deployment correttamente per ridurre al minimo la confusione.
• Fonti > Editor ora sottolinea e mostra descrizioni comando di errore in linea accanto alle istruzioni @import, url() e href non riuscite.

• La Console, oltre ai link alle richieste non riuscite, ora fornisce 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 Iniziatore con link alla riga esatta che fa riferimento a un foglio di stile che non è stato caricato.

• Il riquadro Problemi elenca tutti i problemi di caricamento dei fogli di stile, inclusi URL non funzionanti, richieste non riuscite e istruzioni @import posizionate in modo errato.

Problemi di Chromium: 1440626, 1442198, 1453611.

Supporto della temporizzazione lineare in Elementi > Stili > Editor di transizione

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

Per configurare le tempistiche 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. Puoi anche scegliere uno dei preset: linear, elastic, bounce o emphasized. Guarda il video per vedere la regolazione lineare in azione.

Problema di Chromium: 1421241.

Supporto dei bucket di archiviazione e visualizzazione dei metadati

La sezione Applicazione > Spazio di archiviazione ora supporta i bucket di archiviazione. I bucket di archiviazione sono indipendenti l'uno dall'altro, quindi puoi specificare la priorità di eliminazione per le sezioni di dati e assicurarti che i dati più importanti non vengano eliminati. Ogni bucket di archiviazione può archiviare dati associati ad API Storage consolidate come IndexedDB e CacheStorage.

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

La visualizzazione unificata dei metadati è 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 input e mancata corrispondenza della lingua. Ad esempio:

Consulta anche l'elenco completo delle modifiche. Per scoprire 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 risolve i problemi con gli screen reader:

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

Il team di DevTools ringrazia Yanling Wang ed Elorm Coch per aver implementato questi miglioramenti.

Problemi di Chromium: 1446482, 1414952.

Punti salienti vari

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

• Il riquadro Rete continua a registrare l'attività di rete anche dopo che hai interagito con la sequenza temporale (1422552).
• Il riquadro Copertura ora riconosce se è stata attivata la pre-rendering o la navigazione nella cache back-forward e ti chiede di ricaricare (1393057).
• Ora puoi navigare nel riquadro Origini > Punti di interruzione con la tastiera: Freccia su e Freccia giù per spostarti e Spazio per selezionare (1446150).
• È stato risolto il problema di caricamento e filtro dei file HAR nel riquadro Rete (1450622).
• Il grafico a 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 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.

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

Novità di DevTools

Un elenco di tutti gli argomenti trattati nella serie Novità di DevTools.