Novità di DevTools (Chrome 90)

Jecelyn Yeen

Nuovi strumenti di debug per flexbox CSS

DevTools ora dispone di strumenti di debug CSS flexbox dedicati.

Strumenti di debug flexbox CSS

Quando a un elemento HTML della pagina viene applicato display: flex o display: inline-flex, accanto al relativo elemento nel riquadro Elementi viene visualizzato un badge flex. Fai clic sul badge per attivare/disattivare la visualizzazione di un overlay flex nella 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 consente di modificare rapidamente le proprietà flexbox. Fai una prova.

Inoltre, il riquadro Layout contiene una sezione Flexbox che mostra tutti gli elementi flexbox della pagina. Puoi attivare e disattivare l'overlay di ogni elemento.

Sezione Flexbox nel riquadro Layout

Problemi di Chromium: 1166710, 1175699

Nuovo overlay di Core Web Vitals

Visualizza e misura meglio il rendimento della tua pagina con il nuovo overlay Core Web Vitals.

Core Web Vitals è un'iniziativa di Google che intende fornire linee guida unificate per gli indicatori di qualità che sono essenziali per offrire un'esperienza utente ottimale sul web.

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

Al momento l'overlay 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 FID inferiore a 100 millisecondi.
  • CLS (Cumulative Layout Shift): misura la stabilità visiva. Per offrire una buona esperienza utente, le pagine devono mantenere un CLS inferiore a 0,1.

Overlay di Core Web Vitals

Problema di Chromium: 1152089

Aggiornamenti della scheda Problemi

Il conteggio dei problemi è stato 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. Il messaggio del problema verrà sostituito nella console.

Numero di problemi nella barra di stato della 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 all'Attività web attendibile dei loro siti, migliorando la qualità delle loro applicazioni.

Apri un'attività web attendibile. Apri le schede Problemi facendo clic sul pulsante Numero di problemi nella barra di stato di Console per visualizzare i problemi. Guarda questo intervento di Andre per scoprire di più su come creare ed eseguire il deployment dell'Attività web attendibile.

Problemi relativi all'Attività web attendibile nella scheda Problemi

Problema di Chromium: 1147479

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

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

Formatta le stringhe come valori letterali di stringa JavaScript (validi)

Problema di Chromium: 1178530

Riquadro Nuovi token di attendibilità nel riquadro Applicazione

Ora DevTools mostra tutti i Trust Token disponibili nel contesto di navigazione corrente nel nuovo riquadro Trust Token, nel riquadro Applicazione.

Trust Token è una nuova API che aiuta a contrastare le attività fraudolente e a distinguere i bot dalle persone reali, senza monitoraggio passivo. Scopri come iniziare a utilizzare i token di attendibilità.

Riquadro Nuovi token attendibili

Problema di Chromium: 1126824

Emula la funzionalità dei contenuti multimediali color-gamut del CSS

Emula la funzionalità dei contenuti multimediali color-gamut del CSS

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

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

Problema di Chromium: 1073887

Strumenti per le app web progressive migliorati

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

Avviso di installabilità della PWA

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

Avviso di troncamento della descrizione della PWA

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

Avviso sugli screenshot delle PWA

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 della rete di ogni risorsa di rete.

Nuova colonna "Spazio indirizzo remoto"

Problema di Chromium: 1128885

Miglioramenti del rendimento

Le prestazioni dei caricamenti delle pagine con DevTools aperto sono state migliorate. In alcuni casi estremi, abbiamo registrato un miglioramento del 10 volte delle prestazioni.

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

Continua a seguirci per scoprire ulteriori dettagli sull'implementazione in un post del blog dedicato al team tecnico.

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 dal criterio Autorizzazioni.

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

Funzionalità consentite/non consentite in base al criterio di autorizzazione

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.

Colonna Stessa parte

Problema di Chromium: 1161427

Supporto non standard di fn.displayName ritirato

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

Esempio di utilizzo di displayName

Chrome ha sempre supportato la proprietà non standard fn.displayName per consentire agli sviluppatori di controllare i nomi di debug per le funzioni visualizzate in error.stack e nelle tracce dello stack di DevTools. Nell'esempio riportato sopra, in precedenza Call Stack mostrava noLongerSupport.

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

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

Esempio di utilizzo del nome

Problema di Chromium: 1177685

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

L'impostazione Don't show Chrome Data Saver warning è stata rimossa perché la funzionalità Risparmio dati di Chrome è stata ritirata.

Impostazioni "Non mostrare l'avviso di Risparmio dati di Chrome" ritirate

Problema di Chromium: 1056922

Funzionalità sperimentali

Segnalazione automatica dei problemi di basso contrasto nella scheda Problemi

DevTools ha 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 consente agli sviluppatori di individuarli più facilmente.

Apri una pagina con problemi di basso contrasto (ad es. questa demo). Quindi, apri le schede Problemi facendo clic sul pulsante Numero di problemi nella barra di stato di Console per visualizzarli.

Report automatici sui problemi di basso contrasto

Problema di Chromium: 1155460

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

Ora puoi attivare/disattivare la visualizzazione ad albero dell'accessibilità completa di una pagina, nuova e migliorata.

L'attuale riquadro di accessibilità fornisce una visualizzazione limitata dei suoi nodi, mostrando solo la catena di antenati diretti dal nodo principale al nodo ispezionato. La nuova visualizzazione ad albero dell'accessibilità ha lo scopo di 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 tra la struttura DOM esistente e la struttura di accessibilità completa.

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

Visualizzazione completa dell'albero dell'accessibilità

Problema di Chromium: 887173

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.