Novità di DevTools (Chrome 91)

Nel riquadro Prestazioni vengono visualizzate le informazioni relative a Web Vitals.

Passa il mouse sopra un indicatore Web Vitals nel riquadro Rendimento per capire di cosa si tratta: se le prestazioni sono buone, richiedono miglioramenti o scarse.

Problema relativo a Chromium: 1147872

Visualizza scorri-snap CSS

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

Quando a un elemento HTML della tua pagina (ad esempio questa demo) è applicato scroll-snap-type, puoi vedere un badge scroll-snap accanto a quest'ultimo nel riquadro Elementi. Fai clic sul badge per attivare/disattivare la visualizzazione di un overlay di scorrimento sulla pagina.

Nell'esempio precedente, puoi vedere dei punti sui bordi di agganciamento. La porta di scorrimento presenta contorni in tinta unita mentre gli elementi di aggancio hanno contorni tratteggiati. La spaziatura interna di scorrimento è di colore verde, mentre il margine di scorrimento è di colore arancione.

Problema relativo a Chromium: 862450

Nuovo Controllo memoria

Usa il nuovo Controllo memoria per ispezionare un ArrayBuffer in JavaScript e la memoria Wasm.

Apri questa pagina demo. 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. Osserva la nuova icona accanto al valore del buffer. Fai clic sul pulsante per visualizzare il Controllo memoria.

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

Problema relativo a Chromium: 1166577

Riquadro delle nuove impostazioni del badge nel riquadro Elementi

Ora puoi attivare o disattivare selettivamente i badge tramite le impostazioni del badge nel riquadro Elementi. Utilizza questa funzione per personalizzare e concentrarti sui badge importanti durante l'ispezione delle pagine web.

Nel riquadro Elementi, fai clic con il tasto destro del mouse su qualsiasi elemento. 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 relativo a Chromium: 1066772

Anteprima dell'immagine migliorata con informazioni sulle proporzioni

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

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

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

Problemi relativi a Chromium: 1149832, 1170656

Pulsante Nuove condizioni di rete con opzioni per configurare i Content-Encoding

Viene aggiunto un nuovo pulsante con le condizioni di rete nel riquadro Rete. Fai clic sul cluster per aprire la scheda Condizioni di rete.

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

Problema relativo a Chromium: 1162042

Miglioramenti al riquadro degli 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.

Problema relativo a 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 intenso 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.

Problema relativo a Chromium: 1092093

Classifica i tipi di problemi con colori e icone

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

• Errori di pagina (rosso). Problemi che hanno un impatto immediato sulla funzionalità della pagina, come la mancata impostazione di intestazioni CORS corrette e così via.
• Modifiche che provocano un errore (giallo). Problemi che informano di un'imminente modifica 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 della pagina, ma al momento non stanno compromettendo la funzionalità di base della pagina (ad es.problemi di accessibilità).

Problema relativo a Chromium: 1183241

Elimina token di attendibilità

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

Trust Token è una nuova API che aiuta a combattere le frodi e a distinguere i bot da persone reali, senza il monitoraggio passivo. Scopri come iniziare a utilizzare i token attendibili.

Problema relativo a Chromium: 1126824

Visualizzare i dettagli delle funzionalità bloccate nella visualizzazione Dettagli frame

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

Apri questa pagina demo. Vai al riquadro Applicazione e seleziona un frame. Nella sezione Criterio autorizzazioni, scorri fino alla proprietà Funzionalità disattivate. Fai clic su Mostra dettagli per visualizzare i dettagli sul motivo per cui la funzionalità è bloccata. Fai clic sull'icona accanto a ciascuna norma per accedere 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 consentire o bloccare l'utilizzo delle funzionalità del browser nel proprio frame o negli iframe incorporati.

Problema relativo a Chromium: 1158827

Filtrare gli esperimenti nell'impostazione Esperimenti

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

Nuova colonna Vary Header nel riquadro Spazio di archiviazione cache

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

Problema relativo a Chromium: 1186049

Miglioramenti al riquadro Origini

Supporto per nuove funzionalità JavaScript

Gli strumenti DevTools ora supportano la nuova funzionalità del linguaggio JavaScript per il controllo privato del brand, ovvero #foo in obj.

Questa funzionalità di controlli del brand privati estende l'operatore in per supportare i test dei campi delle classi privati su qualsiasi oggetto specifico.

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

Problema relativo a Chromium: 11374

Supporto migliorato per il debug dei punti di interruzione

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

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

Problemi relativi a Chromium: 1142705, 979000, 1180794

Supporta l'anteprima al passaggio del mouse con la notazione []

DevTools ora supporta l'anteprima al passaggio del mouse sulle espressioni membro JavaScript che utilizzano la notazione [] nel riquadro Origini.

Problema relativo a Chromium: 1178305

Struttura dei file HTML migliorata

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 tastiera Cmd + Maiusc + O sul Mac o Ctrl + Maiusc + O in Windows.

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

Problema relativo a Chromium: 761019, 1191465

Analisi dello stack di errori corrette per il debug di Wasm

DevTools ora risolve le chiamate di funzione in linea e mostra le analisi dello stack di errori corrette per il debug di Wasm.

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

La versione precedente di Chrome a sinistra non mostra la posizione di origine (ad esempio dsquare) nelle analisi dello stack degli errori, mentre la nuova versione a destra sì.

Problema relativo a 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 in 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   > 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.