Novità di DevTools (Chrome 116)

Sofia Emelianova
Sofia Emelianova
GitHub

Miglioramento del debug dei fogli di stile mancanti

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

  • Nella sezione Fonti > La struttura ad albero della pagina ora mostra solo i fogli di stile di cui è stato eseguito il deployment e caricato, per ridurre al minimo la confusione.
  • Nella sezione Fonti > L'app Editor ora sottolinea e mostra le descrizioni comando degli errori incorporati accanto alle istruzioni @import, url() e href non riuscite.

Istruzioni sottolineate con descrizioni comando nel riquadro Origini.

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

La console fornisce i link alle righe esatte con le dichiarazioni problematiche.

  • Il riquadro Network compila in modo coerente la colonna Initiator con link alla riga esatta che fa riferimento a un foglio di stile che non è stato caricato.

  • Nel riquadro Problemi sono elencati tutti i problemi di caricamento dei fogli di stile, inclusi URL non funzionanti, richieste non riuscite e istruzioni @import in posizioni errate.

Il riquadro Problemi con i link a fonti e richieste.

Problemi relativi a Chromium: 1440626, 1442198, 1453611.

Supporto della sincronizzazione lineare in Elementi > Stili > Editor Easing

Editor Easing Easing Editor. in Elementi > Gli stili ti consentono di regolare i valori di transition-timing-function e animation-timing-function con un clic. In questa versione, l'editor di facilità Easing Editor. supporta la funzione di tempo lineare.

Per configurare la sincronizzazione lineare, fai clic sul pulsante del selettore lineare. Per aggiungere un punto di controllo, fai clic in un punto qualsiasi della linea. Fai doppio clic su un punto di controllo per rimuoverlo. Puoi anche scegliere una delle preimpostazioni: linear, elastic, bounce o emphasized. Guarda il video per vedere come funziona l'aggiustamento lineare.

Problema relativo a Chromium: 1421241.

Supporto dei bucket di archiviazione e visualizzazione dei metadati

L'Applicazione > La sezione Spazio di archiviazione riceve il supporto per i bucket di archiviazione. I bucket di archiviazione sono indipendenti tra loro, quindi puoi specificare una priorità di eliminazione per sezioni di dati e assicurarti che i dati più importanti non vengano eliminati. Ogni bucket di archiviazione può archiviare dati associati ad API di archiviazione stabilite come IndexedDB e CacheStorage.

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

Visualizzazione dei metadati di un bucket.

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

La nuova visualizzazione dei metadati unificata.

Problemi relativi a Chromium: 1448011, 1406017.

Lighthouse 10.3.0

Nel riquadro Lighthouse ora è in esecuzione Lighthouse 10.3.0. In particolare, questa versione aggiunge quattro nuovi controlli che acquisiscono vari problemi di accessibilità con intestazioni delle tabelle e sottotitoli, nomi dei pulsanti di input e disallineamenti della lingua. Ad esempio:

Controllo delle intestazioni delle tabelle superato.

Consulta anche l'elenco completo delle modifiche. Per apprendere le nozioni di base sull'utilizzo del riquadro Lighthouse in DevTools, consulta Lighthouse: ottimizzare la velocità del sito web.

Problema relativo a Chromium: 772558.

Accessibilità: comandi da tastiera e lettura dello schermo migliorata

DevTools ora supporta altre scorciatoie e risolve 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 di MacOS, vedi Azioni del puntatore alternativo.
  • Applicazioni per screen reader:
    • Le etichette delle caselle di controllo non vengono annunciate inutilmente due volte.
    • Annuncerà i nomi delle intestazioni di colonna per le colonne ordinabili quando premi il pulsante "Leggi intestazione colonna" scorciatoia.

Il team DevTools esprime gratitudine a Yanling Wang ed Elorm Coch per aver ottenuto questi miglioramenti.

Problemi relativi a Chromium: 1446482, 1414952.

Varie in evidenza

Di seguito sono riportate alcune correzioni e 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 si è verificata un'attivazione del prerendering o la navigazione nella cache back-forward e ti chiede di ricaricare (1393057).
  • Ora puoi andare alla scheda Fonti > Riquadro Punti di interruzione con la tastiera: Freccia su e Freccia giù per spostarsi e Barra spaziatrice per selezionare (1446150).
  • Corretto il caricamento e l'applicazione di filtri ai file HAR nel riquadro Rete (1450622).
  • Il diagramma a fiamme nel riquadro Rendimento ora posiziona piccoli intervalli tra le tracce per migliorarne il rendering (1452150).
  • È stato corretto il mapping automatico dei 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 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   Altro > 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.