Novità di DevTools (Chrome 104)

Jecelyn Yeen

Riavviare il frame durante il debug

La funzionalità Riavvia frame è tornata. Puoi eseguire di nuovo il codice precedente quando la funzione è in pausa. In precedenza, questa funzionalità era stata ritirata e rimossa in Chrome 92 a causa di problemi di stabilità.

In questo esempio, il debugger si è inizialmente interrotto al punto di interruzione (riga 343) vicino alla fine della funzione toggleColorScheme. Per riavviare il debug dall'inizio della funzione toggleColorScheme, espandi la sezione Stack di chiamate nel riquadro Debugger, fai clic con il tasto destro del mouse su toggleColorScheme e seleziona Riavvia frame.

Riavviare il frame durante il debug

Problema di Chromium: 1303521

Opzioni di riproduzione lenta nel riquadro di Recorder

Ora puoi riprodurre i flussi utente a una velocità inferiore: lenta, molto lenta ed estremamente lenta. Queste opzioni ti consentono di osservare meglio la riproduzione di ogni passo sullo schermo.

Apri il riquadro Registratore e avvia una nuova registrazione. Al termine della registrazione, fai clic sul pulsante a discesa Riproduci. Seleziona una velocità per avviare la riproduzione.

Opzioni di riproduzione lenta nel riquadro di Recorder

Problema di Chromium: 1306756

Creare un'estensione per il riquadro Registratore

Ora puoi creare o installare un'estensione Chrome per esportare gli script di replay nel tuo formato preferito. Consulta la documentazione dell'API di estensione del registratore per scoprire come crearne una.

Per installare un'estensione demo, segui questi passaggi descritti nella documentazione.

estensione personalizzata per il riquadro Registratore

Problema di Chromium: 1325751

Raggruppa i file per Creato / Distribuito nel riquadro Risorse

Attiva la nuova opzione Raggruppa i file per Creato / Distribuito per organizzare i file nel riquadro Origini. Quando sviluppi applicazioni web con framework (ad esempio React, Angular), può essere difficile navigare nei file di origine a causa dei file minimizzati generati dagli strumenti di compilazione (ad esempio Webpack, Vite).

Con questa casella di controllo, puoi raggruppare i file in due categorie per una ricerca più rapida:

  • Autore. Simili ai file di origine visualizzati nell'IDE. DevTools genera questi file in base alle mappe di origine (fornite dagli strumenti di compilazione).
  • Eseguito il deployment. I file effettivi letti dal browser. Di solito questi file sono minimizzati.

Prova tu stesso con questa demo di React.

Raggruppa i file per Creato / Distribuito nel riquadro Risorse

Problema di Chromium: 960909

Nuova traccia Tempi utente nel riquadro Informazioni sulle prestazioni

Visualizza i segni performance.measure() nella registrazione con la nuova traccia Tempi utente nel riquadro Approfondimenti sul rendimento.

Ad esempio, questa pagina web utilizza il metodo performance.measure() per calcolare il tempo trascorso per il caricamento del testo.

Quando inizi a misurare il caricamento della pagina, nella registrazione viene visualizzata la traccia User Timings. Fai clic sull'elemento dei tempi per visualizzarne i dettagli nel riquadro laterale.

Traccia Tempi utenti nel riquadro Informazioni sulle prestazioni

Problema di Chromium: 1322808

Mostra lo spazio assegnato di un elemento

Gli elementi con slot nel riquadro Elementi hanno un nuovo badge slot. Quando esegui il debug dei problemi di layout, utilizza questa funzionalità per identificare più rapidamente l'elemento che influisce sul layout del nodo.

Questo esempio contiene schede con alcuni slot denominati. Esamina lo slot person-occupation di una scheda, fai clic sul badge slot accanto per visualizzare lo slot assegnato.

Scopri come utilizzare gli elementi <template> e <slot> per creare un modello flessibile che può essere utilizzato per popolare lo shadow DOM di un componente web.

Mostra lo spazio assegnato di un elemento

Problema di Chromium: 1018906

Simulare la concorrenza hardware per le registrazioni delle prestazioni

La nuova impostazione Concurrency hardware nel riquadro Rendimento consente agli sviluppatori di configurare il valore riportato da navigator.hardwareConcurrency.

Alcune applicazioni utilizzano navigator.hardwareConcurrency per controllare il grado di parallelismo dell'applicazione, ad esempio per controllare le dimensioni del pool di pthread di Emscripten. Con questa funzionalità, gli sviluppatori possono testare le prestazioni delle loro applicazioni con diversi conteggi dei core.

Simulare la concorrenza hardware per le registrazioni delle prestazioni

Problema di Chromium: 1297439

Visualizza l'anteprima del valore non di colore durante il completamento automatico delle variabili CSS

Quando completi automaticamente le variabili CSS, DevTools ora inserisce un valore significativo nella variabile non di colore in modo da poter visualizzare l'effetto della modifica sul nodo.

Visualizza l&#39;anteprima del valore non di colore durante il completamento automatico delle variabili CSS

Problema di Chromium: 1285091

Identificare i frame di blocco nel riquadro Cache back-forward

Il riquadro Cache back-forward nel pannello Applicazione ha una nuova sezione frame per aiutarti a identificare i frame di blocco che potrebbero impedire alla pagina di essere idonea per la cache back-forward.

Identificare i frame di blocco nel riquadro Cache back-forward

Problema di Chromium: 1288158

Suggerimenti di completamento automatico migliorati per gli oggetti JavaScript

Il completamento automatico delle proprietà degli oggetti JavaScript ora viene visualizzato in base a questo ordine:

  1. Proprietà enumerabili proprie
  2. Proprietà non enumerabili proprie
  3. Proprietà enumerabili ereditate
  4. Proprietà non enumerabili ereditate

In precedenza, gli sviluppatori trovavano più difficile trovare le proprietà pertinenti perché il suggerimento favoriva solo le proprietà proprie rispetto a quelle ereditate e a tutte le proprietà ereditate veniva assegnata la stessa priorità.

Suggerimenti di completamento automatico migliorati per gli oggetti JavaScript

Problema di Chromium: 1299241

Miglioramenti delle mappe di origine

Ecco alcune correzioni alle mappe di origine per migliorare l'esperienza di debug complessiva:

  • Ora i punti di interruzione funzionano in linea <script> con le annotazioni sourceURL.
  • Il debugger ora risolve le variabili con ambito di blocco nella visualizzazione Ambito con le mappe di origine. Risolve le variabili con ambito di blocco
  • Il debugger ora risolve le variabili nelle funzioni freccia nella visualizzazione Ambito con le mappe di origine. Risolve le variabili nelle funzioni freccia

Problemi di Chromium: 1329113, 1322115

Punti salienti vari

Di seguito sono riportate alcune correzioni degne di nota in questa release:

  • È stata corretta l'impostazione Completamento automatico per il riquadro Fonti. In precedenza, il completamento automatico era sempre attivo anche se l'impostazione era disattivata. (1323286)
  • È stata aggiornata la scheda Manifest nel riquadro Applicazione per analizzare il formato dello schema di colori più recente. (1318305)
  • Sono stati migliorati i suggerimenti per i problemi di blocco del rendering di <script async> nel riquadro Insight sulle prestazioni. In precedenza, DevTools suggeriva di add async attribute to the script tag anche se lo script era già contrassegnato come asincrono. (1334096)
  • Il riquadro Approfondimenti sul rendimento ora rileva gli iframe come potenziali cause delle variazioni del layout. Puoi visualizzare i dettagli dell'iframe nel riquadro Dettagli. (1328873)
  • Quando apri file nel menu Comando, i file creati (file generati dalle mappe di origine) ora hanno un ranking più alto, quindi vengono visualizzati sopra gli script di cui è stato eseguito il deployment con nomi simili. (1312929)

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.