Wasmでのconsoleデバッグ方法
はじめに
- Wasmでのデバッグは，通常のJavaScriptと同様に
console.logを使うことができる - Wasmのコードから直接
console.logを呼び出すには，いくつかの設定が必要となる - ここでは，Rustで書いたWasmコードから
console.logを使う方法を紹介する
この記事で話すこと
- Wasmでの
console.logの使い方
この記事で話さないこと
- Wasmの基本的な使い方
セットアップ
-
console.logはweb-sysクレートを使うことで利用可能となる -
web-sysはWasmでWeb APIを使うためのクレートで，console.logもその一部として提供されている
クレートの追加
Cargo.toml
[dependencies.web-sys]
version = "0.3.77"
features = [
"console",
]
使用例
src/lib.rs
mod types;
use types::GreetResponse;
use wasm_bindgen::prelude::*;
use web_sys::console::log_1;
#[wasm_bindgen]
pub fn greet(name: Option<String>) -> GreetResponse {
log_1(&format!("greet called with name: {:?}", name).into());
GreetResponse {
value: "Hello, World!".to_string(),
name,
}
}
src/App.tsx
const res = greet('test')
-
log_1関数を使って，コンソールにメッセージを出力する-
log_1は1つの引数を取る関数で，log_2やlog_3なども存在する
-
-
format!マクロを使って，文字列をフォーマットし，into()メソッドでJsValueに変換して渡す
まとめ
- Wasmでの
console.logはweb-sysクレートを使うことで簡単に利用できる -
log_1関数を使って，コンソールにメッセージを出力することができる
Discussion