Novità di DevTools (Chrome 94)

Jecelyn Yeen

Utilizzare DevTools nella lingua che preferisci

Chrome DevTools ora supporta più di 80 lingue, consentendoti di lavorare nella tua lingua preferita.

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

Preferenze" 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 dall'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 di 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 i tuoi utenti possono provare per un periodo di tempo limitato prima che la funzionalità venga resa disponibile a tutti.

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

Prove dell'origine nella visualizzazione Dettagli frame

Problema di Chromium: 607555

Nuovo badge per le query sui contenitori CSS

Un nuovo badge contenitore viene aggiunto accanto agli elementi contenitore (gli elementi predecessori che corrispondono ai criteri delle regole @container). Fai clic sul badge per attivare/disattivare la visualizzazione di una sovrapposizione del contenitore scelto e di tutti i relativi discendenti di query sulla pagina.

Badge delle query del contenitore CSS

Problema di Chromium: 1146422

Nuova casella di controllo per invertire i filtri di rete

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. Seleziona 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 a favore dello spostamento dell'interfaccia utente del filtro nella barra degli strumenti. Hai dubbi o feedback? Faccelo sapere tramite questo strumento di monitoraggio dei problemi.

Messaggio relativo alla deprecazione della barra laterale della console

Problema di Chromium: 1232937

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

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

In precedenza, DevTools non mostrava i cookie non validi (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

Visualizzazione coerente degli accessor nativi come proprietà proprie nella console

La Console ora mostra gli accessor nativi in modo coerente come proprietà proprie.

Ad esempio, quando si valuta l'espressione new Int8Array([1, 2, 3]) nella console, gli accessor nativi come length e byteOffset non vengono visualizzati nell'anteprima. Con questo ultimo aggiornamento, gli accessor nativi vengono visualizzati nell'anteprima e i valori vengono valutati immediatamente quando vengono espansi.

Visualizzazione coerente degli accessor nativi come proprietà proprie nella console

Problemi di Chromium: 1076820, ​​1199247

Tracce dello stack di errori corrette per gli script incorporati con #sourceURL

DevTools ora risolve correttamente gli script incorporati con #sourceURL e mostra le tracce dello stack di errori corrette per il debug.

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

Tracce dello stack di errori corrette per gli script incorporati con #sourceURL

Problemi di Chromium: 1183990, ​​578269

Modificare il formato del colore nel riquadro Calcolato

Ora puoi modificare il formato del colore di qualsiasi elemento nel riquadro Calcolato facendo Maiusc + clic sull'anteprima del colore.

Maiusc+clic sull&#39;anteprima del colore per cambiare il formato del colore

Problema di Chromium: 1226371

Sostituisci le descrizioni comando personalizzate con descrizioni comando HTML native

DevTools ora adotta i suggerimenti HTML nativi in tutti i componenti. DevTools ha implementato un tooltip personalizzato per molto tempo a causa della mancanza di stile di un tooltip HTML nativo.

Purtroppo, la manutenzione di un'implementazione personalizzata della descrizione comando è complicata e riscontriamo regolarmente bug complessi.

Dopo aver riponderato i vantaggi delle implementazioni personalizzate, abbiamo scoperto che le descrizioni comando HTML native sono sufficienti per DevTools e che l'adozione delle descrizioni comando previene 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 per te.

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

Menu contestuale sperimentale Nascondi problema

Problema di Chromium: 1175722

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 funzionalità più recenti di DevTools, testare le API della piattaforma web all'avanguardia e trovare problemi sul tuo sito prima che lo facciano i tuoi utenti.

Contatta il team di Chrome DevTools

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

Novità di DevTools

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