Wasm Debugging Demo

• build with debugging features:

wasm-pack build --dev --features dev 

• run the web application in `:

cd www && npm run start

Wasm Debugging Tools

Enable debug info

• Include debug symbols (function names, variable names) in the compiled WASM so that stack traces and wasm are more readable
• Disable on release builds to reduce code size

# usage: wasm-pack build --dev
[profile.dev]  
debug = true  

console_error_panic_hook

• causes panics to log with console.error
• Add the hook to cargo.toml but disable it for release builds because it increases code size

# usage: wasm-pack build --features dev
[features]  
dev = ["console_error_panic_hook"]

console_error_panic_hook = { version = "0.1.7", optional = true }

• enable it within a function at the start of the rust execution, any subsequent panics will be logged

#[cfg(feature = "console_error_panic_hook")]  
console_error_panic_hook::set_once();

Enable DWARF Debugging

• Enable DWARF debug output in dev builds
• Sets dwarf-debug-info configuration for wasm-bindgen (not exposed by higher level wasm-pack crate)
• Dwarf enabled debuggers will be able to step through the rust sources
• Install an experimental DWARF debugger on chrome here: https://chromewebstore.google.com/detail/cc++-devtools-support-dwa/pdcpmagijalfljmkmjngeonclgbbannb
  • If configured correctly, Rust code will show up under sources in the chrome debugger

# usage: wasm-pack build --dev
[package.metadata.wasm-pack.profile.dev.wasm-bindgen]  
dwarf-debug-info = true

Inspecting Wasm Binaries

wasm2wat/wat2wasm

• Converts .wasm binary into a human-readable WebAssembly Text Format (WAT)
• Edit the .wat file and then recompile to .wasm

wasm2wat pkg/project.wasm -o project.wat
wat2wasm project.wat -o new_project.wasm

Logging in Wasm

Logging via web-sys

• exposes bindings to all browser web APIs
• include web-sys in cargo.toml

web-sys = { version = "0.3.77", features = ["console"] }

• usage from Rust:

pub fn log(message: &str) {
    web_sys::console::log_1(&message.into());
}

Logging via wasm_bindgen

• Use wasm_bindgen to generate bindings to external functions yourself

#[wasm_bindgen]
extern "C" {
    fn alert(s: &str);

    // binds external JS console.log function to rust function  
    #[wasm_bindgen(js_namespace = console)]
    pub fn log(s: &str);
}