Novità di DevTools (Chrome 86)

Nuovo riquadro dei contenuti multimediali

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

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

Il nuovo riquadro Media fornisce un modo più semplice per visualizzare eventi, log, proprietà e una sequenza temporale del frame decodifica nella stessa scheda del browser del video player stesso. Puoi guardare in diretta e ispezionare più rapidamente i potenziali problemi (ad esempio, perché si verificano frame interrotti, perché JavaScript sta interagendo il player in modo inaspettato).

Problema relativo a Chromium: 1018414

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

Problema relativo a Chromium: 1100253

Aggiornamenti della scheda Problemi

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

I problemi relativi ai cookie di terze parti sono ora nascosti per impostazione predefinita nella scheda Problemi. Attiva la nuova funzionalità Includi problemi relativi ai cookie di terze parti per visualizzarli.

Problemi relativi a Chromium: 1096481, 1068116, 1080589

Emula i caratteri locali mancanti

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

Ad esempio, quando il carattere "Rubik" è installata sul tuo dispositivo e la regola @font-face src la utilizza come carattere local(), Chrome usa il file dei caratteri locali del tuo dispositivo.

Quando l'opzione Disattiva caratteri locali è attiva, DevTools ignora i caratteri local() e li recupera da in rete.

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

Disattivando i caratteri locali è più facile:

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

Problema relativo a Chromium: 384968

Emula utenti inattivi

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

Problema relativo a Chromium: 1090802

Emula prefers-reduced-data

La query supporti prefers-reduced-data rileva se l'utente preferisce offrire servizi alternativi contenuti che utilizzano meno dati per la visualizzazione della pagina.

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

Problema relativo a Chromium: 1096068

Supporto per nuove funzionalità JavaScript

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

• Operatori di assegnazione logica: DevTools ora supporta l'assegnazione logica con il nuovo gli operatori &&=, ||= e ??= nei riquadri Console e Origini.
• Separatori numerici. In DevTools ora vengono stampati correttamente i separatori numerici. nel riquadro Origini.

Problemi relativi a Chromium: 1086817, 1080569

Lighthouse 6.2 nel riquadro Lighthouse

Nel riquadro Lighthouse ora è in esecuzione Lighthouse 6.2. Consulta le note di rilascio per un l'elenco delle modifiche apportate.

Nuovi controlli in Lighthouse 6.2:

• Evita lunghe attività del thread principale. Segnala le attività più lunghe nel thread principale, un'utilità utile per identificando i fattori peggiori per il ritardo dell'input.
• È possibile eseguire la scansione dei link. Controlla se l'attributo href degli elementi anchor rimanda a una risorsa appropriata in modo che i link siano visibili.
• Elementi dell'immagine senza dimensioni: controlla se sono stati impostati width e height espliciti sugli elementi dell'immagine. Le dimensioni delle immagini esplicite possono ridurre le variazioni del layout e migliorare la metrica CLS.
• Evita animazioni non composte. Segnala animazioni non composte che sembrano poco chiare e e ridurre la CLS.
• Ascolta gli eventi unload. Segnala l'evento unload. Potresti usare l'pagehide o visibilitychange eventi invece che 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 relativo a Chromium: 772558

Ritiro di "altre origini" nel riquadro Service worker

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

In precedenza, DevTools mostrava un elenco nidificato nel riquadro Applicazione > Service worker riquadro.

Problema relativo a Chromium: 807440

Mostra il riepilogo della copertura per gli elementi filtrati

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

Nell'esempio che segue, puoi notare come inizialmente il riepilogo 446 kB of 2.0 MB (22%) used so far. 1.5 MB unused. e poi dice 57 kB of 604 kB (10%) used so far. 546 kB unused. dopo l'applicazione del filtro CSS.

Problema relativo a 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 sotto Frame. nel riquadro Applicazione.

Problema relativo a Chromium: 1093247

Dettagli cornice per finestre aperte

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

Problema relativo a Chromium: 1107766

Informazioni sulla sicurezza e sull'isolamento (COEP / COOP)

DevTools ora mostra contesto sicuro, Cross-Origin-Embedder-Policy (COEP) e Criteri di apertura multiorigine (COOP) nei dettagli del frame.

A breve verranno aggiunte altre informazioni di sicurezza alla visualizzazione dei dettagli del frame.

Problema relativo a Chromium: 1051466

Aggiornamenti del riquadro Elementi e Rete

Suggerimento di colori accessibile nel riquadro Stili

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

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

Problema relativo a Chromium: 1093227

Ripristina il riquadro Proprietà nel riquadro Elementi

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

Problema relativo a Chromium: 1105205, 1116085

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

Durante l'ispezione di una risorsa di rete nel riquadro Rete, DevTools ora formatta qualsiasi 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 poiché sono codificati in base 64 buffer di protocollo serializzati. Per rendere i contenuti più trasparenti per gli sviluppatori, DevTools che mostrano ora i valori decodificati.

Problema relativo a Chromium: 1103854

Completamento automatico dei caratteri personalizzati nel riquadro Stili

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

In questo esempio, 'Noto Sans' è un carattere personalizzato installato nel computer locale. È visualizzata in l'elenco di completamento CSS. In precedenza, non è così.

Problema relativo a Chromium: 1106221

Visualizza coerentemente il tipo di risorsa nel riquadro Rete

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

In precedenza, DevTools ha talvolta modificato il tipo in Other.

Problema relativo a Chromium: 997694

Pulsanti Cancella nei riquadri Elementi e Rete

Le caselle di testo dei filtri nel riquadro Stili e nel riquadro Rete, nonché il testo della ricerca DOM nel riquadro Elementi, ora ci sono i pulsanti Cancella. Facendo clic su Cancella, il testo presente hai un input.

Problema relativo a 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 in anteprima ti consentono di accedere alle funzionalità più recenti di DevTools, testare le API delle piattaforme web all'avanguardia e individuare i problemi sul tuo sito prima che lo facciano gli utenti.

Contattare il team di Chrome DevTools

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

• Inviaci un suggerimento o un feedback tramite crbug.com.
• Segnala un problema di DevTools utilizzando Altre opzioni   > Guida > Segnala un problema di DevTools in DevTools.
• Invia un tweet all'indirizzo @ChromeDevTools.
• Lascia commenti sulle novità nei video di YouTube di DevTools o nei video di YouTube dei suggerimenti di DevTools.

Novità di DevTools

Un elenco di tutto ciò che è stato trattato nella serie Novità di DevTools.