Novità di DevTools (Chrome 113)

Sofia Emelianova

Jecelyn Yeen

Esegui l'override delle intestazioni delle risposte di rete

Ora puoi eseguire l'override delle intestazioni delle risposte nel riquadro Rete. In precedenza, era necessario accedere al server web per eseguire dei test con le intestazioni delle risposte HTTP.

Con gli override delle intestazioni delle risposte, puoi prototipare localmente correzioni per varie intestazioni, incluse, a titolo esemplificativo:

• Intestazioni CORS (condivisione delle risorse tra origini)
• Intestazioni Permissions-Policy
• Intestazioni di isolamento multiorigine

Per eseguire l'override di un'intestazione, vai a Rete > Intestazioni > Intestazioni della risposta, passa il mouse sopra il valore di un'intestazione, fai clic su e modificala.

Puoi anche aggiungere intestazioni personalizzate.

Per modificare tutti gli override in un unico posto, modifica il file .headers in Origini > Override: Qui puoi anche fare clic su Aggiungi regola di override per eseguire l'override di più richieste utilizzando i caratteri jolly (*).

Problema relativo a Chromium: 1288023.

Miglioramenti al debug di Nuxt, Vite e Rollup

Per aiutarti a individuare i problemi più rapidamente durante il debug, l'analisi dello stack avanzata ora nasconde i frame provenienti da origini generate da Nuxt 3.3 o versioni successive. DevTools ignora questi frame:

• Nelle tracce della console, sotto il link Mostra altri N frame.
• In Fonti > Stack di chiamate, in Mostra frame inclusi nell'elenco di elementi da ignorare.

Per offrirti questi miglioramenti, i team DevTools, Nuxt, Vite e Rollup hanno collaborato per adottare l'estensione della mappa di origine x_google_ignoreList:

• Release Nuxt 3.3
• Opzioni Vite Server
• Opzioni di configurazione di aggregazione

Il team DevTools vorrebbe ringraziare i team Nuxt, Vite e Rollup per aver reso possibile tutto questo. Apprezziamo il tuo impegno e la tua collaborazione, che sono stati fondamentali per il successo di questa implementazione. Grazie ancora per i tuoi contributi.

Miglioramenti CSS in Elementi > Stili

Proprietà e valori CSS non validi

Per aiutarti a diagnosticare più velocemente i problemi relativi al CSS, il riquadro Stili ora è barrato:

• Un'intera dichiarazione CSS (proprietà e valore) quando la proprietà CSS non è valida.
• Solo il valore quando la proprietà CSS è valida, ma il valore non è valido.

Il team DevTools esprime gratitudine a Yisi(丝) per aver ottenuto questo miglioramento.

Link ai frame chiave nella proprietà abbreviata dell'animazione

La proprietà CSS animation in forma abbreviata ora contiene link alle regole at-rule di @keyframes corrispondenti, per consentirti di navigare più velocemente nel riquadro Stili.

Problema relativo a Chromium: 1420656.

Nuova impostazione della console: completamento automatico alla pressione del tasto Invio

A partire dalla versione precedente (112), puoi configurare la console DevTools per applicare un suggerimento di completamento automatico quando premi Enter.

Per impostazione predefinita, per accettare un suggerimento di completamento automatico puoi premere Tab o Arrow right. Per eseguire il completamento automatico anche con Enter, abilita Impostazioni > Console > Accetta il suggerimento di completamento automatico alla pressione del tasto Invio.

Inoltre, il testo di un'altra impostazione ora è più facile da usare: Considera la valutazione del codice come azione dell'utente.

Problema relativo a Chromium: 1276960.

Il menu dei comandi mette in evidenza i file creati

La finestra di dialogo di apertura rapida nel menu dei comandi ora non fa più apparire i file di terze parti elencati da persone semplice per porre maggiore enfasi sui file che hai creato.

Problema relativo a Chromium: 1424345.

Ritiro di JavaScript Profiler: fase 2

Già nel Chrome 58, il team DevTools aveva pianificato di ritirare JavaScript Profiler e chiedere agli sviluppatori Node.js e Deno di utilizzare il riquadro Prestazioni per la profilazione delle prestazioni della CPU JavaScript.

La versione 113 di DevTools avvia la fase 2 del ritiro di JavaScript Profiler in quattro fasi. Durante questa fase, puoi comunque aprire il riquadro, ma la relativa UI non è più disponibile.

Per profilare le prestazioni della CPU, fai clic su Vai al riquadro Prestazioni.

Problema relativo a Chromium: 1354548.

Varie in evidenza

Di seguito sono riportate alcune importanti correzioni di questa release:

• È stato corretto un bug che causava la gestione non corretta dei nomi delle variabili con caratteri Unicode nel riquadro Origini (1425055).
• Nella scheda Problemi è stato aggiunto un nuovo messaggio per i problemi di compilazione automatica relativi a valori HTML non standard (1399414).

Scaricare 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à più recenti di DevTools, testare le API delle piattaforme web all'avanguardia e 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 utilizzando Altre opzioni   > 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.