Novità di DevTools (Chrome 113)

Sofia Emelianova
Sofia Emelianova
GitHub
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:

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

Errore CORS corretto tramite un'override dell'intestazione.

Puoi anche aggiungere intestazioni personalizzate.

Aggiunta di un'intestazione personalizzata.

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 (*).

Modifica di tutte le sostituzioni.

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 Casella di controllo. Mostra frame nell'elenco ignora.

La traccia dello stack prima e dopo l'attivazione dell'elenco di ignoramenti di terze parti.

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:

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.

Nome della proprietà e valore della proprietà non validi.

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.

Link ai fotogrammi chiave nella proprietà abbreviata dell'animazione.

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. Impostazioni > Console > Casella di controllo. Accetta il suggerimento di completamento automatico con Invio.

La casella di controllo corrispondente in Impostazioni.

Inoltre, il testo di un'altra impostazione è ora più intuitivo: Casella di controllo. 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.

Uno script nell'elenco ignorato nella finestra di dialogo di apertura rapida prima e dopo la modifica.

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.

Ritiro del profiler di JavaScript.

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 gli 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.