Novità di DevTools (Chrome 87)

Nuovi strumenti di debug della griglia CSS

DevTools ora supporta meglio il debug della griglia CSS.

Quando a un elemento HTML della pagina sono applicati display: grid o display: inline-grid, vedrai un badge grid accanto a quest'ultimo nel riquadro Elementi. Fai clic sul badge per attivare/disattivare la visualizzazione di una sovrapposizione di griglia sulla pagina.

Il nuovo riquadro Layout comprende la sezione Griglia che offre una serie di opzioni per la visualizzazione griglie.

Per saperne di più, consulta la documentazione.

Problema relativo a Chromium: 1047356

Nuova scheda WebAuthn

Ora puoi emulare gli autenticatori ed eseguire il debug dell'API Web Authentication con la nuova versione di WebAuthn .

Seleziona Altre opzioni > Altri strumenti > WebAuthn per aprire la scheda WebAuthn.

Prima della nuova scheda WebAuthn, non era previsto alcun supporto nativo di debug di WebAuthn su Chrome. Gli sviluppatori avevano bisogno di autenticatori fisici per testare la loro applicazione web con l'API Web Authentication.

Con la nuova scheda WebAuthn, gli sviluppatori web ora possono emulare questi autenticati, personalizzarne funzionalità e di controllare i loro stati, senza bisogno di autenticatori fisici. Ciò rende l'esperienza di debug in modo molto più semplice.

Consulta la nostra documentazione per scoprire di più sulla funzionalità WebAuthn.

Problema relativo a Chromium: 1034663

Spostare gli strumenti tra il riquadro superiore e inferiore

DevTools ora supporta lo spostamento degli strumenti in DevTools tra il riquadro superiore e quello inferiore. In questo modo puoi visualizzare due strumenti contemporaneamente.

Ad esempio, se vuoi visualizzare contemporaneamente il riquadro Elementi e Origini, puoi visualizzare Fai clic sul riquadro Origini e seleziona Sposta in basso per spostarlo in basso.

Analogamente, puoi spostare qualsiasi scheda dal basso verso l'alto facendo clic con il tasto destro del mouse su una scheda e selezionando Sposta in in alto.

Problema relativo a Chromium: 1075732

Aggiornamenti del riquadro degli elementi

Visualizza il riquadro della barra laterale Elaborato nel riquadro Stili

Ora puoi attivare/disattivare il riquadro Barra laterale calcolata nel riquadro Stili.

Il riquadro Barra laterale calcolata nel riquadro Stili è compresso per impostazione predefinita. Fai clic sul pulsante per attivare/disattivare.

Problema relativo a Chromium: 1073899

Raggruppamento di proprietà CSS nel riquadro Calcolato

Ora puoi raggruppare le proprietà CSS per categorie nel riquadro Elaborato.

Con la nuova funzionalità di raggruppamento, sarà più facile navigare nel riquadro Elaborato (meno lo scorrimento) e concentrarsi selettivamente su un insieme di proprietà correlate per l'ispezione CSS.

Nel riquadro Elementi, seleziona un elemento. Attiva/disattiva la casella di controllo Gruppo per raggruppare/separare il CSS proprietà.

Problemi relativi a Chromium: 1096230, 1084673, 1106251

Lighthouse 6.4 nel riquadro Lighthouse

Nel riquadro Lighthouse ora è in esecuzione Lighthouse 6.4. Consulta le note di rilascio per un l'elenco delle modifiche apportate.

Nuovi controlli in Lighthouse 6.4:

• Precarica i caratteri. Verifica se tutti i caratteri che utilizzano font-display: optional sono stati precaricati.
• Mappe di origine valide. Controlla se una pagina dispone di mappe di origine valide per il codice JavaScript proprietario di grandi dimensioni.
• [Sperimentale] Libreria JavaScript di grandi dimensioni. Le librerie JavaScript di grandi dimensioni possono causare delle prestazioni. Questo controllo suggerisce alternative più economiche alle comuni e grandi librerie JavaScript come moment.js.

Problema relativo a Chromium: 772558

performance.mark() eventi nella sezione Tempi

La sezione Tempi di una registrazione dell'esibizione ora contrassegna performance.mark() eventi.

Nuovi filtri resource-type e url nel riquadro Rete

Utilizza le nuove parole chiave resource-type e url nel riquadro Rete per filtrare le richieste di rete.

Ad esempio, utilizza resource-type:image per impostare lo stato attivo sulle richieste di rete che sono immagini.

Consulta le richieste di filtro per proprietà per scoprire altre parole chiave speciali come resource-type e url.

Problemi relativi a Chromium: 1121141, 1104188

Aggiornamenti della visualizzazione dei dettagli del frame

Visualizza endpoint COEP e COOP reporting to

Ora puoi visualizzare le norme COEP (Cross-Origin Embedder Policy) e Cross-Origin Opener Policy (COOP)reporting to nella sezione Sicurezza e Sezione Isolamento.

L'API di reporting definisce una nuova intestazione HTTP, Report-To, che offre agli sviluppatori web un modo per specificare gli endpoint server a cui il browser deve inviare avvisi ed errori.

Leggi questo articolo per scoprire di più su come attivare COEP e COOP e creare il tuo sito web "con isolamento multiorigine".

Problema relativo a Chromium: 1051466

Visualizza modalità COEP e COOP report-only

DevTools ora mostra l'etichetta report-only per COEP e COOP che sono impostate sulla modalità report-only.

Guarda questo video per scoprire come prevenire le fughe di informazioni e attivare COOP e COEP in del tuo sito web.

Problema relativo a Chromium: 1051466

Ritiro di Settings nel menu Altri strumenti

L'elemento Settings nel menu Altri strumenti è stato ritirato. Apri le Impostazioni dal riquadro principale .

Problema relativo a Chromium: 1121312

Funzionalità sperimentali

Visualizzare e correggere i problemi di contrasto di colore nel riquadro Panoramica CSS

Il riquadro Panoramica CSS ora mostra un elenco dei testi della pagina con basso contrasto di colore.

In questo esempio, la pagina demo presenta un problema di basso contrasto di colore. Fai clic sul problema, puoi visualizzare un elenco degli elementi che presentano il problema.

Fai clic su un elemento nell'elenco per aprirlo nel riquadro Elementi. DevTools fornisce funzionalità suggerimento di colore per aiutarti a correggere il testo con basso contrasto.

Problema relativo a Chromium: 1120316

Personalizza le scorciatoie da tastiera in DevTools

Ora puoi personalizzare le scorciatoie da tastiera per i tuoi comandi preferiti in DevTools.

Vai a Impostazioni > Scorciatoie: passa il mouse sopra un comando e fai clic sul pulsante Modifica (icona della penna). per personalizzare la scorciatoia da tastiera.

Per reimpostare tutte le scorciatoie, fai clic su Ripristina scorciatoie predefinite.

Problema relativo a Chromium: 174309

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.