Novità di DevTools (Chrome 87)

Nuovi strumenti di debug di CSS Grid

Gli Strumenti per sviluppatori ora offrono un supporto migliore per il debug della griglia CSS.

Quando a un elemento HTML della pagina viene applicato display: grid o display: inline-grid, accanto al relativo elemento nel riquadro Elementi viene visualizzato un badge grid. Fai clic sul badge per attivare/disattivare la visualizzazione di un overlay a griglia nella pagina.

Il nuovo riquadro Layout contiene una sezione Griglia che offre una serie di opzioni per visualizzare le griglie.

Per scoprire di più, consulta la documentazione.

Problema di Chromium: 1047356

Nuova scheda WebAuthn

Ora puoi emulare gli autenticatori e eseguire il debug dell'API Web Authentication con la nuova scheda WebAuthn.

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

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

Con la nuova scheda WebAuthn, gli sviluppatori web ora possono emulare questi autenticatori, personalizzare le loro funzionalità e ispezionarne gli stati, senza bisogno di autenticatori fisici. In questo modo, l'esperienza di debug è molto più semplice.

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

Problema di Chromium: 1034663

Spostare gli strumenti tra il riquadro superiore e quello inferiore

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

Ad esempio, se vuoi visualizzare contemporaneamente i riquadri Elementi e Origini, puoi fare clic con il tasto destro del mouse sul riquadro Origini e selezionare Sposta in basso per spostarlo in basso.

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

Problema di Chromium: 1075732

Aggiornamenti del riquadro Elementi

Visualizzare il riquadro della barra laterale Stili elaborati nel riquadro Stili

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

Il riquadro Barra laterale Stili elaborati nel riquadro Stili è compresso per impostazione predefinita. Fai clic sul pulsante per attivarlo o disattivarlo.

Problema di Chromium: 1073899

Raggruppare le proprietà CSS nel riquadro Elaborato

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

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

Nel riquadro Elementi, seleziona un elemento. Attiva/disattiva la casella di controllo Raggruppa per raggruppare/sraggruppare le proprietà CSS.

Problemi di Chromium: 1096230, 1084673, 1106251

Lighthouse 6.4 nel riquadro Lighthouse

Il riquadro Lighthouse ora esegue Lighthouse 6.4. Consulta le note di rilascio per un elenco completo delle modifiche.

Nuovi controlli in Lighthouse 6.4:

• Precarica i caratteri. Verifica se tutti i caratteri che utilizzanofont-display: optional sono stati precaricati.
• Mappe di origine valide. Controlla se una pagina ha mappe di origine valide per file JavaScript proprietari di grandi dimensioni.
• [Sperimentale] Libreria JavaScript di grandi dimensioni. Le librerie JavaScript di grandi dimensioni possono causare scarse prestazioni. Questo controllo suggerisce alternative più economiche alle librerie JavaScript comuni di grandi dimensioni come moment.js.

Problema di Chromium: 772558

Eventi performance.mark() nella sezione Tempi

La sezione Tempi di una registrazione del rendimento ora contrassegna gli eventi performance.mark().

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, usa resource-type:image per concentrarti sulle richieste di rete che sono immagini.

Consulta l'articolo su come filtrare le richieste in base alle proprietà per scoprire altre parole chiave speciali come resource-type e url.

Problemi di Chromium: 1121141, 1104188

Aggiornamenti alla visualizzazione dei dettagli della struttura

Mostra l'endpoint reporting to COEP e COOP

Ora puoi visualizzare l'endpoint dei criteri di incorporamento cross-origin (COEP) e dei criteri di apertura cross-origin (COOP)reporting to nella sezione Sicurezza e isolamento.

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

Leggi questo articolo per scoprire di più su come attivare COEP e COOP e rendere il tuo sito web "isolato da origini diverse".

Problema di Chromium: 1051466

Visualizza la modalità report-only COEP e COOP

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

Guarda questo video per scoprire come impedire le fughe di informazioni e attivare COOP e COEP nel tuo sito web.

Problema di Chromium: 1051466

Ritiro di Settings nel menu Altri strumenti

Il pulsante Settings nel menu Altri strumenti è stato ritirato. Apri le Impostazioni dal riquadro principale.

Problema di Chromium: 1121312

Funzionalità sperimentali

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

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

In questo esempio, la pagina di demo presenta un problema di basso contrasto dei colori. Fai clic sul problema per visualizzare un elenco di elementi che presentano il problema.

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

Problema di Chromium: 1120316

Personalizzare 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 a forma di matita) per personalizzare la scorciatoia da tastiera.

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

Problema di Chromium: 174309

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.

• Inviaci feedback e richieste di funzionalità all'indirizzo crbug.com.
• Segnala un problema DevTools utilizzando more_vert Altre opzioni > Guida > Segnala un problema DevTools in DevTools.
• Invia un tweet all'account @ChromeDevTools.
• Lascia un commento sui video di YouTube Novità di DevTools o sui video di YouTube Suggerimenti per DevTools.

Novità di DevTools

Un elenco di tutto ciò che è stato trattato nella serie Novità di DevTools.