Using console.log - The `wasm-bindgen` Guide

# `console.log`

View full source code or view the compiled example online

This example shows off how to use `console.log` in a variety of ways, all the way from bare-bones usage to a `println!`-like macro with `web_sys`.

## `src/lib.rs`

    #![allow(unused)]
    fn main() {
    use wasm_bindgen::prelude::*;

    #[wasm_bindgen(start)]
    fn run() {
        bare_bones();
        using_a_macro();
        using_web_sys();
    }

    // First up let's take a look of binding `console.log` manually, without the
    // help of `web_sys`. Here we're writing the `#[wasm_bindgen]` annotations
    // manually ourselves, and the correctness of our program relies on the
    // correctness of these annotations!

    #[wasm_bindgen]
    extern "C" {
        // Use `js_namespace` here to bind `console.log(..)` instead of just
        // `log(..)`
        #[wasm_bindgen(js_namespace = console)]
        fn log(s: &str);

        // The `console.log` is quite polymorphic, so we can bind it with multiple
        // signatures. Note that we need to use `js_name` to ensure we always call
        // `log` in JS.
        #[wasm_bindgen(js_namespace = console, js_name = log)]
        fn log_u32(a: u32);

        // Multiple arguments too!
        #[wasm_bindgen(js_namespace = console, js_name = log)]
        fn log_many(a: &str, b: &str);
    }

    fn bare_bones() {
        log("Hello from Rust!");
        log_u32(42);
        log_many("Logging", "many values!");
    }

    // Next let's define a macro that's like `println!`, only it works for
    // `console.log`. Note that `println!` doesn't actually work on the Wasm target
    // because the standard library currently just eats all output. To get
    // `println!`-like behavior in your app you'll likely want a macro like this.

    macro_rules! console_log {
        // Note that this is using the `log` function imported above during
        // `bare_bones`
        ($($t:tt)*) => (log(&format_args!($($t)*).to_string()))
    }

    fn using_a_macro() {
        console_log!("Hello {}!", "world");
        console_log!("Let's print some numbers...");
        console_log!("1 + 3 = {}", 1 + 3);
    }

    // And finally, we don't even have to define the `log` function ourselves! The
    // `web_sys` crate already has it defined for us.

    fn using_web_sys() {
        use web_sys::console;

        console::log_1(&"Hello using web-sys".into());

        let js: JsValue = 4.into();
        console::log_2(&"Logging arbitrary values looks like".into(), &js);
    }
    }