Novità di DevTools (Chrome 114)

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

Supporto del debug di WebAssembly

DevTools attiva le Impostazioni di Impostazioni. > Esperimenti > Casella di controllo. WebAssembly Debugging: attiva il supporto DWARF per impostazione predefinita. Per maggiori informazioni, 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 tuo codice sorgente originale, mappato utilizzando le informazioni di debug di DWARF.
  • Nomi di funzioni comprensibili nello stack di chiamate.
  • Supporto dei punti di interruzione e altro ancora.

Un'applicazione Wasm è stata messa in pausa nel debugger.

Per testare il debug di Wasm, installa l'estensione C/C++ DevTools (DWARF) e segui il codice nella demo di Mandelbrot.

Problema relativo a Chromium: 1414289.

Miglioramento del comportamento dei passi nelle app Wasm

Passo avanti. Ora passa oltre nel codice originale evita la messa in pausa durante lo smontaggio (file .wasm). In precedenza, in questa sezione si sarebbe fermato.

Tuttavia, un passaggio termina quando arriva al di fuori della funzione in cui è stato avviato, ad esempio dopo il ritorno dalla funzione.

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

La nuova impostazione disponibile in Preferenze e poi Sorgenti.

Problema relativo a Chromium: 1418938.

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

La compilazione automatica di Chrome compila automaticamente i moduli con le informazioni salvate, 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 rigide rosse.

Per provare questa funzionalità, abilita Impostazioni. Impostazioni > Esperimenti > Casella di controllo. Evidenzia un nodo o un attributo in violazione nella struttura DOM del riquadro Elementi ed esamina questa pagina demo.

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

Passa il mouse sopra un problema evidenziato nella struttura DOM e fai clic su Visualizza problema per aprire la scheda Problemi che elenca tutti i problemi rilevati e fornisce indizi su cosa non ha funzionato.

Problema relativo a Chromium: 1399414.

Asserzioni nel Registratore

Il riquadro Registratore ti consente ora 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. Il Registratore inserisce un passaggio con il tipo waitForElement che puoi personalizzare in tempo reale. Guarda il video per vedere le asserzioni in azione nella demo del carrello.

Questo video mostra come dichiarare la presenza di:

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

Puoi anche configurare i passaggi per affermare, ad esempio, istruzioni condizionali in JavaScript, numero di elementi secondari dei nodi (count), visibilità degli elementi e altro ancora. Per ulteriori informazioni, vedi Configurare i passaggi.

Inoltre, l'Registratore ora memorizza il formato di script preferito nella visualizzazione codice affiancata e nel menu del passaggio con il tasto destro del mouse.

Problema relativo a Chromium: 1423624.

Lighthouse 10.1.1

Ora nel riquadro Lighthouse viene eseguito Lighthouse 10.1.1, con una modifica importante introdotta nella versione 10.1.0. Tutti i controlli che riguardano gli URL ora vengono raggruppati per entità e hanno statistiche numeriche aggregate come dimensioni o durata. Anche le terze parti popolari vengono taggate con la propria categoria in modo che sia più facile identificarne lo scopo nella pagina.

Controlli raggruppati per entità.

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

Problema relativo a Chromium: 772558.

Miglioramenti delle prestazioni

performance.mark() mostra il tempo al passaggio del mouse in Rendimento > Tempistiche

Il metodo performance.mark() ora mostra i tempi quando passi il mouse sopra il contrassegno corrispondente in Rendimento > Tempistiche. In questo caso, il timestamp è rappresentato da un timestamp relativo all'evento di navigazione precedente.

Il popup con i tempi al passaggio del mouse nella sezione Tempi.

Problema relativo a Chromium: 1426762.

Il comando profile() compila Prestazioni > Principale

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

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

Problema relativo a Chromium: 1429191.

Avviso per le interazioni lente degli utenti

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

L'avviso INP.

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

Problemi relativi a Chromium: 1432512, 1432509.

Il canale Web Vitals è stato spostato

Il riquadro Rendimento ha rimosso le seguenti tracce:

  • Il canale Web Vitals. Al passaggio del mouse, vengono invece visualizzati i tempi pertinenti nella traccia Tempi.
  • La sottotraccia Attività lunghe. Queste attività sono già presenti nella traccia principale ombreggiata in rosso e con un triangolo rosso.

Entrambi le tracce Web Vitals e Attività lunghe contenevano informazioni duplicate altrove. Inoltre, non erano interattivi rispetto alle alternative dotate di funzionalità più complete che forniscono informazioni più dettagliate quando selezionate.

Prima e dopo aver spostato i Web Vitals alla traccia Tempi.

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

Scopri di più su Web Vitals.

Ritiro di JavaScript Profiler: fase tre

Già nel Chrome 58, il team DevTools aveva pianificato di ritirare JavaScript Profiler e chiedere agli sviluppatori Node.js e Deno di utilizzare il riquadro Prestazioni per la profilazione delle prestazioni della CPU JavaScript.

La versione 114 di DevTools avvia la fase 3 del ritiro di JavaScript Profiler in quattro fasi. Durante questa fase, il riquadro JavaScript Profiler viene rimosso da DevTools, ma puoi comunque abilitarlo temporaneamente tramite Impostazioni. Impostazioni > Esperimenti e aprila dal menu con tre puntini Menu con tre puntini..

Casella di controllo del profiler JavaScript in Impostazioni, poi Esperimenti.

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

Problema relativo a Chromium: 1428026.

Varie in evidenza

Di seguito sono riportate alcune importanti correzioni di 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 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.