Novità di DevTools (Chrome 116)

Sofia Emelianova
Sofia Emelianova

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:

  • La struttura ad albero Origini > Pagina ora mostra solo i fogli di stile di cui è stato eseguito il deployment e che sono stati caricati correttamente, per ridurre al minimo la confusione.
  • In Origini > 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

L'Easing Editor Easing Editor. in Elementi > Stili ti consente di modificare i valori di transition-timing-function e animation-timing-function con un solo 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

La sezione Applicazione > Archiviazione supporta 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 > 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 la scorciatoia "Leggi intestazione colonna".

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 spostarti nel riquadro Origini > Punti di interruzione con la tastiera: Freccia su e Freccia giù per spostarti 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 ultime funzionalità di DevTools, di testare le API delle piattaforme web all'avanguardia e di 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 usando Altre opzioni   Altre   > 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome - Guida introduttiva

Chrome - Guida introduttiva

Guida introduttiva di Chrome

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 è stato annullato.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59