Novità di DevTools (Chrome 113)

Sofia Emelianova

Jecelyn Yeen

Sostituire le intestazioni di risposta di rete

Ora puoi sostituire le intestazioni di risposta nel riquadro Rete. In precedenza, per eseguire esperimenti con le intestazioni di risposta HTTP era necessario accedere al server web.

Con le sostituzioni delle intestazioni di risposta, puoi creare prototipi locali delle correzioni per varie intestazioni, tra cui, a titolo esemplificativo:

• Intestazioni di Cross-Origin Resource Sharing (CORS)
• Intestazioni relative alle autorizzazioni e alle norme
• Intestazioni di isolamento cross-origin

Per sostituire un'intestazione, vai a Rete > Intestazioni > Intestazioni di risposta, passa il mouse sopra il valore di un'intestazione, fai clic su e modificalo.

Puoi anche aggiungere intestazioni personalizzate.

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

Problema di Chromium: 1288023.

Miglioramenti al debug di Nuxt, Vite e Rollup

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

• Nelle tracce di Console, sotto il link Mostra altri N frame.
• In Origini > Call Stack, fai clic su Mostra frame nell'elenco ignora.

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

• Uscita di Nuxt 3.3
• Vite Server Options
• Opzioni di configurazione dell'aggregazione

Il team di DevTools vuole esprimere la propria gratitudine ai team di Nuxt, Vite e Rollup per aver reso possibile tutto ciò. Apprezziamo il tuo impegno e la tua collaborazione, che sono stati essenziali per la buona riuscita di questa implementazione. Grazie ancora per i tuoi contributi.

Miglioramenti al CSS in Elementi > Stili

Proprietà e valori CSS non validi

Per aiutarti a diagnosticare più rapidamente i problemi relativi al CSS, il riquadro Stili ora barra:

• 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 di DevTools vuole esprimere la propria gratitudine a Yisi(一丝) per aver implementato questo miglioramento.

Link ai fotogrammi chiave nella proprietà di abbreviazione dell'animazione

La proprietà CSS abbreviata animation ora contiene link alle regole at @keyframes corrispondenti, in modo da poter navigare più velocemente nel riquadro Stili.

Problema di Chromium: 1420656.

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

A partire dalla versione precedente (112), puoi configurare la console DevTools in modo che applichi un suggerimento di completamento automatico quando premi Enter.

Per impostazione predefinita, per accettare un suggerimento per il completamento automatico, puoi premere Tab o Arrow right. Per completare automaticamente anche con Enter, attiva Impostazioni > Console > Accetta il suggerimento di completamento automatico con Invio.

Inoltre, il testo di un'altra impostazione è ora più intuitivo: Tratta la valutazione del codice come azione dell'utente.

Problema di Chromium: 1276960.

Il menu dei comandi mette in evidenza i file creati

La finestra di dialogo di apertura rapida nel menu dei comandi ora rende grigi i file di terze parti elencati per l'ignoranza per mettere in evidenza i file che hai creato.

Problema di Chromium: 1424345.

Ritiro del profiler di JavaScript: fase 2

Fin dalla versione 58 di Chrome, il team di DevTools ha pianificato di ritirare il profilatore JavaScript e di chiedere agli sviluppatori di Node.js e Deno di utilizzare il riquadro Prestazioni per eseguire il profiling delle prestazioni della CPU di JavaScript.

La versione 113 di DevTools avvia la seconda fase della deprecazione in quattro fasi del profiler di JavaScript. Durante questa fase, puoi comunque aprire il riquadro, ma la relativa interfaccia utente non è più disponibile.

Per creare un profilo del rendimento della CPU, fai clic su Vai al riquadro Prestazioni.

Problema di Chromium: 1354548.

Altri punti salienti

Di seguito sono riportate alcune correzioni importanti di questa release:

• È stato corretto un bug che causava la gestione errata 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 ai valori HTML non standard (1399414).

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.

• Inviaci feedback e richieste di funzionalità all'indirizzo crbug.com.
• Segnala un problema DevTools utilizzando more_vert Altre opzioni > Guida > Segnala un problema DevTools in DevTools.
• Invia un tweet all'account @ChromeDevTools.
• Lascia un commento sui video di YouTube Novità di DevTools o sui video di YouTube Suggerimenti per DevTools.

Novità di DevTools

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