Novità di DevTools (Chrome 90)

Nuovi strumenti di debug di CSS Flexbox

DevTools ora dispone di strumenti di debug CSS flexbox dedicati.

Quando a un elemento HTML della pagina vengono applicati display: flex o display: inline-flex, puoi vedere un badge flex accanto nel riquadro Elementi. Fai clic sul badge per attivare/disattivare la visualizzazione di un overlay flessibile sulla pagina.

Nel riquadro Stili, puoi fare clic sulla nuova icona accanto a display: flex o display: inline-flex per aprire l'editor Flexbox. L'editor di Flexbox offre un modo rapido per modificare le proprietà flexbox. Prova anche tu.

Inoltre, il riquadro Layout contiene una sezione Flexbox che mostra tutti gli elementi flexbox sulla pagina. Puoi attivare/disattivare la sovrapposizione di ogni elemento.

Problemi di Chromium: 1166710, 1175699

Nuovo overlay di Core Web Vitals

Visualizza e misura meglio il rendimento della pagina con la nuova overlay Core Web Vitals.

Segnali web essenziali è un'iniziativa di Google pensata per offrire indicazioni unificate relative a indicatori di qualità fondamentali per garantire un'eccellente esperienza utente sul Web.

Apri il menu Comando, esegui il comando Mostra rendering e poi attiva la casella di controllo Core Web Vitals.

L'overlay attualmente mostra:

• Largest Contentful Paint (LCP): misura le prestazioni di caricamento. Per offrire una buona esperienza utente, l'LCP deve verificarsi entro 2,5 secondi dall'inizio del caricamento della pagina.
• First Input Delay (FID): misura l'interattività. Per offrire una buona esperienza utente, le pagine devono avere un valore FID inferiore a 100 millisecondi.
• Cumulative Layout Shift (CLS): misura la stabilità visiva. Per offrire una buona esperienza utente, le pagine devono mantenere un valore CLS inferiore a 0,1.

Problema di Chromium: 1152089

Aggiornamenti della scheda Problemi

Conteggio dei problemi spostato nella barra di stato della console

Nella barra di stato della console è stato aggiunto un nuovo pulsante per il conteggio dei problemi per migliorare la visibilità degli avvisi relativi ai problemi. Questo sostituirà il messaggio relativo al problema nella console.

Problema di Chromium: 1140516

Segnalare problemi relativi all'attività web attendibile

La scheda Problemi ora segnala i problemi relativi all'attività web attendibile. L'obiettivo è aiutare gli sviluppatori a comprendere e risolvere i problemi relativi alle attività web attendibili dei loro siti, migliorando la qualità delle loro applicazioni.

Apri un'attività web attendibile. Poi, apri le schede Problemi facendo clic sul pulsante Conteggio problemi nella barra di stato della console per visualizzare i problemi. Guarda questo intervento di Andre per scoprire di più su come creare ed eseguire il deployment di Trusted Web Activity.

Problema di Chromium: 1147479

Formatta le stringhe come valori letterali stringa JavaScript (validi) nella console

Ora, la console formatta le stringhe come stringhe letterali JavaScript valide nella console. In precedenza, la console non eseguiva l'escape delle virgolette doppie durante la stampa delle stringhe.

Problema di Chromium: 1178530

Nuovo riquadro Trust Tokens nel pannello Applicazione

DevTools ora mostra tutti i Trust Tokens disponibili nel contesto di navigazione attuale nel nuovo riquadro Trust Tokens, nel riquadro Applicazione.

Trust Token è una nuova API che aiuta a combattere le attività fraudolente e a distinguere i bot dagli utenti reali, senza tracciamento passivo. Scopri come iniziare a utilizzare i Trust Token.

Problema di Chromium: 1126824

Emula la funzionalità multimediale color-gamut del CSS

La media query color-gamut consente di testare l'intervallo approssimativo di colori supportati dal browser e dal dispositivo di output. Ad esempio, se la media query color-gamut: p3 corrisponde, significa che il dispositivo dell'utente supporta lo spazio colore Display P3.

Apri il menu Comando, esegui il comando Mostra rendering e poi imposta il menu a discesa Emula funzionalità dei contenuti multimediali color-gamut del CSS.

Problema di Chromium: 1073887

Strumenti per app web progressive migliorati

DevTools ora mostra un messaggio di avviso più dettagliato sull'installabilità delle app web progressive (PWA) nella console, con un link alla documentazione.

Il riquadro Manifest ora mostra un messaggio di avviso se la descrizione del manifest supera i 324 caratteri.

Inoltre, il riquadro Manifest ora mostra un messaggio di avviso se lo screenshot della PWA non soddisfa i requisiti. Scopri di più sulla proprietà screenshot della PWA e sui relativi requisiti qui.

Problema di Chromium: 1146450, 1169689, 965802

Nuova colonna Remote Address Space nel riquadro Rete

Utilizza la nuova colonna Remote Address Space nel riquadro Rete per visualizzare lo spazio degli indirizzi IP di rete di ogni risorsa di rete.

Problema di Chromium: 1128885

Miglioramenti del rendimento

Il rendimento dei caricamenti di pagina con DevTools aperto è ora migliorato. In alcuni casi estremi abbiamo riscontrato miglioramenti delle prestazioni pari a 10 volte.

DevTools raccoglie le analisi dello stack e le allega ai messaggi della console o alle attività asincrone per la successiva consultazione da parte dello sviluppatore in caso di problemi. Poiché questa raccolta deve avvenire in modo sincrono nel motore del browser, la raccolta lenta delle tracce dello stack può rallentare notevolmente la pagina con DevTools aperto. Siamo riusciti a ridurre in modo significativo l'overhead della raccolta delle analisi dello stack.

Continua a seguirci per leggere un post del blog di ingegneria più dettagliato sull'implementazione.

Problemi di Chromium: 1069425, 1077657

Visualizzare le funzionalità consentite/non consentite nella visualizzazione Dettagli frame

La visualizzazione dei dettagli del frame ora mostra un elenco delle funzionalità del browser consentite e non consentite controllate dalle norme relative alle autorizzazioni.

Le norme relative alle autorizzazioni sono un'API della piattaforma web che consente a un sito web di consentire o bloccare l'utilizzo delle funzionalità del browser nel proprio frame o negli iframe che incorpora.

Problema di Chromium: 1158827

Nuova colonna SameParty nel riquadro Cookie

Il riquadro Cookie nel riquadro Applicazione ora mostra l'attributo SameParty dei cookie. L'attributo SameParty è un nuovo attributo booleano che indica se un cookie deve essere incluso nelle richieste alle origini degli stessi insiemi proprietari.

Problema di Chromium: 1161427

Supporto di fn.displayName non standard ritirati

Il supporto per fn.displayName non standard è stato ritirato. Utilizza invece fn.name.

Chrome ha sempre supportato la proprietà non standard fn.displayName come modo per gli sviluppatori di controllare i nomi di debug per le funzioni visualizzate in error.stack e nelle tracce dello stack di DevTools. Nell'esempio precedente, lo stack di chiamate mostrava in precedenza noLongerSupport.

Sostituisci fn.displayName con fn.name standard, che è stato reso configurabile (tramite Object.defineProperty) in ECMAScript 2015 per sostituire la proprietà non standardfn.displayName.

Il supporto di fn.displayName non è stato affidabile e non è coerente tra i motori del browser. Rallenta la raccolta delle analisi dello stack, un costo che gli sviluppatori pagano sempre, indipendentemente dal fatto che utilizzino fn.displayName o meno.

Problema di Chromium: 1177685

Ritiro di Don't show Chrome Data Saver warning nel menu Impostazioni

L'impostazione Don't show Chrome Data Saver warning è stata rimossa perché Risparmio dati di Chrome è stato ritirato.

Problema di Chromium: 1056922

Funzionalità sperimentali

Segnalazione automatica dei problemi di basso contrasto nella scheda Problemi

Gli strumenti di sviluppo hanno aggiunto il supporto sperimentale per la segnalazione automatica dei problemi di contrasto nella scheda Problemi.

Il testo a basso contrasto è il problema di accessibilità più comune rilevabile automaticamente sul web. La visualizzazione di questi problemi nella scheda Problemi aiuta gli sviluppatori a individuarli più facilmente.

Apri una pagina con problemi di basso contrasto (ad es. questa demo). Poi, apri le schede Problemi facendo clic sul pulsante Conteggio problemi nella barra di stato della console per visualizzare i problemi.

Problema di Chromium: 1155460

Visualizzazione completa dell'albero dell'accessibilità nel riquadro Elementi

Ora puoi attivare/disattivare la visualizzazione dell'albero dell'accessibilità completo, nuovo e migliorato, di una pagina.

L'attuale riquadro Accessibilità offre una visualizzazione limitata dei nodi, mostrando solo la catena di antenati diretti dal nodo radice al nodo ispezionato. La nuova visualizzazione ad albero dell'accessibilità mira a migliorare questo aspetto e rende l'albero dell'accessibilità più esplorabile, utile e facile da usare per gli sviluppatori.

Dopo aver attivato l'esperimento, nel riquadro Elementi viene visualizzato un nuovo pulsante. Fai clic per passare dall'albero DOM esistente all'albero di accessibilità completo.

Tieni presente che si tratta di un esperimento in fase iniziale. Prevediamo di migliorare ed espandere la funzionalità nel corso del tempo.

Problema di Chromium: 887173

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.

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

Novità di DevTools

Un elenco di tutti gli argomenti trattati nella serie Novità di DevTools.