Novità di DevTools (Chrome 86)

Riquadro Nuovi media

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

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

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

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

Problema di Chromium: 1100253

Aggiornamenti della scheda Problemi

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

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

Problemi di Chromium: 1096481, 1068116, 1080589

Emulare 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 del tuo dispositivo.

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

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

• Un carattere locale per i tuoi strumenti di progettazione e
• Un carattere web per il 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 CSS @font-face
• Scopri eventuali differenze tra i caratteri web e le relative versioni locali

Problema di Chromium: 384968

Emulare gli utenti inattivi

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

Problema di Chromium: 1090802

Emula prefers-reduced-data

La query media 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 sui media prefers-reduced-data.

Problema di Chromium: 1096068

Supporto per nuove funzionalità JavaScript

DevTools ora offre un supporto migliore per alcune delle funzionalità più recenti del linguaggio JavaScript:

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

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.

Nuovi controlli in Lighthouse 6.2:

• Evita attività lunghe nel thread principale. Registra 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. Verifica che l'attributo href degli elementi anchor rimandi a una destinazione appropriata per consentire il rilevamento dei link.
• Elementi immagine senza dimensioni: controlla se sono impostati width e height espliciti sugli elementi immagine. Le dimensioni esplicite delle immagini possono ridurre le variazioni di layout e migliorare il CLS.
• Evita animazioni non composite. Segnala le animazioni non composite che sembrano a scatti 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. Ora Lighthouse migliorerà il controllo se una pagina ha mappe di origine JavaScript accessibili pubblicamente.

Problema di Chromium: 772558

Ritiro della voce "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 > Worker di servizio.

Problema di Chromium: 807440

Mostra il riepilogo della copertura per gli elementi filtrati

Ora DevTools ricalcola e mostra dinamicamente un riepilogo delle informazioni sulla copertura 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, noterai 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 del filtro CSS.

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.

Problema di Chromium: 1093247

Dettagli del riquadro per le finestre aperte

DevTools ora mostra anche le finestre / i popup aperti nella struttura ad albero dei frame. La visualizzazione dei dettagli del frame delle finestre aperte include ulteriori informazioni sulla sicurezza.

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.

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

Problema di Chromium: 1051466

Aggiornamenti del riquadro Elementi e della rete

Suggerimento di colore accessibile nel riquadro Stili

DevTools ora fornisce suggerimenti di colore per il testo con un 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

Reintegrare il riquadro Proprietà nel riquadro Elementi

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

Problema di Chromium: 1105205, 1116085

Valori delle intestazioni X-Client-Data leggibili da una persona nel riquadro Rete

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

L'intestazione HTTP X-Client-Data contiene un elenco di ID e flag di Chrome abilitati nel browser. I valori delle intestazioni non elaborati sembrano stringhe opache perché sono buffer di protocollo serializzati con codifica base-64. Per rendere i contenuti più trasparenti per gli sviluppatori, DevTools ora mostra i valori decodificati.

Problema di Chromium: 1103854

Completare automaticamente i caratteri personalizzati nel riquadro Stili

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

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

Problema di Chromium: 1106221

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

Problema di Chromium: 997694

Pulsanti Cancella nei riquadri Elementi e Rete

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

Problema di Chromium: 1067184

Scaricare i canali di anteprima

Valuta la possibilità di utilizzare Chrome Canary, Dev o Beta come browser di sviluppo predefinito. Questi canali di anteprima ti consentono di accedere alle funzionalità più recenti di DevTools, di testare API di piattaforme web all'avanguardia e di trovare i problemi sul tuo sito prima che lo facciano i tuoi utenti.

Contatta il team di Chrome DevTools

Utilizza le seguenti opzioni per discutere di nuove funzionalità, aggiornamenti o qualsiasi altro argomento relativo a DevTools.

• Inviaci feedback e richieste di funzionalità all'indirizzo crbug.com.
• Segnala un problema DevTools utilizzando more_vert Altre opzioni > Guida > Segnala un problema DevTools in DevTools.
• Invia un tweet all'account @ChromeDevTools.
• Lascia un commento sui video di YouTube Novità di DevTools o sui video di YouTube Suggerimenti per DevTools.

Novità di DevTools

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