Questa pagina è stata tradotta dall'API Cloud Translation.

Novità di DevTools (Chrome 91)

Jecelyn Yeen

Popup delle informazioni di Web Vitals nel riquadro Prestazioni

Passa il mouse sopra un indicatore di Segnali web nel riquadro Prestazioni per capire di cosa si tratta l'indicatore: se il rendimento è buono, deve essere migliorato o è scarso.

Popup con le informazioni relative a Web Vitals

Problema di Chromium: 1147872

Visualizzare lo scroll-snap in CSS

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

Scorrimento CSS

Quando a un elemento HTML della tua pagina (ad esempio questa pagina demo) è 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 un overlay a scorrimento sulla pagina.

Nell'esempio precedente sono presenti segni di punti sui bordi di aggancio. La porta di scorrimento ha i contorni continui, mentre gli elementi di agganciamento hanno i contorni del trattino. La spaziatura interna di scorrimento viene riempita in verde, mentre il margine di scorrimento è impostato in arancione.

Problema di Chromium: 862450

Nuovo strumento di controllo della memoria

Utilizza il nuovo strumento di ispezione della 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 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 controllo della memoria.

Strumento di controllo della memoria

Problema di Chromium: 1166577

Nuovo riquadro delle impostazioni del badge nel riquadro Elementi

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

Nel riquadro Elementi, fai clic con il tasto destro del mouse su un elemento qualsiasi. Seleziona Impostazioni del badge dal menu contestuale per visualizzare il riquadro delle impostazioni del badge in alto. Attiva o disattiva le caselle 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 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.

Anteprima dell'immagine con informazioni sulle proporzioni

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

Informazioni sulle proporzioni dell'immagine nel riquadro Rete

Problemi di Chromium: 1149832, 1170656

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

Nel riquadro Rete viene aggiunto un nuovo pulsante per le condizioni della rete. Fai clic sulla scheda 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 la 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 contrasto 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.

colore intenso

Problema di Chromium: 1092093

Classifica i tipi di problemi con colori e icone

Nella scheda Problemi è ora possibile classificare 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 Numero di problemi nella console.

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

Classifica i tipi di problemi con colori e icone

Problema di Chromium: 1183241

Elimina token di attendibilità

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

Trust Token è una nuova API che aiuta a contrastare le attività fraudolente e a distinguere i bot da esseri umani reali, senza monitoraggio passivo. Scopri come iniziare a utilizzare i token di attendibilità.

Elimina token di attendibilità

Problema di Chromium: 1126824

Vedi i dettagli sulle funzionalità bloccate nella visualizzazione dei dettagli del frame

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

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

Le norme relative alle autorizzazioni sono un'API per piattaforme 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

Filtra gli esperimenti nell'impostazione Esperimenti

Trova gli esperimenti più velocemente 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".

Filtra gli esperimenti nell'impostazione Esperimenti

Nuova colonna `Vary Header` nel riquadro Archiviazione cache

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

Varia colonna intestazione

Problema di Chromium: 1186049

Miglioramenti al riquadro Origini

Supporto per nuove funzionalità JavaScript

DevTools ora supporta la nuova funzionalità del linguaggio JavaScript di controllo privato del brand, chiamata #foo in obj.

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

Provala nella console e nel riquadro Origini. Puoi esaminare i campi privati nella sezione Ambito del riquadro debugger.

Problema di Chromium: 11374

Supporto avanzato 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 Aggregazione) supportano la funzionalità di suddivisione del codice, in alcuni casi è possibile includere un componente condiviso in più route (suddivisioni del codice).

In precedenza, DevTools era in grado di impostare punti di interruzione solo su una posizione non elaborata. Con quest'ultimo miglioramento, DevTools può impostare correttamente i punti di interruzione in tutte le posizioni pertinenti.

Problemi di Chromium: 1142705, 979000, 1180794

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

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

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

Problema di 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 su 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.

Struttura dei file HTML migliorata

Problema di Chromium: 761019, 1191465

Analisi corrette dello stack di errori per il debug Wasm

DevTools ora risolve le chiamate alle funzioni 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 di errori.

Analisi corrette dello stack di errori per il debug Wasm

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

Problema di Chromium: 1189161

Scarica 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à di DevTools più recenti, di testare le API per piattaforme web all'avanguardia e di individuare eventuali problemi sul tuo sito prima che lo facciano gli utenti.

Contattare il team di Chrome DevTools

Utilizza le opzioni seguenti per discutere delle nuove funzionalità e delle modifiche nel post o di qualsiasi altra cosa relativa a DevTools.

Inviaci un suggerimento o un feedback tramite crbug.com.
Segnala un problema DevTools utilizzando Altre opzioni > Guida > Segnala i problemi di DevTools in DevTools.
Tweet all'indirizzo @ChromeDevTools.
Lascia commenti sui video di YouTube o sui suggerimenti di DevTools in DevTools Video di YouTube.