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 è in pausa in un punto di una funzione. In precedenza, questa funzionalità era stata ritirata e rimossa in Chrome 92 a causa di problemi di stabilità.

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

Problema di Chromium: 1303521

Opzioni di riproduzione lenta nel riquadro Registratore

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

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

Problema di Chromium: 1306756

Creare un'estensione per il riquadro Registratore

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

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

Problema di Chromium: 1325751

Raggruppare i file per Creato / Distribuito nel riquadro Origini

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 velocizzarne la ricerca:

• 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. In genere questi file sono minimizzati.

Prova tu stesso con questa demo di React.

Problema di Chromium: 960909

Monitoraggio dei tempi di nuovi utenti nel riquadro Informazioni sulle prestazioni

Visualizza i segni performance.measure() nella registrazione con il nuovo canale Tempi dell'utente nel riquadro Approfondimenti sul rendimento.

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

Quando inizi a misurare il caricamento della pagina, il canale Tempi dell'utente viene visualizzato nella registrazione. Fai clic sull'elemento relativo ai tempi per visualizzarne i dettagli nel riquadro laterale.

Problema di Chromium: 1322808

Mostrare lo spazio assegnato di un elemento

Gli elementi con spaziatura 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. Controlla 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 compilare il DOM ombra di un componente web.

Problema di Chromium: 1018906

Simulare la concorrenza hardware per le registrazioni delle prestazioni

La nuova impostazione Contemporaneità 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 della loro applicazione, ad esempio per controllare le dimensioni del pool pthread di Emscripten. Con questa funzionalità, gli sviluppatori possono testare il rendimento delle loro applicazioni con un numero diverso di core.

Problema di Chromium: 1297439

Visualizzare l'anteprima del valore non di colore durante la compilazione automatica delle variabili CSS

Durante il completamento automatico delle variabili CSS, DevTools ora compila la variabile non di colore con un valore significativo in modo da poter visualizzare l'anteprima del tipo di modifica che il valore avrà sul nodo.

Problema di Chromium: 1285091

Identificare i frame che bloccano nel riquadro Cache back-forward

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

Problema di Chromium: 1288158

Suggerimenti di completamento automatico migliorati per gli oggetti JavaScript

La compilazione automatica delle proprietà degli oggetti JavaScript ora viene visualizzata in base a questo ordine:

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

In precedenza, gli sviluppatori trovavano più difficile trovare 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à.

Problema di Chromium: 1299241

Miglioramenti alle mappe di origine

Di seguito sono riportate alcune correzioni alle mappe di origine per migliorare l'esperienza di debug complessiva:

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

Problemi di Chromium: 1329113, 1322115

Altri punti salienti

Di seguito sono riportate alcune correzioni importanti di questa release:

• È stata corretta l'impostazione Completamento automatico per il riquadro Origini. 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 più recente della combinazione di colori. (1318305)
• Sono stati migliorati i suggerimenti per i problemi di blocco del rendering <script async> nel riquadro Approfondimenti 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 di 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 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.

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