Novità di DevTools (Chrome 91)

Jecelyn Yeen

Informazioni sui Segnali web essenziali visualizzate nel riquadro Prestazioni

Passa il mouse sopra un indicatore di Web Vitals nel riquadro Rendimento per capire di cosa si tratta: se il rendimento è buono, richiede miglioramenti o è scarso.

Popup con le informazioni su Web Vitals

Problema di Chromium: 1147872

Visualizzare lo scorrimento forzato CSS

Ora puoi attivare/disattivare il badge scroll-snap nel riquadro Elementi per esaminare l'allineamento di scorrimento CSS.

CSS scroll-snap

Quando a un elemento HTML della tua pagina (ad es. questa pagina demo) viene applicato scroll-snap-type, puoi vedere un badge scroll-snap accanto all'elemento nel riquadro Elementi. Fai clic sul badge per attivare/disattivare la visualizzazione di una sovrapposizione di scorrimento rapido sulla pagina.

Nell'esempio precedente, puoi vedere i segni dei punti sui bordi degli snap. La porta di scorrimento ha un contorno continuo, mentre gli elementi di snap hanno un contorno tratteggiato. Il padding di scorrimento è riempito di colore verde, mentre il margine di scorrimento è riempito di colore arancione.

Problema di Chromium: 862450

Nuovo Controllo memoria

Utilizza il nuovo Ispettore della memoria per esaminare un ArrayBuffer in JavaScript, nonché la memoria Wasm.

Apri questa pagina dimostrativa. Nel riquadro Origini, apri il file demo-js.js e imposta un punto di interruzione alla riga 18.

Aggiorna la pagina. Espandi la sezione Ambito nel riquadro debugger a destra. Nota la nuova icona accanto al valore del buffer. Fai clic per visualizzare il controllo memoria.

Consulta la documentazione per scoprire di più sull'ispezione di JavaScript ArrayBuffer e WebAssembly.Memory con questo nuovo strumento di ispezione della memoria.

Controllo memoria

Problema di Chromium: 1166577

Nuovo riquadro delle impostazioni dei badge nel riquadro Elementi

Ora puoi attivare o disattivare i badge in modo selettivo tramite le Impostazioni badge nel riquadro Elementi. Utilizza questa funzionalità per personalizzare e concentrarti sui badge importanti durante l'ispezione delle pagine web.

riquadro delle impostazioni dei badge nel riquadro Elementi

Nel riquadro Elementi, fai clic con il tasto destro del mouse su un elemento qualsiasi. Seleziona Impostazioni badge dal menu contestuale. Il riquadro delle impostazioni del badge viene visualizzato in alto. Attiva o disattiva qualsiasi casella di controllo per mostrare/nascondere i badge.

Problema di Chromium: 1066772

Anteprima dell'immagine migliorata con informazioni sulle proporzioni

Le anteprime delle immagini nel riquadro Elementi ora mostrano più informazioni sull'immagine: dimensioni di rendering, proporzioni di rendering, dimensioni intrinseche, proporzioni intrinseche e dimensioni del file.

Queste informazioni ti aiutano a comprendere meglio le tue immagini e ad applicare l'ottimizzazione, se necessario.

Anteprima dell'immagine con informazioni sulle proporzioni

Le informazioni sulle proporzioni dell'immagine sono disponibili anche nel riquadro Rete quando fai clic per visualizzare l'anteprima dell'immagine.

Informazioni sulle proporzioni immagine nel riquadro Rete

Problemi di Chromium: 1149832, 1170656

Nuovo pulsante delle condizioni di rete con opzioni per configurare i Content-Encoding

Nel riquadro Rete viene aggiunto un nuovo pulsante per le condizioni di rete. Fai clic per aprire la scheda Condizioni di rete.

Nella scheda Condizioni di rete viene aggiunta una nuova opzione Codifiche dei contenuti accettate. Configuralo per verificare se le risposte del server sono codificate correttamente nei browser che non supportano gzip, brotli o altri Content-Encoding futuri.

Nuovo pulsante delle condizioni di rete con opzioni per configurare Content-Encoding

Problema di Chromium: 1162042

Miglioramenti al riquadro Stili

Nuova scorciatoia per visualizzare il valore calcolato nel riquadro Stili

Ora puoi fare clic con il tasto destro del mouse su una proprietà CSS nel riquadro Stili e selezionare Visualizza valore calcolato per visualizzare il valore CSS calcolato.

Nuova scorciatoia per visualizzare il valore calcolato

Problema di Chromium: 1076198

Supporto per la parola chiave accent-color

L'interfaccia utente di completamento automatico del riquadro Stili ora rileva la parola chiave CSS accent-color, che consente agli sviluppatori web di specificare il colore accento per i controlli dell'interfaccia utente (ad es. casella di controllo, pulsante di opzione) generati dall'elemento.

La proprietà CSS accent-color è attualmente sperimentale. Abilita chrome://flags/#enable-experimental-web-platform-features per testarlo.

accent-color

Problema di Chromium: 1092093

Classificare i tipi di problemi con colori e icone

La scheda Problemi ora classifica i problemi in errori di pagina, modifiche che provocano un errore imminenti e possibili miglioramenti per una migliore indicazione della gravità. Puoi aprire la scheda Problemi facendo clic sul pulsante Conteggio problemi nella Console.

  • Errori della pagina (rosso). Problemi che hanno un impatto immediato sulla funzionalità della pagina, ad esempio la mancata impostazione delle intestazioni CORS corrette e così via.
  • Modifiche imminenti che causano interruzioni (giallo). Problemi che informano di una modifica imminente e incompatibile della piattaforma web che potrebbe comportare una perdita di funzionalità della pagina (ad es. avviso delle imminenti modifiche RFC 1918 di CORS).
  • Possibili miglioramenti (blu). Potenziali miglioramenti alla pagina, ma che al momento non compromettono la funzionalità di base della pagina (ad es. problemi di accessibilità)

Classificare i tipi di problemi con colori e icone

Problema di Chromium: 1183241

Eliminare i Trust Token

Ora puoi eliminare i token attendibili con il nuovo pulsante di eliminazione nel riquadro Token attendibili, nel riquadro Applicazione.

Trust Token è una nuova API che aiuta a combattere le attività fraudolente e a distinguere i bot dagli utenti reali, senza tracciamento passivo. Scopri come iniziare a utilizzare i Trust Token.

Eliminare i Trust Token

Problema di Chromium: 1126824

Visualizza i dettagli delle funzionalità bloccate nella visualizzazione Dettagli frame

Ora puoi visualizzare i dettagli sulle funzionalità bloccate nella sezione Norme relative alle autorizzazioni nella visualizzazione Dettagli frame.

Apri questa pagina demo. Vai al riquadro Applicazione e seleziona un frame. Nella sezione Permissions Policy (Norme relative alle autorizzazioni), scorri fino alla proprietà Disabled Features (Funzionalità disattivate). Fai clic su Mostra dettagli per visualizzare i dettagli sul motivo per cui la funzionalità è bloccata. Fai clic sull'icona accanto a ogni norma per andare all'iframe o alla richiesta di rete che ha bloccato la funzionalità.

Le norme relative alle autorizzazioni sono un'API della piattaforma web che consente a un sito web di autorizzare o bloccare l'utilizzo delle funzionalità del browser nel proprio frame o negli iframe che incorpora.

Funzionalità bloccate nella visualizzazione dei dettagli del frame

Problema di Chromium: 1158827

Filtrare gli esperimenti nell'impostazione Esperimenti

Trova più rapidamente gli esperimenti con il nuovo filtro. Ad esempio, vai a Impostazioni > Esperimenti, digita "contrasto" nella casella di testo Filtro per filtrare tutti gli esperimenti con la parola "contrasto".

Filtrare gli esperimenti nell'impostazione Esperimenti

Nuova colonna Vary Header nel riquadro Spazio di archiviazione della cache

Utilizza la nuova colonna Vary Header nel riquadro Spazio di archiviazione della cache per visualizzare l'intestazione della risposta HTTP Vary.

Colonna Intestazione Vary

Problema di Chromium: 1186049

Miglioramenti al riquadro delle fonti

Supporto per nuove funzionalità JavaScript

DevTools ora supporta la nuova funzionalità del linguaggio JavaScript controllo del brand privato, nota anche come #foo in obj.

Questa funzionalità di controllo dei brand privati estende l'operatore in per supportare il test dei campi delle classi private su qualsiasi oggetto.

Provalo nel riquadro Console e Origini. Puoi anche esaminare i campi privati nella sezione Ambito nel riquadro Debugger.

Controlli del brand privati JavaScript

Problema di Chromium: 11374

Supporto migliorato per il debug dei punti di interruzione

Ora DevTools imposta correttamente i punti di interruzione in più script. I bundler JavaScript moderni (ad es.Webpack, Rollup) supportano la funzionalità di suddivisione del codice. Esistono scenari in cui un componente condiviso può essere incluso in più route (suddivisioni del codice).

In precedenza, DevTools poteva impostare punti di interruzione solo in una posizione non elaborata. Grazie a questo ultimo miglioramento, DevTools può impostare correttamente i punti di interruzione in tutte le posizioni pertinenti.

Problemi di Chromium: 1142705, 979000, 1180794

Supporto dell'anteprima al passaggio del mouse con la notazione []

Gli strumenti di sviluppo ora supportano l'anteprima al passaggio del mouse sulle espressioni dei membri JavaScript che utilizzano la notazione [] nel riquadro Origini.

Supporto dell'anteprima al passaggio del mouse con la notazione "[]"

Problema di Chromium: 1178305

Struttura migliorata dei file HTML

DevTools ora supporta meglio la struttura dei file HTML. Nel riquadro Origini, apri un file HTML. Puoi attivare/disattivare la struttura del codice con la scorciatoia da tastiera Cmd + Maiusc + O su Mac o Ctrl + Maiusc + O su Windows.

Nell'esempio seguente, DevTools ora elenca correttamente tutte le funzioni nella struttura. In precedenza, DevTools mostrava solo alcune delle funzioni.

Struttura migliorata dei file HTML

Problema di Chromium: 761019, 1191465

Tracce dello stack di errori corrette per il debug di Wasm

Gli strumenti di sviluppo ora risolvono le chiamate di funzioni inline e mostrano le tracce dello stack di errori corrette per il debug di Wasm.

In precedenza, DevTools visualizzava solo riferimenti Wasm generici nelle analisi dello stack di errori.

Tracce dello stack di errori corrette per il debug di Wasm

La vecchia versione di Chrome a sinistra non mostra la posizione dell'origine (ad es. dsquare) nelle tracce dello stack di errori, mentre la nuova versione a destra sì.

Problema di Chromium: 1189161

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.

Novità di DevTools

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