Novità di DevTools (Chrome 104)

Jecelyn Yeen

Riavvia frame durante il debug

La funzionalità Riavvia frame è di nuovo disponibile. Puoi eseguire nuovamente il codice precedente quando la metti in pausa in un punto di una funzione. In precedenza, questa funzionalità era deprecata e rimossa in Chrome 92 a causa di problemi di stabilità.

In questo esempio, il debugger si è inizialmente messo in pausa in corrispondenza del punto di interruzione (riga 343) verso la 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 relativo a 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 riproduzione di ogni passaggio sullo schermo.

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

Opzioni di riproduzione lenta nel riquadro Registratore

Problema relativo a Chromium: 1306756

Crea un'estensione per il riquadro Registratore

Ora puoi creare o installare un'estensione di Chrome per esportare gli script di ripetizione nel tuo formato preferito. Per informazioni su come crearne uno, consulta la documentazione sull'API dell'estensione Registratore.

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

estensione personalizzata per il riquadro Registratore

Problema relativo a Chromium: 1325751

Raggruppa i file per Creato / Distribuito nel riquadro Origini

Attiva la nuova opzione Raggruppa file per autore / implementazione per organizzare i file nel riquadro Origini. Durante lo sviluppo di applicazioni web con framework (ad esempio React, Angular), può essere difficile navigare tra 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 una ricerca di file più rapida:

  • Creato. Simili ai file sorgente che visualizzi 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 vengono minimizzati.

Fai una prova con questa demo di React.

Raggruppa i file per Creato / Distribuito nel riquadro Origini

Problema relativo a Chromium: 960909

Nuovo monitoraggio Tempi utenti nel riquadro Informazioni sul rendimento

Visualizza performance.measure() indicatori 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 del caricamento del testo.

Quando inizi a misurare il caricamento della pagina, nella registrazione viene visualizzata la traccia Tempi utente. Fai clic sull'elemento di sincronizzazione per visualizzarne i dettagli nel riquadro laterale.

Monitoraggio dei Tempi utenti nel riquadro Informazioni sul rendimento

Problema relativo a Chromium: 1322808

Mostra l'area assegnata di un elemento

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

Questo esempio contiene carte con alcuni slot denominati. Ispeziona lo slot person-occupation di una scheda e fai clic sul badge slot accanto alla scheda per scoprire lo slot assegnato.

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

Mostra l&#39;area assegnata di un elemento

Problema relativo a 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 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 Emscripten. Con questa funzionalità, gli sviluppatori possono testare le prestazioni delle loro applicazioni con un numero di core diverso.

Simula la contemporaneità dell&#39;hardware per le registrazioni delle prestazioni

Problema relativo a Chromium: 1297439

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

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

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

Problema relativo a Chromium: 1285091

Identifica i frame di blocco nel riquadro della cache back-forward

Il riquadro Cache back/forward nel riquadro Applicazione ha una nuova sezione frame che ti consente di identificare i frame di blocco che potrebbero impedire alla pagina di essere idonea per bfcache.

Identifica i frame di blocco nel riquadro della cache back-forward

Problema relativo a Chromium: 1288158

Suggerimenti di completamento automatico migliorati per gli oggetti JavaScript

Il completamento automatico per le proprietà dell'oggetto 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 avevano difficoltà a trovare proprietà pertinenti perché il suggerimento privilegiava 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 relativo a Chromium: 1299241

Miglioramenti alle mappe di origine

Di seguito sono riportate alcune correzioni alle mappe del codice sorgente per migliorare l'esperienza di debug generale:

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

Problemi relativi a Chromium: 1329113, 1322115

Varie in evidenza

Di seguito sono riportate alcune importanti correzioni 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)
  • La scheda Manifest è stata aggiornata nel riquadro Applicazione per analizzare il formato della combinazione di colori più recente. (1318305)
  • Sono stati migliorati i suggerimenti per i problemi di blocco del rendering <script async> nel riquadro Informazioni sul rendimento. In precedenza, DevTools ha suggerito di add async attribute to the script tag anche se lo script è 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 dei comandi, i file creati (quelli generati dalle mappe di origine) sono ora classificati in un ranking più elevato, in modo da apparire sopra gli script implementati 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 in anteprima ti consentono di accedere alle funzionalità più recenti di DevTools, testare le API delle piattaforme web all'avanguardia e individuare i problemi sul tuo sito prima che lo facciano gli utenti.

Contattare il team di Chrome DevTools

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

  • Inviaci un suggerimento o un feedback tramite crbug.com.
  • Segnala un problema di DevTools utilizzando Altre opzioni   Altro > Guida > Segnala un problema di DevTools in DevTools.
  • Invia un tweet all'indirizzo @ChromeDevTools.
  • Lascia commenti sulle novità nei video di YouTube di DevTools o nei video di YouTube dei suggerimenti di DevTools.

Novità di DevTools

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