Novità di DevTools (Chrome 94)

Jecelyn Yeen

Utilizzare DevTools nella lingua che preferisci

Chrome DevTools ora supporta più di 80 lingue, il che ti consente di lavorare nella tua lingua preferita.

Apri Impostazioni, seleziona la lingua che preferisci dal menu a discesa Preferenze > Lingua e ricarica DevTools.

Preferences" width="800" height="494">

Problema di Chromium: 1163928

Nuovi dispositivi Nest Hub nell'elenco dei dispositivi

Ora puoi simulare le dimensioni di Nest Hub e Nest Hub Max nella modalità Dispositivo.

Fai clic su Attiva/disattiva barra degli strumenti del dispositivo   Attiva/disattiva la barra degli strumenti del dispositivo  , seleziona Nest Hub o Nest Hub Max nell'elenco dei dispositivi.

Dispositivo Nest Hub in modalità Dispositivo

Problema di Chromium: 1223525

Prove dell'origine nella visualizzazione Dettagli frame

Ora puoi ottenere informazioni sulle prove dell'origine di un sito nella visualizzazione dei dettagli del frame nel riquadro Applicazione.

Origin trials ti consente di accedere a una funzionalità nuova o sperimentale, per creare funzionalità che gli utenti possono provare per un periodo di tempo limitato prima che la funzionalità venga resa disponibile a tutti.

Apri una pagina con prove dell'origine (ad es. la pagina demo). Nel riquadro Applicazione, scorri verso il basso fino alla sezione Frame e seleziona il frame superiore.

Prove dell'origine nella visualizzazione Dettagli frame

Problema di Chromium: 607555

Nuovo badge per le query del contenitore CSS

Viene aggiunto un nuovo badge container accanto agli elementi contenitore (gli elementi antenati che soddisfano i criteri delle regole at @container). Fai clic sul badge per attivare/disattivare la visualizzazione di un overlay del contenitore scelto e di tutti i relativi discendenti che eseguono query nella pagina.

Badge delle query del contenitore CSS

Problema di Chromium: 1146422

Nuova casella di controllo per invertire i filtri delle emittenti

Utilizza la nuova casella di controllo Inverti per invertire i filtri nel riquadro Rete.

Ad esempio, puoi digitare "status-code: 404" per filtrare le richieste di rete con stato 404. Attiva la casella di controllo Inverti per negare il filtro (mostra tutte le richieste di rete che non hanno lo stato 404).

Invertire i filtri di rete

Problema di Chromium: 1054464

Ritiro imminente della barra laterale della console

La barra laterale della console verrà rimossa in favore del trasferimento dell'interfaccia utente del filtro nella barra degli strumenti. Hai dubbi o feedback? Facci sapere tramite questo tracker dei problemi.

Messaggio relativo alla deprecazione della barra laterale della console

Problema di Chromium: 1232937

Mostra le intestazioni Set-Cookie non elaborate nella scheda Problemi e nel riquadro Rete

Ora DevTools mostra le intestazioni Set-Cookie non elaborate nella scheda Problemi.

In precedenza, DevTools non mostrava i cookie con formato non corretto (intestazione Set-Cookie errata) nel riquadro Rete. Con il nuovo filtro response-header-set-cookie aggiunto nel riquadro Rete, gli utenti possono filtrare la risposta dell'intestazione Set-Cookie non elaborata. DevTools collegherà le intestazioni Set-Cookie non elaborate nella scheda Problemi al riquadro Rete.

Intestazioni "Set-Cookie" non elaborate nella scheda Problemi e nel riquadro Rete

Problema di Chromium: 1179186

Visualizza gli accessori nativi in modo coerente come proprietà proprie nella console

La console ora mostra gli accessori nativi come proprietà proprie in modo coerente.

Ad esempio, durante la valutazione dell'espressione new Int8Array([1, 2, 3]) nella console, gli accessori nativi come length e byteOffset non venivano visualizzati nell'anteprima. Con questo ultimo aggiornamento, gli accessori nativi vengono mostrati nell'anteprima e i valori vengono valutati in modo esplicito quando vengono espansi.

Visualizza gli accessori nativi in modo coerente come proprietà proprie nella console

Problemi di Chromium: 1076820, ​​1199247

Analisi dello stack degli errori corrette per gli script in linea con #sourceURL

Ora DevTools risolve correttamente gli script in linea con #sourceURL e mostra le tracce dello stack degli errori appropriate per il debug.

In precedenza, DevTools mostrava la posizione errata per gli script in linea con #sourceURL rispetto al documento circostante anziché al tag <script> di apertura.

Analisi dello stack degli errori corrette per gli script in linea con #sourceURL

Problemi di Chromium: 1183990, ​​578269

Modificare il formato del colore nel riquadro Calcolata

Ora puoi modificare il formato del colore di qualsiasi elemento nel riquadro Calcolata facendo clic su Maiusc + l'anteprima del colore.

Fai clic con Maiusc sulla miniatura del colore per cambiare il formato del colore

Problema di Chromium: 1226371

Sostituire le descrizioni comando personalizzate con descrizioni comando HTML native

DevTools ora adotta descrizioni comando HTML native in tutti i componenti. DevTools ha implementato una descrizione comando personalizzata da molto tempo a causa della mancanza di stile di una descrizione comando HTML nativa.

Purtroppo, la gestione di un'implementazione di descrizioni comando personalizzate è complicata e riscontriamo regolarmente bug complicati.

Dopo aver rivalutato i vantaggi delle implementazioni personalizzate, abbiamo riscontrato che le descrizioni comando HTML native sono sufficienti per DevTools e che il loro utilizzo evita una vasta gamma di problemi per i nostri utenti.

Descrizione comando DevTools

Problema di Chromium: 1223391

[Sperimentale] Nascondere i problemi nella scheda Problemi

Attiva l'esperimento Menu Nascondi problemi per nascondere i problemi nella scheda Problemi. In questo modo, puoi concentrarti sui problemi importanti che ti interessano.

Nella scheda Problema, passa il mouse sopra un problema, fai clic sul menu del problema   Altro   a destra e seleziona Nascondi problemi come questo per nasconderlo.

Menu contestuale Nascondi problema sperimentale

Problema di Chromium: 1175722

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.

Novità di DevTools

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