Questa pagina è stata tradotta dall'API Cloud Translation.

Novità di DevTools (Chrome 104)

Jecelyn Yeen

Riavvia frame durante il debug

La funzionalità Riavvia frame è tornata. Puoi eseguire nuovamente il codice precedente quando messo in pausa in una funzione. In precedenza, questa funzionalità veniva ritirata e rimossa in Chrome 92 a causa di problemi di stabilità.

In questo esempio, il debugger inizialmente si è fermato 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.

Riavvia frame durante il debug

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 ogni passo ripetuto sullo schermo.

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

Opzioni di riproduzione lenta nel riquadro Registratore

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 riproduzione nel formato che preferisci. Consulta la documentazione dell'API per l'estensione 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 / implementato nel riquadro Origini

Attiva la nuova opzione Raggruppa i file per Creato / Deployment per organizzare i tuoi file nel riquadro Origini. Durante lo sviluppo di applicazioni web con framework (ad esempio React, Angular), può essere difficile esplorare i file di origine a causa dei file minimizzati generati dagli strumenti di creazione (ad esempio Webpack, Vite).

Con questa casella di controllo, puoi raggruppare i file in due categorie per velocizzare la ricerca dei file:

Creato. Simili ai file sorgente visualizzati nel tuo IDE. DevTools genera questi file in base alle mappe di origine (fornite dagli strumenti di creazione).
Deployment eseguito. I file effettivi letti dal browser. In genere questi file sono minimizzati.

Prova questa demo di React.

Raggruppa i file per Creato / implementato nel riquadro Origini

Problema di Chromium: 960909

Monitoraggio dei nuovi tempi utente nel riquadro Informazioni sul rendimento

Visualizza i contrassegni performance.measure() nella registrazione con la nuova traccia Tempi utenti nel riquadro Informazioni 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 Tempi utente. Fai clic sulla sincronizzazione per visualizzarne i dettagli nel riquadro laterale.

Monitoraggio dei tempi utente nel riquadro Informazioni sul rendimento

Problema di Chromium: 1322808

Mostra lo slot assegnato di un elemento

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

Questo esempio contiene schede con alcuni spazi denominati. Controlla lo slot person-occupation di una scheda, fai clic sul badge slot accanto alla scheda per visualizzare l'area che ti è stata assegnata.

Scopri come utilizzare gli elementi <template> e <slot> per creare un modello flessibile da utilizzare per completare lo shadow DOM di un componente web.

Mostra lo slot assegnato di un elemento

Problema di Chromium: 1018906

Simula la contemporaneità dell'hardware per le registrazioni delle prestazioni

La nuova impostazione Contemporaneità hardware nel riquadro Prestazioni consente agli sviluppatori di configurare il valore segnalato 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 le prestazioni delle applicazioni con conteggi di core diversi.

Simula la contemporaneità dell'hardware per le registrazioni delle prestazioni

Problema di Chromium: 1297439

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

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

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

Problema di Chromium: 1285091

Identifica i frame bloccati nel riquadro della 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 memorizzata nella cache back-forward.

Identifica i frame bloccati nel riquadro della cache back-forward

Problema di Chromium: 1288158

Suggerimenti di completamento automatico migliorati per gli oggetti JavaScript

Il completamento automatico per le proprietà degli oggetti JavaScript ora viene visualizzato in base al seguente ordine:

Possiedi proprietà enumerabili
Possiedi proprietà non enumerabili
Proprietà enumerabili ereditate
Proprietà non enumerabili ereditate

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

Suggerimenti di completamento automatico migliorati per gli oggetti JavaScript

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 nell'interfaccia <script> incorporata con le annotazioni sourceURL.
Il debugger ora risolve le variabili con ambito a blocchi nella visualizzazione Ambito con le mappe di origine.
Il debugger ora risolve le variabili nelle funzioni a freccia nella visualizzazione Ambito con le mappe di origine.

Problemi di Chromium: 1329113, 1322115

Varie in evidenza

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 sempre attivo anche l'impostazione era disattivato. (1323286)
È stata aggiornata la scheda Manifest nel riquadro Applicazione per analizzare il formato della combinazione di colori più recente. (1318305)
Sono stati migliorati i suggerimenti relativi ai <script async> problemi di blocco della visualizzazione nel riquadro Informazioni sulle prestazioni. In precedenza, DevTools consigliava di usare add async attribute to the script tag anche se lo script era già contrassegnato come asincrono. (1334096)
Il riquadro Informazioni 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 (ovvero quelli generati dalle mappe di origine) hanno ora un ranking più elevato, in modo da apparire al di sopra degli script di cui è stato eseguito il deployment con nomi simili. (1312929)

Scarica 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à di DevTools più recenti, di testare le API per piattaforme web all'avanguardia e di individuare eventuali problemi sul tuo sito prima che lo facciano gli utenti.

Contattare il team di Chrome DevTools

Utilizza le opzioni seguenti per discutere delle nuove funzionalità e delle modifiche nel post o di qualsiasi altra cosa relativa a DevTools.

Inviaci un suggerimento o un feedback tramite crbug.com.
Segnala un problema DevTools utilizzando Altre opzioni > Guida > Segnala i problemi di DevTools in DevTools.
Tweet all'indirizzo @ChromeDevTools.
Lascia commenti sui video di YouTube o sui suggerimenti di DevTools in DevTools Video di YouTube.