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 nella tua pagina. Apri il riquadro Panoramica CSS, quindi fai clic su Acquisisci panoramica per generare un report del CSS della tua pagina.

Puoi visualizzare ulteriori informazioni. Ad esempio, fai clic su un colore nella sezione Colori per visualizzare l'elenco degli elementi a cui è applicato 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 in attesa del 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 CSS ripristinata e migliorata

L'esperienza di copia del CSS e di modifica come testo viene ripristinata per le proprietà CSS con lunghezza. Queste esperienze non sono disponibili nell'ultima release.

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

Se riscontri problemi, segnalali all'indirizzo goo.gle/length-feedback.

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

Problemi di Chromium: 1259088, 1172993

Aggiornamenti della scheda di rendering

Emula la funzionalità dei contenuti multimediali CSS prefers-contrast

Emula la funzionalità dei contenuti multimediali CSS prefers-contrast

La funzionalità multimediale prefers-contrast viene utilizzata per rilevare se l'utente ha richiesto più o meno contrasto nella pagina.

Apri il menu Comando, esegui il comando Mostra rendering e imposta il menu a discesa Emula la funzionalità preferiti-contrasto del CSS.

Problema di Chromium: 1139777

Emulare la funzionalità Tema scuro automatico di Chrome

Utilizza DevTools per emulare il tema scuro automatico e vedere facilmente l'aspetto della tua 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, se l'utente ha attivato i temi scuri nel sistema operativo.

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

Emulare la funzionalità Tema scuro automatico di Chrome

Problema di Chromium: 1243309

Copiare 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 utilizzano 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, l'esempio seguente copia 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 Network quando ispezioni una richiesta di rete con payload. In precedenza, le informazioni sul payload erano disponibili nella scheda Intestazioni.

Scheda Payload nel riquadro Rete

Problema di Chromium: 1214030

È stata migliorata la visualizzazione delle proprietà nel riquadro Proprietà

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

Insieme ai miglioramenti del 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é ora gli errori CORS vengono segnalati nella scheda Problemi, nasconderli nella console può contribuire a ridurre le interferenze.

Nella console, fai clic sull'icona Impostazioni e deseleziona la casella di controllo Mostra gli 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 in modo esplicito nella console. In precedenza, gli oggetti Intl non venivano valutati in modo esplicito.

Oggetti Intl nella console

Problema di Chromium: 1073804

Analisi dello stack asincrone coerenti

La console ora segnala che le tracce dello stack async per le funzioni async sono coerenti con le altre attività asincrone e con quanto mostrato nello stack chiamate.

analisi dello stack asincrone

Problema di Chromium: 1254259

Mantieni la barra laterale della console

La barra laterale della console è destinata a durare. In Chrome 94 abbiamo annunciato il ritiro imminente della barra laterale della console e abbiamo chiesto agli sviluppatori di inviarci feedback e dubbi.

Abbiamo ricevuto un numero sufficiente di feedback dall'avviso di ritiro e ci impegneremo a migliorare la barra laterale anziché rimuoverla.

Barra laterale della console

Problemi di Chromium: 1232937, 1255586

Riquadro Cache applicazione deprecato nel riquadro Applicazione

Il riquadro Cache delle applicazioni nel riquadro App è stato rimosso perché il supporto di AppCache è stato rimosso da Chrome e da altri browser basati su Chromium.

Problema di Chromium: 1084190

[Sperimentale] Nuovo riquadro API di 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 abilitato, ora puoi visualizzare lo stato dei report nel nuovo riquadro API di reporting del riquadro Application (Richiesta).

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

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

Riquadro API di reporting nel riquadro Applicazione

Problema di Chromium: 1205856

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.