Novità di DevTools (Chrome 96)

Jecelyn Yeen

Funzionalità in anteprima: nuovo riquadro Panoramica CSS

Utilizza il nuovo riquadro Panoramica CSS per identificare potenziali miglioramenti al CSS sulla tua pagina. Apri il riquadro Panoramica CSS, quindi fai clic su Acquisisci panoramica per generare un report del CSS della tua pagina.

Puoi esaminare in dettaglio le informazioni. Ad esempio, fai clic su un colore nella sezione Colori per visualizzare l'elenco degli elementi che utilizzano lo stesso colore. Fai clic su un elemento per aprirlo nel riquadro Elementi.

Il riquadro Panoramica CSS è una funzionalità in anteprima. Il nostro team sta ancora lavorando attivamente a questa funzionalità e siamo impazienti di ricevere il tuo feedback per ulteriori miglioramenti.

Leggi questo articolo per scoprire di più sul riquadro Panoramica CSS.

Riquadro Panoramica CSS

Problema di Chromium: 1254557

Esperienza di modifica e copia della lunghezza del CSS ripristinata e migliorata

L'esperienza Copia CSS e Modifica come testo viene ripristinata per le proprietà CSS con lunghezza. Queste esperienze non funzionano nell'ultima release.

Inoltre, puoi trascinare per regolare il valore dell'unità e aggiornare il tipo di unità tramite il menu a discesa. Questa funzionalità di creazione della durata del componente aggiuntivo non dovrebbe influire sull'esperienza di modifica principale come testo.

Se hai riscontrato problemi, segnalali tramite goo.gle/length-feedback.

Puoi disattivarla tramite la casella di controllo Impostazioni > Esperimenti > Attiva gli strumenti di creazione della lunghezza CSS nel riquadro Stili.

Problemi di Chromium: 1259088, 1172993

Aggiornamenti della scheda Rendering

Emula la funzionalità dei contenuti multimediali prefers-contrast del CSS

Emula la funzionalità dei contenuti multimediali prefers-contrast del CSS

La funzionalità multimediale prefers-contrast viene utilizzata per rilevare se l'utente ha richiesto un contrasto maggiore o minore nella pagina.

Apri il menu Comando, esegui il comando Mostra rendering e poi imposta il menu a discesa Emula prefers-contrast della funzionalità multimediale CSS.

Problema di Chromium: 1139777

Emula la funzionalità Tema scuro automatico di Chrome

Utilizza DevTools per emulare il tema scuro automatico e vedere facilmente l'aspetto della pagina quando è attivato il tema scuro automatico di Chrome.

Chrome 96 introduce una prova dell'origine per il tema scuro automatico su Android. Con questa funzionalità, il browser applica un tema scuro generato automaticamente ai siti con tema chiaro quando l'utente ha attivato i temi scuri nel sistema operativo.

Apri il menu dei comandi, esegui il comando Mostra rendering e poi imposta il menu a discesa Emula modalità Buio automatica.

Emula la funzionalità Tema scuro automatico di Chrome

Problema di Chromium: 1243309

Copia le dichiarazioni come JavaScript nel riquadro Stili

Nel menu contestuale sono state aggiunte due nuove opzioni per copiare facilmente le regole CSS come proprietà JavaScript. Queste opzioni di scorciatoia sono utili soprattutto per gli sviluppatori che lavorano con le librerie CSS-in-JS.

Nel riquadro Stili, fai clic con il tasto destro del mouse su una regola CSS. Puoi selezionare Copia dichiarazione come JS per copiare una singola regola o Copia tutte le dichiarazioni come JS per copiare tutte le regole.

Ad esempio, il codice riportato di seguito copierà paddingLeft: '1.5rem' negli appunti.

Copia dichiarazione come JavaScript

Problema di Chromium: 1253635

Nuova scheda Payload nel riquadro Rete

Utilizza la nuova scheda Payload nel riquadro Rete quando esamini una richiesta di rete con payload. In precedenza, le informazioni sul payload erano disponibili nella scheda Intestazioni.

Scheda Carico utile nel riquadro Rete

Problema di Chromium: 1214030

È stato migliorato il modo in cui le proprietà vengono visualizzate nel riquadro Proprietà

Il riquadro Proprietà ora mostra solo le proprietà pertinenti anziché tutte le proprietà dell'istanza. I prototipi e i metodi DOM sono stati rimossi.

Grazie ai miglioramenti apportati al riquadro Proprietà in Chrome 95, ora puoi individuare più facilmente le proprietà pertinenti.

Visualizzazione delle proprietà nel riquadro Proprietà

Problema di Chromium: 1226262

Aggiornamenti della console

Opzione per nascondere gli errori CORS nella console

Puoi nascondere gli errori CORS nella console. Poiché gli errori CORS vengono ora segnalati nella scheda Problemi, nasconderli nella console può contribuire a ridurre il disordine.

Nella console, fai clic sull'icona Impostazioni e deseleziona la casella di controllo Mostra errori CORS nella console.

Opzione per nascondere gli errori CORS nella console

Problema di Chromium: 1251176

Anteprima e valutazione corrette degli oggetti Intl nella console

Gli oggetti Intl ora hanno un'anteprima corretta e vengono valutati immediatamente nella console. In precedenza, gli oggetti Intl non venivano valutati in modo eager.

Oggetti Intl nella console

Problema di Chromium: 1073804

Analisi dello stack asincrone coerenti

La console ora segnala le async stack trace per le funzioni async per essere coerente con altre attività asincrone e con ciò che viene mostrato nello stack di chiamate.

analisi dello stack asincrone

Problema di Chromium: 1254259

Mantenere la barra laterale della console

La barra laterale della console è destinata a rimanere. In Chrome 94 abbiamo annunciato l'imminente ritiro della barra laterale della console e abbiamo chiesto agli sviluppatori di fornire feedback e segnalare eventuali dubbi.

Abbiamo ricevuto un numero sufficiente di feedback in merito all'avviso di ritiro e lavoreremo per migliorare la barra laterale anziché rimuoverla.

Barra laterale della console

Problemi di Chromium: 1232937, 1255586

Riquadro Cache applicazione obsoleto nel pannello Applicazione

Il riquadro Cache applicazione nel pannello Applicazione è stato rimosso perché il supporto per AppCache è stato rimosso da Chrome e da altri browser basati su Chromium.

Problema di Chromium: 1084190

[Sperimentale] Nuovo riquadro dell'API Reporting nel riquadro Applicazione

L'API Reporting è progettata per aiutarti a monitorare le violazioni della sicurezza della tua pagina, le chiamate API ritirate e altro ancora.

Con questo esperimento attivato, ora puoi visualizzare lo stato dei report nel nuovo riquadro dell'API di reporting nel riquadro Applicazione.

Tieni presente che la sezione Endpoint è attualmente ancora in fase di sviluppo attivo (al momento non vengono visualizzati endpoint di reporting).

Scopri di più sull'API di reporting con questo articolo.

Riquadro API di reporting nel pannello Applicazione

Problema di Chromium: 1205856

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.