Novità di DevTools (Chrome 86)

Jecelyn Yeen

Pannello Nuovi media

Ora DevTools 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 tempo reale 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 relative versioni locali

Problema di Chromium: 384968

Simulare 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.

Simulare 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 per sviluppatori 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 riquadro Lighthouse ora esegue Lighthouse 6.2. Consulta le note di rilascio per un elenco completo delle modifiche.

Annulla ridimensionamento 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, in modo che i link possano essere rilevati.
  • 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. Ti consigliamo di utilizzare gli eventi pagehide o visibilitychange, in quanto 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 Service worker del pannello Applicazione.

Link ad altre origini

Problema di Chromium: 807440

Mostra il riepilogo della copertura per gli elementi filtrati

Ora DevTools 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 riporti 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 mostrano 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 ulteriori informazioni sulla sicurezza.

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 colori accessibili nel riquadro Stili

Ora DevTools fornisce suggerimenti sui colori per il testo con contrasto di colore 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 ritirato 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, buffer di protocollo serializzati. Per rendere i contenuti più trasparenti per gli sviluppatori, DevTools ora mostra i valori decodificati.

Valori dell'intestazione `X-Client-Data` leggibili da persone

Problema di Chromium: 1103854

Completare automaticamente i 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 del filtro 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.