Contesto
Fino a poco tempo fa, l'unico debug WebAssembly supportato da Chrome DevTools era la visualizzazione delle analisi dello stack WebAssembly non elaborate e l'esecuzione di singole istruzioni in un formato di testo WebAssembly disassemblato.
Anche se funziona con qualsiasi modulo WebAssembly e aiuta in qualche modo a eseguire il debug di funzioni piccole e isolate, non è molto pratico per le app più grandi, dove la mappatura tra il codice disassemblato e le tue origini è meno ovvia.
Una soluzione alternativa temporanea
Per risolvere questo problema, Emscripten e DevTools hanno temporaneamente adattato il formato esistente delle mappe di origine a WebAssembly. Ciò consentiva mappature tra gli offset binari nel modulo compilato alle posizioni originali nei file di origine.
Tuttavia, le mappe di origine sono state progettate per formati di testo con una chiara mappatura a concetti e valori JavaScript, non per formati binari come WebAssembly con linguaggi di origine arbitrari, sistemi di caratteri e una memoria lineare. Di conseguenza, l'integrazione era complessa, limitata e non ampiamente supportata al di fuori di Emscripten.
Inserisci DWARF
Molte lingue native dispongono già di un formato di debug comune, DWARF, che fornisce tutte le informazioni necessarie ai debugger per risolvere posizioni, nomi di variabili, layout dei tipi e altro ancora.
Anche se ci sono ancora alcune funzionalità specifiche di WebAssembly che devono essere aggiunte per una piena compatibilità, i compilatori come Clang e Rust supportano già l'emissione di informazioni DWARF nei moduli WebAssembly, consentendo al team DevTools di iniziare a utilizzarla direttamente in DevTools.
Come primo passaggio, DevTools ora supporta la mappatura delle origini native utilizzando queste informazioni, quindi puoi iniziare a eseguire il debug dei moduli Wasm prodotti da uno di questi compilatori senza ricorrere al formato disassemblato o dover utilizzare script personalizzati.
Devi solo indicare al compilatore di includere le informazioni di debug come faresti normalmente su altre piattaforme. Ad esempio, in Clang ed Emscripten puoi farlo passando un flag -g durante la compilazione:
clang -g …sources… -target wasm32 -o out.wasm
emcc -g …sources… -o out.js
Puoi usare lo stesso flag -g in Rust:
rustc -g source.rs --target wasm32-unknown-unknown -o out.wasm
Se invece utilizzi Cargo, per impostazione predefinita saranno incluse le informazioni di debug:
cargo build --target wasm32-unknown-unknown
Questa nuova integrazione DevTools con DWARF riguarda già il supporto per il passaggio al codice, l'impostazione dei punti di interruzione e la risoluzione delle analisi dello stack nei linguaggi di origine.
Il futuro
C'è ancora un po' di lavoro da fare.
Ad esempio, per quanto riguarda gli strumenti, Emscripten (Binaryen) e wasm-pack (wasm-bindgen) non supportano ancora l'aggiornamento delle informazioni DWARF sulle trasformazioni che eseguono. Per il momento, non beneficeranno di questa integrazione.
Per quanto riguarda Chrome DevTools, abbiamo in programma di migliorare l'integrazione nel corso del tempo per garantire un'esperienza di debug senza interruzioni, ad esempio:
- Risoluzione dei nomi delle variabili
- Tipi di stampe
- Valutazione delle espressioni nei linguaggi di origine
- ...e molto altro ancora!
Non perderti i prossimi aggiornamenti!
Scarica 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à di DevTools più recenti, di testare le API per piattaforme web all'avanguardia e di individuare eventuali problemi sul tuo sito prima che lo facciano gli utenti.
Contattare il team di Chrome DevTools
Utilizza le opzioni seguenti per discutere delle nuove funzionalità e delle modifiche nel post o di qualsiasi altra cosa relativa a DevTools.
- Inviaci un suggerimento o un feedback tramite crbug.com.
- Segnala un problema DevTools utilizzando Altre opzioni
> Guida > Segnala i problemi di DevTools in DevTools. - Tweet all'indirizzo @ChromeDevTools.
- Lascia commenti sui video di YouTube o sui suggerimenti di DevTools in DevTools Video di YouTube.