Novità di DevTools (Chrome 91)

Jecelyn Yeen

Le informazioni di Web Vitals vengono visualizzate nel riquadro Rendimento

Passa il mouse sopra un indicatore Web Vitals nel riquadro Rendimento per capire a cosa si riferisce l'indicatore, se il rendimento è buono, richiede miglioramenti o è scarso.

Popup di informazioni su Web Vitals

Problema di Chromium: 1147872

Visualizzare lo snap scorrevole CSS

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

scroll-snap CSS

Quando a un elemento HTML della pagina (ad es. questa pagina di demo) è stato applicato scroll-snap-type, accanto all'elemento viene visualizzato un badge scroll-snap nel riquadro Elementi. Fai clic sul badge per attivare/disattivare la visualizzazione di un overlay di scorrimento nella pagina.

Nell'esempio riportato sopra, puoi vedere i segni di puntini sui bordi di aggangione. La porta di scorrimento ha un contorno pieno, mentre gli elementi di agganci hanno un contorno tratteggiati. Il padding di scorrimento è di colore verde, mentre il margine di scorrimento è di colore arancione.

Problema di Chromium: 862450

Nuovo Controllo memoria

Utilizza il nuovo strumento di ispezione della memoria per ispezionare 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 nella riga 18.

Aggiorna la pagina. Espandi la sezione Ambito nel riquadro del debugger a destra. Notare la nuova icona accanto al valore 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 dei 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. Seleziona Impostazioni badge dal menu contestuale. Il riquadro delle impostazioni del badge viene visualizzato in alto. Attiva o disattiva una casella di controllo per mostrare/nascondere i badge.

Problema di Chromium: 1066772

Anteprima migliorata delle immagini 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, se necessario, ad applicare l'ottimizzazione.

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 delle immagini nel riquadro Rete

Problemi di Chromium: 1149832, 1170656

Nuovo pulsante 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.

Alla 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.

Pulsante Nuove condizioni di rete con opzioni per configurare l'codifica dei contenuti

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 di 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 provarlo.

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 imminenti che comportano un errore e possibili miglioramenti per una migliore indicazione della gravità. Puoi aprire la scheda Problemi facendo clic sul pulsante Numero di problemi nella Console.

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

Classificare i tipi di problemi con colori e icone

Problema di Chromium: 1183241

Eliminare i token di attendibilità

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 dalle persone reali, senza il monitoraggio passivo. Scopri come iniziare a utilizzare i token di attendibilità.

Eliminare i token di attendibilità

Problema di Chromium: 1126824

Visualizzare i dettagli sulle funzionalità bloccate nella visualizzazione Dettagli frame

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

Apri questa pagina demo. Vai al riquadro Applicazione e seleziona un frame. Nella sezione Norme relative alle autorizzazioni, scorri fino alla proprietà Funzionalità disattivate. Fai clic su Mostra dettagli per visualizzare i dettagli sul motivo del blocco della funzionalità. Fai clic sull'icona accanto a ciascun criterio per accedere all'iframe o alla richiesta di rete che ha bloccato la funzionalità.

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

Funzionalità bloccate nella visualizzazione dei dettagli del frame

Problema di Chromium: 1158827

Filtrare gli esperimenti nell'impostazione Esperimenti

Trova più velocemente gli esperimenti con il nuovo filtro degli esperimenti. Ad esempio, vai a Impostazioni > Esperimenti, nella casella di testo Filtra digita "contrasto" 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 di risposta HTTP Vary.

Colonna Intestazione Vary

Problema di Chromium: 1186049

Miglioramenti al riquadro Origini

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 del brand privato estende l'operatore in per supportare i test dei campi di classi private su qualsiasi oggetto.

Prova questa funzionalità nel riquadro Console e Origini. Puoi ispezionare i campi privati anche nella sezione Ambito del riquadro del debugger.

Controlli del brand privato JavaScript

Problema di Chromium: 11374

Supporto migliorato per il debug dei breakpoint

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 i punti di interruzione solo in una posizione non elaborata. Con 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 notazione []

DevTools ora supporta 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

Schema dei file HTML migliorato

DevTools ora offre un supporto migliore per gli schemi dei file HTML. Nel riquadro Origini, apri un file HTML. Puoi attivare/disattivare lo schema del codice con Cmd + Maiusc + O sulla tastiera su Mac o Ctrl + Maiusc + O su Windows.

Nell'esempio seguente, DevTools ora elenca correttamente tutte le funzioni nell'outline. In precedenza, DevTools mostrava solo alcune funzioni.

Schema dei file HTML migliorato

Problema di Chromium: 761019, 1191465

Analisi dello stack degli errori corrette per il debug di Wasm

DevTools ora risolve le chiamate di funzioni in linea e mostra le tracce dello stack di errori appropriate per il debug di Wasm.

In precedenza, DevTools mostrava solo riferimenti Wasm generici nelle analisi dello stack degli errori.

Analisi dello stack degli errori corrette per il debug di Wasm

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

Problema di Chromium: 1189161

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.

Novità di DevTools

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