Rust 🦀 と Wasm のチュートリアル（デバッグ編）

本記事は、筆者がRustとWasmを学ぶために以下のドキュメントを読み進めた過程を記すものです。今回はデバッグに関する章を進めていきます。
https://rustwasm.github.io/docs/book/game-of-life/debugging.htm

RustとWasmのデバッグに関する資料は以下のリンクにあります。
https://rustwasm.github.io/docs/book/reference/debugging.html

パニックが起こった時に、開発者コンソール画面にエラメッセージを表示させたいときは、utils::set_panick_hook()をnewコンストラクタに一行書き加えるだけです。

pub fn new() -> Universe {
    utils::set_panic_hook();

    // ...
}

それでは、console.log関数を使ってログを表示できるようにして行きましょう。
web-sysクレートを使うことでconsole.logが使えるようになります。

[dependencies]

# ...

[dependencies.web-sys]
version = "0.3"
features = [
  "console",
]

web-sysのconsole.log関数は分かりにくいので、マクロを使ってprintln!のように書けるようにします。

extern crate web_sys;

// A macro to provide `println!(..)`-style syntax for `console.log` logging.
macro_rules! log {
    ( $( $t:tt )* ) => {
        web_sys::console::log_1(&format!( $( $t )* ).into());
    }
}

各セルの状態、周囲で生存しているセルの数、次の状態を記録するには次のような式を書き加えます。

log!("cell[{}, {}] is initially {:?} and has {} live neighbors",
	row,
	col,
	cell,
	live_neighbors
);

log!("    it becomes {:?}", next_cell);

さらにブラウザのステッピングデバッガと組み合わせてみましょう。
以下の例ではrenderLoop関数の各反復で一時停止しています。

const renderLoop = () => {
  debugger;
  universe.tick();

  drawGrid();
  drawCells();

  requestAnimationFrame(renderLoop);
};