Novità di DevTools (Chrome 86)

Jecelyn Yeen

Nuovo pannello Media

DevTools ora mostra le informazioni sui lettori multimediali nel riquadro Media.

Pannello Nuovi media

Prima del nuovo riquadro dei contenuti multimediali in DevTools, le informazioni di logging e debug sui video player potevano essere trovate in chrome://media-internals.

Il nuovo riquadro Media offre un modo più semplice per visualizzare eventi, log, proprietà e una cronologia delle decodifiche dei frame nella stessa scheda del browser del video player. Puoi visualizzare e ispezionare in diretta i potenziali problemi più rapidamente (ad es. perché si verificano frame persi, perché JavaScript interagisce con il player in modo imprevisto).

Problema di Chromium: 1018414

Acquisire screenshot dei nodi tramite il menu contestuale del riquadro Elementi

Ora puoi acquisire screenshot dei nodi tramite il menu contestuale nel riquadro Elementi.

Ad esempio, puoi acquisire uno screenshot del sommario facendo clic con il tasto destro del mouse sull'elemento e selezionando Acquisisci screenshot nodo.

Acquisire screenshot dei nodi

Problema di Chromium: 1100253

Aggiornamenti della scheda Problemi

La barra di avviso Problemi nel riquadro della console è ora sostituita da un messaggio normale.

Problemi nel messaggio della console

I problemi relativi ai cookie di terze parti ora sono nascosti per impostazione predefinita nella scheda Problemi. Attiva la nuova casella di controllo Include problemi di cookie di terze parti per visualizzarli.

Casella di controllo relativa ai problemi dei cookie di terze parti

Problemi di Chromium: 1096481, 1068116, 1080589

Emula i caratteri locali mancanti

Apri la scheda Rendering e utilizza la nuova funzionalità Disattiva caratteri locali per emulare le origini local() mancanti nelle regole @font-face.

Ad esempio, quando il carattere "Rubik" è installato sul tuo dispositivo e la regola @font-face src lo utilizza come carattere local(), Chrome utilizza il file del carattere locale dal tuo dispositivo.

Quando l'opzione Disattiva caratteri locali è attivata, gli strumenti di sviluppo ignorano i caratteri local() e li recuperano dalla rete.

Emula i caratteri locali mancanti

Spesso, sviluppatori e designer utilizzano due copie diverse dello stesso carattere durante lo sviluppo:

  • Un carattere locale per i tuoi strumenti di progettazione e
  • Un carattere web per il tuo codice

La disattivazione dei caratteri locali ti consente di:

  • Eseguire il debug e misurare le prestazioni e l'ottimizzazione del caricamento dei caratteri web
  • Verifica la correttezza delle regole CSS @font-face
  • Scopri le differenze tra i caratteri web e le loro versioni locali

Problema di Chromium: 384968

Emulare gli utenti inattivi

L'API Idle Detection consente agli sviluppatori di rilevare gli utenti inattivi e reagire alle modifiche dello stato di inattività. Ora puoi utilizzare DevTools per emulare le modifiche dello stato di inattività nella scheda Sensori sia per lo stato utente che per lo stato dello schermo, anziché attendere la modifica dello stato di inattività effettivo. Puoi aprire la scheda Sensori dal riquadro.

Emulare gli utenti inattivi

Problema di Chromium: 1090802

Emula prefers-reduced-data

La media query prefers-reduced-data rileva se l'utente preferisce visualizzare contenuti alternativi che utilizzano meno dati per il rendering della pagina.

Ora puoi utilizzare DevTools per emulare la media query prefers-reduced-data.

Emula prefers-reduced-data

Problema di Chromium: 1096068

Supporto per nuove funzionalità JavaScript

Gli strumenti di sviluppo ora supportano meglio alcune delle funzionalità più recenti del linguaggio JavaScript:

  • Operatori di assegnazione logica: DevTools ora supporta l'assegnazione logica con i nuovi operatori &&=, ||= e ??= nei pannelli Console e Sources.
  • Stampa in formato leggibile dei separatori numerici: ora DevTools stampa in formato leggibile i separatori numerici nel riquadro Sources.

Problemi di Chromium: 1086817, 1080569

Lighthouse 6.2 nel riquadro Lighthouse

Il pannello Lighthouse ora esegue Lighthouse 6.2. Consulta le note di rilascio per un elenco completo delle modifiche.

Annulla ridimensionamento dell'immagine

Nuovi controlli in Lighthouse 6.2:

  • Evita attività lunghe nel thread principale. Riporta le attività più lunghe nel thread principale, utile per identificare gli elementi che contribuiscono maggiormente al ritardo dell'input.
  • I link possono essere sottoposti a scansione. Controlla se l'attributo href degli elementi anchor rimanda a una destinazione appropriata per consentire il rilevamento dei link.
  • Elementi immagine senza dimensioni: controlla se è impostata una width e un height espliciti sugli elementi immagine. Le dimensioni esplicite delle immagini possono ridurre le variazioni di layout e migliorare la metrica CLS.
  • Evita animazioni non composite. Segnala le animazioni non composite che appaiono scadenti e riducono il CLS.
  • Ascolta gli eventi unload. Segnala l'evento unload. Valuta la possibilità di utilizzare gli eventi pagehide o visibilitychange, poiché l'evento unload non viene attivato in modo affidabile.

Controlli aggiornati in Lighthouse 6.2:

  • Rimuovi il codice JavaScript inutilizzato. Lighthouse ora migliorerà il controllo se una pagina ha mappe di origine JavaScript accessibili pubblicamente.

Problema di Chromium: 772558

Ritiro dell'elenco "Altre origini" nel riquadro Service worker

DevTools ora fornisce un link per visualizzare l'elenco completo dei service worker di altre origini in una nuova scheda del browser: chrome://serviceworker-internals/?devtools.

In precedenza, DevTools visualizzava un elenco nidificato nel riquadro Application > Service worker.

Link ad altre origini

Problema di Chromium: 807440

Mostra il riepilogo della copertura per gli elementi filtrati

DevTools ora ricalcola e mostra un riepilogo delle informazioni sulla copertura in modo dinamico quando vengono applicati filtri nella scheda Copertura. In precedenza, la scheda Copertura mostrava sempre un riepilogo di tutte le informazioni sulla copertura.

Nell'esempio riportato di seguito, nota come il riepilogo inizialmente riporta 446 kB of 2.0 MB (22%) used so far. 1.5 MB unused. e poi 57 kB of 604 kB (10%) used so far. 546 kB unused. dopo l'applicazione del filtro CSS.

Riepilogo della copertura per gli elementi filtrati

Problema di Chromium: 1061385

Nuova visualizzazione dei dettagli del frame nel riquadro Applicazione

Strumenti per sviluppatori ora mostra una visualizzazione dettagliata per ogni frame. Per accedervi, fai clic su un frame nel menu Frame nel riquadro Applicazione.

Nuova visualizzazione dei dettagli del frame nel riquadro Applicazione

Problema di Chromium: 1093247

Dettagli del frame per le finestre aperte

DevTools ora mostra anche le finestre / i popup aperti nell'albero dei frame. La visualizzazione dei dettagli del frame delle finestre aperte include informazioni di sicurezza aggiuntive.

Dettagli del telaio della finestra aperti

Problema di Chromium: 1107766

Informazioni su sicurezza e isolamento (COEP / COOP)

DevTools ora mostra il contesto sicuro, Cross-Origin-Embedder-Policy (COEP) e Cross-Origin-Opener-Policy (COOP) nei dettagli del frame.

Informazioni su sicurezza e isolamento

A breve verranno aggiunte ulteriori informazioni sulla sicurezza alla visualizzazione dei dettagli del frame.

Problema di Chromium: 1051466

Aggiornamenti dei pannelli Elementi e Rete

Suggerimento di colore accessibile nel riquadro Stili

Ora DevTools fornisce suggerimenti sui colori per il testo con contrasto cromatico basso.

Nell'esempio seguente, h1 ha un testo a basso contrasto. Per risolvere il problema, apri il selettore colori della proprietà color nel riquadro Stili. Dopo aver espanso la sezione Rapporto di contrasto, DevTools fornisce suggerimenti per i colori AA e AAA. Fai clic sul colore suggerito per applicarlo.

Problema di Chromium: 1093227

Reintegra il riquadro Proprietà nel riquadro Elementi

Il riquadro Proprietà è tornato, era stato deprecato in Chrome 84. In una futura versione di DevTools, miglioreremo il flusso di lavoro per l'ispezione delle proprietà degli elementi.

Riquadro Proprietà nel riquadro Elementi

Problema di Chromium: 1105205, 1116085

Valori dell'intestazione X-Client-Data leggibili nel riquadro Rete

Quando ispezioni una risorsa di rete nel riquadro Rete, DevTools ora formatta tutti i valori delle intestazioni X-Client-Data nel riquadro Intestazioni come codice.

L'intestazione HTTP X-Client-Data contiene un elenco di ID esperimento e flag di Chrome attivati nel browser. I valori di intestazione non elaborati sembrano stringhe opache perché sono codificati in base 64 e serializzati protocol buffers. Per rendere i contenuti più trasparenti per gli sviluppatori, DevTools ora mostra i valori decodificati.

Valori dell'intestazione `X-Client-Data` leggibili da una persona

Problema di Chromium: 1103854

Completamento automatico dei caratteri personalizzati nel riquadro Stili

I caratteri importati vengono ora aggiunti all'elenco del completamento automatico del CSS quando modifichi la proprietà font-family nel riquadro Stili.

In questo esempio, 'Noto Sans' è un carattere personalizzato installato nella macchina locale. Viene visualizzato nell'elenco di completamento CSS. In precedenza, non era così.

Completamento automatico dei caratteri personalizzati

Problema di Chromium: 1106221

Visualizzare in modo coerente il tipo di risorsa nel riquadro Rete

Ora DevTools mostra in modo coerente lo stesso tipo di risorsa della richiesta di rete originale e aggiunge / Redirect al valore della colonna Tipo quando si verifica il reindirizzamento (stato 302).

In precedenza, a volte DevTools modificava il tipo in Other.

Tipo di risorsa Reindirizzamento display

Problema di Chromium: 997694

Pulsanti Cancella nei riquadri Elementi e Rete

Le caselle di testo dei filtri nel riquadro Stili e nel riquadro Rete, nonché la casella di testo di ricerca DOM nel riquadro Elementi, ora hanno pulsanti Cancella. Se fai clic su Cancella, il testo che hai inserito viene rimosso.

Pulsanti Cancella nei riquadri Elementi e Rete

Problema di Chromium: 1067184

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.

Novità di DevTools

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