Novità di DevTools (Chrome 84)

Kayce Basques

Risolvere i problemi del sito con la nuova scheda Problemi

La nuova scheda Problemi nel riquadro laterale ha lo scopo di contribuire a ridurre il numero di notifiche e il disordine nella console. Attualmente, la Console è il punto di riferimento per gli sviluppatori di siti web, le librerie, i framework e Chrome stesso per registrare messaggi, avvisi ed errori. La scheda Problemi presenta gli avvisi del browser in modo strutturato, aggregato e utile, fornisce link alle risorse colpite all'interno di DevTools e indicazioni su come risolvere i problemi. Nel tempo, un numero sempre maggiore di avvisi di Chrome verrà visualizzato nella scheda Problemi anziché nella console, il che dovrebbe contribuire a ridurre il numero di elementi nella console.

Per iniziare, consulta l'articolo Trovare e risolvere i problemi con la scheda Problemi di Chrome DevTools.

La scheda Problemi.

Bug di Chromium: #1068116

Visualizzare le informazioni sull'accessibilità nella descrizione comando della modalità di ispezione

La suggerimento nella modalità di ispezione ora indica se l'elemento ha un nome e un ruolo accessibili e se è disponibile per l'assegnazione del focus con la tastiera.

La descrizione comando della modalità di ispezione con informazioni sull'accessibilità.

Bug di Chromium: #1040025

Aggiornamenti del riquadro sul rendimento

Visualizzare le informazioni sul tempo di blocco totale (TBT) nel piè di pagina

Dopo aver registrato il rendimento del caricamento, il riquadro Rendimento ora mostra le informazioni sul tempo di blocco totale (TBT) nel piè di pagina. Il TBT è una metrica delle prestazioni di caricamento che consente di quantificare il tempo necessario per rendere una pagina utilizzabile. Misura essenzialmente il tempo per cui una pagina sembra essere utilizzabile (perché i suoi contenuti sono stati visualizzati sullo schermo), ma non è effettivamente utilizzabile perché JavaScript blocca il thread principale e quindi la pagina non può rispondere all'input utente. TBT è la metrica di laboratorio principale per approssimare il ritardo di primo input, uno dei nuovi Core Web Vitals di Google.

Per ottenere informazioni sul tempo di blocco totale, non utilizzare il flusso di lavoro Ricarica pagina Ricarica la pagina per registrare il rendimento del caricamento della pagina. Fai clic su Registra Registra, ricarica manualmente la pagina, attendi che venga caricata e poi interrompi la registrazione. Se visualizzi Total Blocking Time: Unavailable, significa che DevTools non ha ricevuto le informazioni di cui ha bisogno dai dati di profilazione interni di Chrome.

Informazioni sul tempo di blocco totale nel piè di pagina di una registrazione del riquadro Rendimento.

Bug di Chromium: #1054381

Eventi di variazione del layout nella nuova sezione Esperienza

La nuova sezione Esperienza del riquadro Rendimento può aiutarti a rilevare le variazioni del layout. Il CLS (Cumulative Layout Shift) è una metrica che può aiutarti a quantificare l'instabilità visiva indesiderata ed è uno dei nuovi Core Web Vitals di Google.

Fai clic su un evento Spostamento del layout per visualizzare i dettagli dello spostamento del layout nella scheda Riepilogo. Passa il mouse sopra i campi Trasferito da e Trasferito a per visualizzare dove si è verificato lo spostamento del layout.

I dettagli di uno spostamento del layout.

Terminologia più accurata delle promesse nella console

Quando registravi un Promise, la Console descriveva erroneamente lo stato del Promise come resolved:

Un esempio della console che utilizza la vecchia terminologia "Risolta".

La console ora utilizza il termine fulfilled, che è in linea con le specifiche Promise:

Un esempio della console che utilizza la nuova terminologia "Completato".

Bug V8: #6751

Aggiornamenti del riquadro Stili

Supporto per la parola chiave revert

L'interfaccia utente di completamento automatico del riquadro Stili ora rileva la parola chiave CSS revert, che ripristina il valore in cascata di una proprietà a quello che sarebbe stato se non fossero state apportate modifiche allo stile dell'elemento.

Impostazione del valore di una proprietà da ripristinare.

Bug di Chromium: #1075437

Anteprime delle immagini

Passa il mouse sopra un valore background-image nel riquadro Stili per visualizzare un'anteprima dell'immagine in una descrizione comando.

Passa il mouse sopra un valore background-image.

Bug di Chromium: #1040019

Il selettore colori ora utilizza la notazione dei colori funzionali separata da spazi

Il modulo Colore CSS di livello 4 specifica che le funzioni di colore come rgb() devono supportare gli argomenti separati da spazi. Ad esempio, rgb(0, 0, 0) è equivalente a rgb(0 0 0).

Quando scegli i colori con il selettore colori o passi da una rappresentazione di colore all'altra nel riquadro Stile tenendo premuto Maiusc e facendo clic sul valore del colore, ora vedrai la sintassi dell'argomento separata da spazi.

Utilizzo di argomenti separati da spazi nel riquadro Stili.

Vedrai la sintassi anche nel riquadro Calcolata e nella descrizione comando della modalità di ispezione.

DevTools utilizza la nuova sintassi perché le funzionalità CSS future come color() non supportano la sintassi degli argomenti separati da virgole ritirata.

La sintassi degli argomenti separati da spazi è supportata da un po' di tempo nella maggior parte dei browser. Consulta Posso utilizzare notazioni di colore funzionali separate da spazi?

Bug di Chromium: #1072952

Ritiro del riquadro Proprietà nel riquadro Elementi

Il riquadro Proprietà nel riquadro Elementi è stato ritirato. Esegui console.dir($0) nella console.

Il riquadro Proprietà deprecato.

Riferimenti:

Supporto delle scorciatoie per le app nel riquadro Manifest

Le scorciatoie app consentono agli utenti di avviare rapidamente attività comuni o consigliate all'interno di un'app web. Il menu delle scorciatoie app viene mostrato solo per le app web progressive installate sul computer o sul dispositivo mobile dell'utente.

Per scoprire di più, consulta l'articolo Eseguire rapidamente le attività con le scorciatoie delle app.

Scorciatoie per le app nel riquadro Manifest.

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.