Sfondo
Fino a poco tempo fa, era possibile visualizzare l'unico debug di WebAssembly supportato da Chrome DevTools analisi dello stack WebAssembly non elaborate e l'esecuzione dei passaggi delle singole istruzioni in un formato di testo WebAssembly disassemblato.
Sebbene questa operazione funzioni con qualsiasi modulo WebAssembly e aiuti in qualche modo a eseguire il debug di piccole funzioni isolate, non è molto pratica per le app più grandi in cui la mappatura tra il codice disassemblato e le tue origini è meno ovvia.
Una soluzione alternativa temporanea
Per aggirare il problema, Emscripten e DevTools hanno adattato temporaneamente lo spazio mappe di origine in WebAssembly. Mappature consentite tra gli offset binari nel modulo compilato e le posizioni originali nei file sorgente.
Tuttavia, le mappe di origine sono state progettate per formati di testo con mappature chiare a concetti e valori JavaScript, non per formati binari come WebAssembly con linguaggi di origine arbitrari, sistemi di tipi e una memoria lineare. Ciò ha reso l'integrazione complessa, limitata e non ampiamente supportata al di fuori di Emscripten.
Entra in DWARF
Al contrario, molte lingue native hanno già un formato di debug comune, DWARF, che fornisce tutte le informazioni necessarie ai debugger per risolvere posizioni, nomi delle variabili, layout dei tipi e altro ancora.
Sebbene ci siano ancora alcune funzionalità specifiche di WebAssembly che devono essere aggiunte per la piena compatibilità, compilatori come Clang e Rust supportano già l'emissione di informazioni DWARF nei moduli WebAssembly, il che ha consentito al team DevTools di iniziare a utilizzarlo direttamente in DevTools.
Come primo passaggio, DevTools ora supporta la mappatura di origine nativa utilizzando queste informazioni, in modo da poter iniziare a eseguire il debug dei moduli Wasm prodotti da uno di questi compilatori senza ricorrere al formato disassemblato o dover utilizzare script personalizzati.
È sufficiente indicare al compilatore di includere le informazioni di debug come faresti normalmente su altre piattaforme. Ad esempio, in Clang ed Emscripten questa operazione può essere eseguita 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
In alternativa, se utilizzi Cargo, le informazioni di debug saranno incluse per impostazione predefinita:
cargo build --target wasm32-unknown-unknown
Questa nuova integrazione di DevTools con DWARF supporta già il passaggio dal codice, l'impostazione dei punti di interruzione e la risoluzione delle analisi dello stack nelle lingue di origine.
Il futuro
C'è ancora molto lavoro da fare, però.
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, l'integrazione non è disponibile.
Per quanto riguarda Chrome DevTools, continueremo a migliorare l'integrazione nel tempo per garantire un'esperienza di debug senza interruzioni, che include:
- Risoluzione dei nomi delle variabili
- Tipi di stampa avvincenti
- Valutazione delle espressioni nelle lingue di origine
- ...e molto altro ancora.
Non perderti i prossimi aggiornamenti!
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 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
> 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.