Novità di DevTools (Chrome 114)

Sofia Emelianova
Sofia Emelianova

Supporto per il debug di WebAssembly

DevTools attiva Impostazioni. Impostazioni > Esperimenti > Casella di controllo. Debug di WebAssembly: attiva il supporto DWARF per impostazione predefinita. Per saperne di più, consulta Eseguire il debug di WebAssembly con strumenti moderni.

Questo esperimento ti consente di mettere in pausa l'esecuzione ed eseguire il debug del codice C e C++ nelle app Wasm, con tutte le informazioni di debug a tua disposizione:

  • Il codice sorgente originale, mappato utilizzando le informazioni di debug DWARF.
  • Nomi di funzioni comprensibili nello stack delle chiamate.
  • Supporto dei punti di interruzione e altro ancora.

Un'applicazione Wasm in pausa nel debugger.

Per testare il debug di Wasm, installa l'estensione C/C++ DevTools Support (DWARF) ed esegui il codice passo passo nella demo di Mandelbrot.

Problema di Chromium: 1414289.

Miglioramento del comportamento di esecuzione passo passo nelle app Wasm

Esegui istruzione/routine. Esegui istruzione per istruzione nel codice originale ora evita la pausa nel disassemblaggio (file .wasm). In precedenza, la riproduzione si interrompeva.

Tuttavia, l'esecuzione passo passo termina quando esce dalla funzione in cui è iniziata, ad esempio dopo il ritorno dalla funzione.

Questo comportamento è attivato per impostazione predefinita in Impostazioni. Impostazioni > Preferenze > Fonti.

La nuova impostazione si trova in Preferenze, poi in Sorgenti.

Problema di Chromium: 1418938.

Eseguire il debug della compilazione automatica utilizzando il riquadro Elementi e la scheda Problemi

La compilazione automatica di Chrome compila automaticamente i moduli con i dati salvati, come indirizzi o dati di pagamento. Per consentirti di eseguire facilmente il debug dei problemi relativi alla compilazione automatica, il riquadro Elementi ora può evidenziarli con sottolineature rosse ondulate.

Per provare questa funzionalità, attiva Impostazioni. Impostazioni > Esperimenti > Casella di controllo. Evidenzia un nodo o un attributo in violazione nell'albero DOM del riquadro Elementi e ispeziona questa pagina demo.

Problemi di compilazione automatica evidenziati nel riquadro Elementi e segnalati dal riquadro Problemi.

Passa il mouse sopra un problema evidenziato nell'albero DOM e fai clic su Visualizza problema per aprire la scheda Problemi, che elenca tutti i problemi rilevati e fornisce indizi su cosa è andato storto.

Problema di Chromium: 1399414.

Asserzioni nel Registratore

Il riquadro Registratore ora ti consente di aggiungere asserzioni direttamente durante la registrazione, con tutti i dati di runtime a tua disposizione.

Per aggiungere un'asserzione, avvia una nuova registrazione, interagisci con la pagina e fai clic su Aggiungi asserzione. Registratore inserisce un passaggio di tipo waitForElement che puoi personalizzare al volo. Guarda il video per vedere le asserzioni in azione nella demo del carrello del caffè.

Questo video mostra come asserire:

  • Attributi HTML, ad esempio class di un elemento.
  • Proprietà JavaScript in JSON, ad esempio .innerText.

Puoi anche configurare i passaggi per verificare, ad esempio, le istruzioni condizionali in JavaScript, il numero di elementi secondari del nodo (count), la visibilità degli elementi e altro ancora. Per ulteriori informazioni, vedi Configurare i passaggi.

Inoltre, ora Registratore memorizza il formato dello script preferito nella visualizzazione del codice affiancata e nel menu dei passaggi con il tasto destro del mouse.

Problema di Chromium: 1423624.

Lighthouse 10.1.1

Il riquadro Lighthouse ora esegue Lighthouse 10.1.1, con una modifica importante introdotta nella versione 10.1.0. Tutti gli audit che riguardano gli URL sono ora raggruppati per entità e aggregati di statistiche numeriche come dimensioni o durata. Le terze parti più popolari sono anche contrassegnate con la loro categoria, in modo che sia più facile identificare il loro scopo nella pagina.

Controlli raggruppati per entità.

Per scoprire le nozioni di base sull'utilizzo del riquadro Lighthouse in DevTools, consulta Lighthouse: ottimizzare la velocità del sito web.

Problema di Chromium: 772558.

Miglioramenti delle prestazioni

performance.mark() mostra la tempistica al passaggio del mouse in Rendimento > Tempistiche

Il metodo performance.mark() ora mostra la tempistica quando passi il mouse sopra il segno corrispondente in Rendimento > Tempistiche. La tempistica qui è un timestamp relativo all'evento di navigazione precedente.

Il popup con la tempistica al passaggio del mouse nella sezione Tempistiche.

Problema di Chromium: 1426762.

Il comando profile() compila la sezione Rendimento > Principale

I comandi profile() e profileEnd() nella console ora avviano e arrestano la profilazione della CPU nel thread principale del riquadro Rendimento.

Il comando console() crea un profilo nel riquadro Rendimento.

Problema di Chromium: 1429191.

Avviso per interazioni utente lente

Le interazioni degli utenti più lunghe di 200 millisecondi ricevono un avviso Interaction to Next Paint (INP) nella scheda Rendimento > Riepilogo.

Avviso INP.

Inoltre, l'ID dell'interazione è stato spostato dalla descrizione comando a Riepilogo.

Problemi di Chromium: 1432512, 1432509.

La traccia Web Vitals è stata spostata

Nel riquadro Rendimento sono state rimosse le seguenti tracce:

  • La traccia Web Vitals. Visualizza invece le tempistiche pertinenti nella traccia Tempistiche al passaggio del mouse.
  • La traccia secondaria Attività lunghe. Puoi già trovare queste attività nella traccia Principale ombreggiata in rosso e con un triangolo rosso.

Sia le tracce Segnali web che Attività lunghe contenevano informazioni duplicate altrove. Inoltre, non erano interattivi rispetto alle alternative più complete, che forniscono informazioni più dettagliate quando vengono selezionate.

Prima e dopo lo spostamento dei Segnali web nella traccia Timing.

Inoltre, la traccia Esperienze è stata rinominata in Variazioni di layout per rispecchiare in modo più preciso il suo utilizzo.

Scopri di più su Web Vitals.

Ritiro del Profiler di JavaScript: fase 3

Già a partire da Chrome 58, il team di DevTools aveva pianificato di ritirare il profiler JavaScript e di invitare gli sviluppatori Node.js e Deno a utilizzare il riquadro Prestazioni per profilare le prestazioni della CPU JavaScript.

La versione 114 di DevTools inizia la fase 3 del ritiro del profiler JavaScript in quattro fasi. Durante questa fase, il riquadro Profiler JavaScript viene rimosso da DevTools, ma puoi comunque attivarlo temporaneamente tramite Impostazioni. Impostazioni > Funzionalità sperimentali e aprirlo dal menu con tre puntini Menu con tre puntini..

Casella di controllo Profiler di JavaScript in Impostazioni, poi Esperimenti.

Per profilare le prestazioni della CPU, utilizza il riquadro Prestazioni.

Problema di Chromium: 1428026.

Punti salienti vari

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

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.