Novità di DevTools (Chrome 86)

Nuovo riquadro multimediale

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

Nuovo riquadro multimediale

Prima del nuovo riquadro dei contenuti multimediali in DevTools, in chrome://media-internals era possibile trovare informazioni di logging e debug sui video player.

Il nuovo riquadro Contenuti multimediali consente di visualizzare più facilmente eventi, log, proprietà e una sequenza temporale di frame decodificati nella stessa scheda del browser del video player stesso. Puoi visualizzare in tempo reale ed esaminare potenziali problemi più rapidamente (ad esempio perché si verificano frame interrotti o perché JavaScript interagisce con il player in modo inaspettato).

Problema di Chromium: 1018414

Acquisisci 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 del nodo.

Acquisisci screenshot dei nodi

Problema di Chromium: 1100253

Aggiornamenti della scheda Problemi

La barra di avviso Problemi nel riquadro 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 Includi problemi di cookie di terze parti per visualizzarli.

casella di controllo per i problemi relativi ai 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 i caratteri locali per emulare le origini local() mancanti nelle regole @font-face.

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

Se l'opzione Disattiva caratteri locali è attivata, DevTools ignora i caratteri local() e li recupera 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.
  • Un carattere web per il tuo codice

La disattivazione dei caratteri locali ti consente di:

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

Problema di Chromium: 384968

Emula utenti inattivi

L'API Idle Detection consente agli sviluppatori di rilevare gli utenti non attivi e di reagire alle variazioni dello stato di inattività. Ora puoi utilizzare DevTools per emulare le modifiche dello stato di inattività nella scheda Sensori per lo stato dell'utente e dello schermo, anziché attendere che lo stato di inattività effettivo cambi. Puoi aprire la scheda Sensori dal Riquadro a scomparsa.

Emula utenti inattivi

Problema di Chromium: 1090802

Emula prefers-reduced-data

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

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

Emula prefers-reduced-data

Problema di Chromium: 1096068

Supporto per nuove funzionalità JavaScript

DevTools ora supporta meglio alcune delle più recenti funzionalità in linguaggio JavaScript:

  • Operatori di assegnazione logica: DevTools ora supporta l'assegnazione logica con i nuovi operatori &&=, ||= e ??= nei riquadri Console e Origini.
  • Formatta bene i separatori numerici. DevTools ora esegue correttamente la stampa dei separatori numerici nel riquadro Origini.

Problemi di Chromium: 1086817, 1080569

Lighthouse 6.2 nel pannello Lighthouse

Nel riquadro Lighthouse ora è in esecuzione Lighthouse 6.2. Consulta le note sulla versione per un elenco completo delle modifiche.

Ridimensiona immagine

Nuovi controlli in Lighthouse 6.2:

  • Evita attività lunghe del thread principale. Segnala le attività più lunghe nel thread principale, utile per identificare gli elementi che contribuiscono al ritardo di 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 sugli elementi immagine sono impostati width e height espliciti. Le dimensioni delle immagini esplicite possono ridurre le variazioni del layout e migliorare la metrica CLS.
  • Evita animazioni non composte. Consente di generare report sulle animazioni non composte che hanno un aspetto scadente e riducono la CLS.
  • Ascolta gli eventi unload. Segnala l'evento unload. Valuta la possibilità di utilizzare gli eventi pagehide o visibilitychange perché l'evento unload non si attiva 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 di "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 mostrava un elenco nidificato nel riquadro Applicazione > riquadro Service worker.

Collega ad altre origini

Problema di Chromium: 807440

Mostra riepilogo copertura per gli elementi filtrati

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

Nell'esempio seguente noti che il riepilogo inizialmente indica 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 dei filtri CSS.

Riepilogo della copertura per gli elementi filtrati

Problema di Chromium: 1061385

Nuova visualizzazione dei dettagli del frame nel riquadro Applicazione

DevTools 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 frame per finestre aperte

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

Dettagli del frame della finestra aperta

Problema di Chromium: 1107766

Informazioni sulla sicurezza e l'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 di sicurezza alla visualizzazione dei dettagli del frame.

Problema di Chromium: 1051466

Aggiornamenti del riquadro Elementi e Rete

Suggerimento di colori accessibile nel riquadro Stili

DevTools ora fornisce suggerimenti sui colori per il testo a basso contrasto di colore.

Nell'esempio riportato di seguito, 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 i suggerimenti per i colori AA e AAA. Fai clic sul colore suggerito per applicarlo.

Problema di Chromium: 1093227

Ripristinare il riquadro Proprietà nel riquadro Elementi

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

Riquadro delle proprietà nel riquadro Elementi

Problema di Chromium: 1105205, 1116085

Valori di intestazione X-Client-Data leggibili nel riquadro Network

Durante l'ispezione di una risorsa di rete nel riquadro Network, DevTools ora formatta tutti i valori dell'intestazione 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 dell'intestazione non elaborati sembrano stringhe opache poiché sono buffer di protocollo codificati in base 64 e serializzati. Per rendere i contenuti più trasparenti per gli sviluppatori, DevTools mostra ora i valori decodificati.

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

Problema di Chromium: 1103854

Completamento automatico dei caratteri personalizzati nel riquadro Stili

I volti di caratteri importati vengono ora aggiunti all'elenco del completamento automatico CSS durante la modifica della 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ì.

Caratteri personalizzati a completamento automatico

Problema di Chromium: 1106221

Visualizza coerentemente il tipo di risorsa nel riquadro Network

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

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

Tipo di risorsa di reindirizzamento display

Problema di Chromium: 997694

Cancella pulsanti nei riquadri Elementi e Rete

Le caselle di testo del filtro nel riquadro Stili e nel riquadro Rete, nonché la casella di testo della ricerca DOM nel riquadro Elementi, ora dispongono di pulsanti Cancella. Se fai clic su Cancella, il testo inserito viene rimosso.

Cancella pulsanti nei riquadri Elementi e Rete

Problema di Chromium: 1067184

Scarica 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à di DevTools più recenti, di testare le API per piattaforme web all'avanguardia e di individuare eventuali problemi sul tuo sito prima che lo facciano gli utenti.

Contattare il team di Chrome DevTools

Utilizza le opzioni seguenti per discutere delle nuove funzionalità e delle modifiche nel post o di qualsiasi altra cosa relativa a DevTools.

  • Inviaci un suggerimento o un feedback tramite crbug.com.
  • Segnala un problema DevTools utilizzando Altre opzioni   Altre   > Guida > Segnala i problemi di DevTools in DevTools.
  • Tweet all'indirizzo @ChromeDevTools.
  • Lascia commenti sui video di YouTube o sui suggerimenti di DevTools in DevTools Video di YouTube.

Novità di DevTools

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

Chrome 123

Chrome 122

Guida introduttiva di Chrome

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Versione 115 di Chrome

Chrome 114

Chrome 113

Chrome 112

Guida introduttiva di Chrome

Versione 110 di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome versione 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 è stato annullato.

Chrome 81

Chrome versione 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome versione 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59