Novità di DevTools (Chrome 84)

Risolvere i problemi del sito con la nuova scheda Problemi

La nuova scheda Problemi nel riquadro ha lo scopo di ridurre la confusione e l'affaticamento da notifiche della console. Al momento, la console è il luogo centrale in cui sviluppatori di siti web, librerie, framework e Chrome stesso registrano messaggi, avvisi ed errori. La scheda Problemi presenta gli avvisi del browser in modo strutturato, aggregato e pratico, link alle risorse interessate all'interno di DevTools e fornisce indicazioni su come risolvere i problemi. Nel tempo, sempre più avvisi di Chrome verranno visualizzati nella scheda Problemi anziché nella console, il che dovrebbe contribuire a ridurre il disordine della console.

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

Bug di Chromium: #1068116

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

La descrizione comando della modalità Ispezione ora indica se l'elemento ha un nome e un ruolo accessibili ed è focalizzabile con la tastiera.

Bug di Chromium: #1040025

Aggiornamenti al riquadro Prestazioni

Visualizzare le informazioni sul Total Blocking Time (TBT) nel piè di pagina

Dopo aver registrato il rendimento del caricamento, il pannello Rendimento ora mostra le informazioni sul Tempo di blocco totale (TBT) nel piè di pagina. Il TBT è una metrica delle prestazioni di caricamento che aiuta a quantificare il tempo necessario perché una pagina diventi utilizzabile. Misura essenzialmente il tempo in cui una pagina sembra 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 principale metrica di laboratorio per approssimare il First Input Delay, che è uno dei nuovi Segnali web essenziali di Google.

Per ottenere informazioni sul tempo di blocco totale, non utilizzare il flusso di lavoro Ricarica pagina per registrare il rendimento del caricamento della pagina. Fai invece clic su 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 necessarie dai dati di profilazione interni di Chrome.

Bug di Chromium: #1054381

Eventi di spostamento del layout nella nuova sezione Esperienza

La nuova sezione Esperienza del pannello Rendimento può aiutarti a rilevare gli spostamenti del layout. Il Cumulative Layout Shift (CLS) è una metrica che può aiutarti a quantificare l'instabilità visiva indesiderata ed è uno dei nuovi Segnali web essenziali di Google.

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

Terminologia delle promesse più precisa in Play Console

Quando viene registrato un Promise, la console descriveva erroneamente lo stato del Promise come resolved:

La console ora utilizza il termine fulfilled, che è in linea con la Promise specifica:

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à al valore che avrebbe avuto se non fossero state apportate modifiche allo stile dell'elemento.

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.

Bug di Chromium: #1040019

Il selettore colori ora utilizza la notazione funzionale dei colori separati da spazi

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

Quando scegli i colori con il selettore colori o alterni le rappresentazioni dei colori nel riquadro Stili tenendo premuto Maiusc e facendo clic sul valore del colore, ora vedrai la sintassi degli argomenti separati da spazi.

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

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

La sintassi degli argomenti separati da spazi è supportata nella maggior parte dei browser da un po' di tempo. 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.

Riferimenti:

• console.dir()
• $0

Supporto delle scorciatoie app nel riquadro Manifest

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

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

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.