[WASM + Rust] Debug a WebAssembly Module Written in Rust using console.log

Having some kind of debugging tool in our belt is extremely useful before writing a lot of code. In this lesson we build a println!()-style syntax using JavaScript’s console.log to be able to log out values in Rust.

 

n JavaScript, the console log function is the way to log messages to the browser's developer tool console. Using Rust wasm_bindgen , we can import a reference to it.

 

extern "C" {
    ...
    #[wasm_bindgen(js_namespace = console)]
    fn log(msg: &str);
}

 

Using the Rust macro, we can provide a inaudible style syntax for console log, logging from Rust.

#[wasm_bindgen]
pub fn run() {
    let val = document.createElement("p");
    log!("The {} is {}", "meaning of life", 42);
    val.set_inner_html("Hello from Rust!!!!!!");
    document.body().append_child(val);
}

 

Reload the server, then in the broswer console, we can see the console.log message from Rust.