Novità di DevTools (Chrome 114)

Sofia Emelianova
Sofia Emelianova

Supporto del debug di WebAssembly

DevTools attiva Impostazioni. Impostazioni > Esperimenti > Casella di controllo. Debug di WebAssembly: 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 > Origini.

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à, attiva Impostazioni. Impostazioni > Esperimenti > Casella di controllo. Evidenzia un nodo o un attributo in violazione nella struttura ad albero 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 da poterne identificare più facilmente 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 i tempi al passaggio del mouse in Rendimento > Tempi

Il metodo performance.mark() ora mostra i tempi quando passi il mouse sopra il simbolo corrispondente in Rendimento > Tempi. 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) nella scheda Rendimento > 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 Profilo JavaScript viene rimosso da DevTools, ma puoi comunque attivarlo temporaneamente tramite Impostazioni > Esperimenti Impostazioni. e aprirlo 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 di anteprima ti consentono di accedere alle ultime funzionalità di DevTools, di testare le API delle piattaforme web all'avanguardia e di 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 usando Altre opzioni   Altre   > 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome - Guida introduttiva

Chrome - Guida introduttiva

Guida introduttiva di Chrome

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 è stato annullato.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59