Novità di DevTools (Chrome 90)

Nuovi strumenti di debug flexbox CSS

DevTools ora dispone di strumenti di debug CSS dedicati.

Quando a un elemento HTML della pagina sono applicati display: flex o display: inline-flex, vedrai un badge flex accanto a quest'ultimo, nel riquadro Elementi. Fai clic sul badge per attivare/disattivare la visualizzazione 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 Flexbox offre un modo rapido per modificare le proprietà della flexbox. Fai una prova!

Inoltre, il riquadro Layout include una sezione Flexbox in cui sono visualizzati tutti gli elementi flexbox sul . Puoi attivare/disattivare l'overlay di ogni elemento.

Problemi relativi a Chromium: 1166710, 1175699

Nuovo overlay Core Web Vitals

Visualizza e misura meglio le prestazioni delle pagine con il nuovo overlay Core Web Vitals.

Core Web Vitals è un'iniziativa di Google per fornire indicazioni unificate per gli indicatori di qualità che sono essenziali per offrire una migliore esperienza utente sul web.

Apri il menu Comando, esegui il comando Mostra rendering, quindi attiva Core Web Vitals.

Attualmente l'overlay viene visualizzato:

• Largest Contentful Paint (LCP): misura il rendimento di caricamento. Per offrire un buon utente LCP dovrebbe avvenire entro 2, 5 secondi dal primo caricamento della pagina.
• First Input Delay (FID): misura l'interattività. Per offrire una buona esperienza utente, le pagine Deve avere un valore FID di meno di 100 millisecondi.
• Cumulative Layout Shift (CLS): misura la stabilità visiva. Per offrire un buon utente le pagine devono mantenere una CLS inferiore a 0, 1.

Problema relativo a Chromium: 1152089

Aggiornamenti della scheda Problemi

Conteggio 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à avvisi di errore. Il messaggio relativo al problema verrà sostituito nella console.

Problema relativo a Chromium: 1140516

Segnalare problemi relativi ad Attività web attendibili

La scheda Problemi ora segnala problemi relativi all'Attività web attendibile. Lo scopo è aiutare gli sviluppatori a comprendere e risolvere i problemi delle attività web attendibili dei propri siti, migliorando la qualità dei propri diverse applicazioni.

Apri un'attività web attendibile. Poi apri la scheda Problemi facendo clic su Conteggio problemi. nella barra di stato della console per visualizzare i problemi. Guarda questa presentazione di Andre per scoprire di più di più su come creare ed eseguire il deployment di un'Attività web attendibile.

Problema relativo a Chromium: 1147479

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

Ora la console formatta le stringhe come valori letterali di stringa JavaScript validi nella console. In precedenza, Nella console non vengono usate le virgolette doppie per la stampa di stringhe.

Problema relativo a Chromium: 1178530

Nuovo riquadro Trust Token nel riquadro Applicazione

DevTools ora mostra tutti i token attendibili disponibili nel contesto di navigazione corrente nel nuovo attendibilità Token, nel riquadro Applicazione.

Trust Token è una nuova API che aiuta a combattere le frodi e a distinguere i bot da quelli umani reali, senza alcuna il monitoraggio delle conversioni. Scopri come iniziare a utilizzare i token attendibili.

Problema relativo a Chromium: 1126824

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

La query multimediale color-gamut ti consente di verificare la gamma approssimativa di colori supportati dal browser e dal dispositivo di output. Ad esempio, se la query multimediale color-gamut: p3 corrisponde, indica che il dispositivo dell'utente supporta lo spazio colore Display-P3.

Apri il menu Comando, esegui il comando Mostra rendering, quindi imposta il campo Emula CSS menu a discesa della gamma di colori delle funzionalità multimediali.

Problema relativo a Chromium: 1073887

Strumenti per le app web progressive migliorati

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

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

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

Problema relativo a 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 di indirizzi IP di rete di ciascuna risorsa di rete.

Problema relativo a Chromium: 1128885

Miglioramenti del rendimento

Le prestazioni dei caricamenti delle pagine con DevTools aperti sono state migliorate. In alcuni casi estremi, abbiamo registrato 10 volte miglioramenti delle prestazioni.

DevTools raccoglie le analisi dello stack e le collega ai messaggi della console o ad attività asincrone per utilizzarli in un secondo momento. il consumo energetico da parte dello sviluppatore in caso di problemi. Poiché questa raccolta deve avvenire in modo sincrono nel motore del browser, la raccolta lenta dell'analisi dello stack può rallentare significativamente la pagina DevTools aperto. Siamo riusciti a ridurre in modo significativo l'overhead per la raccolta delle analisi dello stack.

Continuate a seguirci per un post del blog più dettagliato, dedicato all'ingegneria, che spiega l'implementazione.

Problemi relativi a Chromium: 1069425, 1077657

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

La visualizzazione Dettagli frame ora mostra un elenco di funzionalità del browser consentite e non consentite controllate dal Norme relative alle autorizzazioni.

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

Problema relativo a Chromium: 1158827

Nuova colonna SameParty nel riquadro Cookie

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

Problema relativo a Chromium: 1161427

Supporto fn.displayName non standard deprecato

Il supporto della versione non standard di fn.displayName è stato ritirato. Usa invece il criterio fn.name.

In genere, Chrome supporta la proprietà fn.displayName non standard come modo per agli sviluppatori di controllare i nomi di debug per le funzioni che vengono visualizzate in error.stack e nello stack DevTools le tracce audio. Nell'esempio precedente, lo Stack di chiamate mostrava in precedenza noLongerSupport.

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

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

Problema relativo a 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é è stato eseguito il Risparmio dati di Chrome ritirato.

Problema relativo a Chromium: 1056922

Funzionalità sperimentali

Segnalazione automatica di problemi a basso contrasto nella scheda Problemi

DevTools ha aggiunto automaticamente un supporto sperimentale per la segnalazione di problemi di contrasto nella scheda Problemi.

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

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

Problema relativo a Chromium: 1155460

Visualizzazione ad albero dell'accessibilità completa nel riquadro Elementi

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

Il riquadro di accessibilità attuale fornisce una visualizzazione limitata dei nodi, mostrando solo catena di predecessori diretta dal nodo radice al nodo ispezionato. La nuova visualizzazione ad albero dell'accessibilità mira per migliorarlo e rendere l'albero dell'accessibilità più esplorabile, utile e più facile per gli sviluppatori per l'utilizzo.

Dopo aver attivato l'esperimento, nel riquadro Elementi verrà visualizzato un nuovo pulsante. Fai clic per cambiare tra l'albero DOM esistente e l'albero dell'accessibilità completa.

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

Problema relativo a 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 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.