Novità di DevTools (Chrome 94)

Utilizza DevTools nella lingua che preferisci

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

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

Preferenze" width="800" altezza="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 in Modalità dispositivo.

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

Dispositivo Nest Hub in modalità Dispositivo

Problema di Chromium: 1223525

Prove dell'origine nella visualizzazione dei dettagli del frame

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

Le prove dell'origine ti consentono di accedere a una funzionalità nuova o sperimentale per creare funzionalità che gli utenti possono provare per un periodo di tempo limitato prima che venga resa disponibile per tutti.

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

Prove dell'origine nella visualizzazione dei dettagli del frame

Problema di Chromium: 607555

Nuovo badge delle query del contenitore CSS

Accanto agli elementi container (elementi predecessori che corrispondono ai criteri delle regole at-rule @container) viene aggiunto un nuovo badge contenitore. Fai clic sul badge per attivare/disattivare la visualizzazione di un overlay 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 lo stato 404. Seleziona la casella di controllo Inverti per annullare il filtro (mostrare tutte le richieste di rete che non hanno lo stato 404).

Inverti i filtri di rete

Problema di Chromium: 1054464

Ritiro imminente della barra laterale della Console

La barra laterale della console verrà rimossa per favorire lo spostamento dell'interfaccia utente del filtro sulla barra degli strumenti. Hai dubbi o feedback? Faccelo sapere tramite questo Issue Tracker.

Messaggio sul ritiro 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 cookie non corretti (intestazione Set-Cookie errata) nel riquadro Network. 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 delle funzioni di accesso native come proprietà nella console

La console ora mostra le funzioni di accesso native come proprietà in modo coerente.

Ad esempio, durante la valutazione dell'espressione new Int8Array([1, 2, 3]) nella console, le funzioni di accesso native come length e byteOffset non venivano visualizzate nell'anteprima. Con quest'ultimo aggiornamento, le funzioni di accesso native vengono mostrate nell'anteprima e i valori vengono valutati con attenzione quando vengono espansi.

Visualizzazione coerente delle funzioni di accesso native come proprietà nella console

Problemi di Chromium: 1076820, 1199247

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

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

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

Analisi corrette dello stack di errori 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 premendo Maiusc e facendo clic sull'anteprima del colore.

Maiusc + fai 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 le descrizioni comando HTML native in tutti i componenti. DevTools ha implementato da molto tempo un'implementazione della descrizione comando personalizzata a causa della mancanza di stili per una descrizione comando HTML nativa.

Sfortunatamente, gestire un'implementazione personalizzata delle descrizioni dei comandi è complicata e riscontriamo regolarmente bug complicati.

Dopo aver ripesato i vantaggi delle implementazioni personalizzate, abbiamo notato che le descrizioni comando HTML native sono sufficienti per DevTools e l'adozione delle descrizioni comando impedisce una grande varietà di problemi per i nostri utenti.

Descrizione comando DevTools

Problema di Chromium: 1223391

[Sperimentale] Nascondi i problemi nella scheda Problemi

Attiva l'esperimento sul menu Nascondi problemi per nascondere i problemi nella scheda Problemi. In questo modo, puoi concentrarti sulle questioni importanti che ti interessano.

Nella scheda Problema, passa il mouse sopra un problema, fai clic sul menu dei problemi Altre a destra e seleziona Nascondi problemi di questo tipo per nasconderlo.

Menu contestuale sperimentale per nascondere il problema

Problema di Chromium: 1175722

Scarica 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à di DevTools più recenti, di testare le API per piattaforme web all'avanguardia e di individuare eventuali problemi sul tuo sito prima che lo facciano gli utenti.

Contattare il team di Chrome DevTools

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

  • Inviaci un suggerimento o un feedback tramite crbug.com.
  • Segnala un problema DevTools utilizzando Altre opzioni   Altre   > Guida > Segnala i problemi di DevTools in DevTools.
  • Tweet all'indirizzo @ChromeDevTools.
  • Lascia commenti sui video di YouTube o sui suggerimenti di DevTools in DevTools Video di YouTube.

Novità di DevTools

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

Chrome 123

Chrome 122

Guida introduttiva di Chrome

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Versione 115 di Chrome

Chrome 114

Chrome 113

Chrome 112

Guida introduttiva di Chrome

Versione 110 di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

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 versione 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 è stato annullato.

Chrome 81

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

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59