Novità di DevTools (Chrome 86)

Nuovo riquadro dei contenuti multimediali

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

Nuovo riquadro dei contenuti multimediali

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

Il nuovo riquadro Contenuti multimediali offre un modo più semplice per visualizzare eventi, log, proprietà e una sequenza temporale di decodifica dei frame nella stessa scheda del browser del video player. Puoi visualizzare in tempo reale ed esaminare potenziali problemi più rapidamente (ad es. perché si verificano frame interrotti, perché JavaScript interagisce con 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 selezionare Acquisisci screenshot del nodo.

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.

Problemi nel messaggio della console

I problemi relativi ai cookie di terze parti sono ora nascosti per impostazione predefinita nella scheda Problemi. Seleziona 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 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 local() origini mancanti nelle regole @font-face.

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

Quando l'opzione Disattiva caratteri locali è attiva, 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 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 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 dell'utente sia per lo stato dello schermo, invece di attendere che lo stato di inattività effettivo cambi. Puoi aprire la scheda Sensori dal riquadro a scomparsa.

Emula utenti inattivi

Problema relativo a Chromium: 1090802

Emula prefers-reduced-data

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

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

Emula dati preferiti ridotti

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 i nuovi 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 elenco completo delle modifiche.

Annulla dimensioni immagine

Nuovi controlli in Lighthouse 6.2:

  • Evita lunghe attività del thread principale. Segnala le attività più lunghe sul thread principale, utile per identificare i fattori che contribuiscono maggiormente al ritardo dell'input.
  • È possibile eseguire la scansione dei link. Controlla se l'attributo href degli elementi anchor rimanda a una destinazione appropriata, in modo che i link possano essere scoperti.
  • 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 riducono la metrica CLS.
  • Ascolta gli eventi unload. Segnala l'evento unload. Valuta la possibilità di utilizzare gli eventi pagehide o visibilitychange perché l'evento unload non viene attivato in modo affidabile.

Controlli aggiornati in Lighthouse 6.2:

  • Rimuovi il codice JavaScript inutilizzato. Lighthouse ora migliorerà l'audit se una pagina contiene mappe di origine JavaScript accessibili pubblicamente.

Problema relativo a Chromium: 772558

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

DevTools ora fornisce un link per visualizzare l'elenco completo dei service worker da 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.

Link ad altre origini

Problema relativo a 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 i filtri nella scheda Copertura. In precedenza, la scheda Copertura mostrava sempre un riepilogo di tutte le informazioni sulla copertura.

Nell'esempio seguente, puoi notare che il riepilogo inizialmente riporta il testo 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 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 nel menu Frame nel riquadro Applicazione.

Nuova visualizzazione dei dettagli del 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 informazioni di sicurezza aggiuntive.

Dettagli del frame della finestra aperta

Problema relativo a Chromium: 1107766

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

DevTools ora visualizza 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 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 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 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.

Riquadro delle proprietà nel riquadro 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 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 tuo browser. I valori di intestazione non elaborati sembrano stringhe opache poiché sono buffer di protocollo serializzati e con codifica Base64. Per rendere i contenuti più trasparenti agli sviluppatori, DevTools mostra ora i valori decodificati.

Valori di intestazione "X-Client-Data" leggibili da persone

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 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 è così.

Caratteri personalizzati con completamento automatico

Problema relativo a Chromium: 1106221

Visualizza coerentemente il tipo di risorsa nel riquadro Rete

DevTools ora visualizza 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, DevTools ha talvolta modificato il tipo in Other.

Tipo di risorsa reindirizzamento display

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é nella casella di testo della ricerca DOM nel riquadro Elementi, ora dispongono di pulsanti Cancella. Se fai clic su Cancella, verrà rimosso il testo che hai inserito.

Pulsanti Cancella nei riquadri Elementi e Rete

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 di anteprima ti consentono di accedere alle ultime funzionalità di DevTools, di testare le API delle piattaforme web all'avanguardia e di 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 usando Altre opzioni   Altre   > 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome - Guida introduttiva

Chrome - Guida introduttiva

Guida introduttiva di Chrome

Chrome 100

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 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 è stato annullato.

Chrome 81

Chrome 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 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59