Novità di DevTools (Chrome 114)

Sofia Emelianova

Jecelyn Yeen

Supporto per il debug di WebAssembly

DevTools attiva Impostazioni > Esperimenti > WebAssembly Debugging: Enable DWARF support per impostazione predefinita. Per saperne di più, consulta 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.

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 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 > Preferenze > Fonti.

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 > Esperimenti > Evidenzia un nodo o un attributo in violazione nell'albero DOM del riquadro Elementi ed esamina questa pagina demo.

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 saperne di più, consulta 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 ora sono 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 identificarne lo scopo nella pagina.

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.

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.

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.

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 essenziali che Attività lunghe contenevano informazioni duplicate altrove. Inoltre, non erano interattivi rispetto alle alternative più complete, che forniscono informazioni più dettagliate quando vengono selezionate.

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 profilatore JavaScript e di invitare gli sviluppatori Node.js e Deno a utilizzare il pannello 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 > Funzionalità sperimentali e aprirlo dal menu con tre puntini .