デバッグ

パニック

Yewはブラウザのコンソールにパニックを自動的に記録します。

コンソールロギング

JavaScriptでは、 `console.log()` を使用してブラウザコンソールにログを記録します。Yewのいくつかのオプションを以下に示します。

`wasm-logger`

`wasm-logger` クレートは、`log` クレートと統合して、ログレベル、ソース行、およびファイル名をブラウザコンソールに送信します。

use log::info;
use wasm_bindgen::JsValue;

fn main() {
    wasm_logger::init(wasm_logger::Config::default());

    let object = JsValue::from("world");
    info!("Hello {}", object.as_string().unwrap());
}

`gloo-console`

このクレートは、ブラウザAPIの人間工学に基づいたRustラッパーを提供するライブラリのコレクションであるGlooの一部です。 `log!` マクロは `JsValue` を直接取ることができます。これは `wasm_logger` よりもわずかに使いやすくなっています。

use gloo_console::log;
use wasm_bindgen::JsValue;

fn main() {
    let object = JsValue::from("world");
    log!("Hello", object)
}

`tracing-web`

`tracing-web` は、`tracing-subscriber` と共に使用して、ブラウザコンソールにメッセージを出力できます。

use tracing_subscriber::{
    fmt::{
        format::{FmtSpan, Pretty},
        time::UtcTime,
    },
    prelude::*,
};
use wasm_bindgen::JsValue;

fn main() {
    let fmt_layer = tracing_subscriber::fmt::layer()
        .with_ansi(false)
        .with_timer(UtcTime::rfc_3339())
        .with_writer(tracing_web::MakeConsoleWriter)
        .with_span_events(FmtSpan::ACTIVE);
    let perf_layer = tracing_web::performance_layer().with_details_from_fields(Pretty::default());

    tracing_subscriber::registry()
        .with(fmt_layer)
        .with(perf_layer)
        .init();
    let object = JsValue::from("world");
    tracing::info!("Hello {}", object.as_string().unwrap());
}

コンポーネントライフサイクルのデバッグ

`tracing` を使用して、コンポーネントのライフサイクルに関連するイベント情報を収集できます。 `tracing` には、 `log` サポートの機能フラグも付属しており、 `wasm-logger` とうまく統合されます。

コンパイル時フィルター を使用して、冗長性を調整したり、ロギングを無効にしたりできます。これにより、Wasmファイルのサイズが小さくなるはずです。

ソースマップ

ソースマップにはある程度のサポート があります。ただし、いくつかの構成が必要です。

過去の記事

RustでのWebAssemblyのデバッグの状態に関する過去の記事を以下に示します。興味深い読み物となるかもしれません。

[2019年12月] Chrome DevToolsのアップデート

ただし、まだやるべきことがかなりあります。たとえば、ツーリング側では、Emscripten（Binaryen）とwasm-pack（wasm-bindgen）は、実行する変換でDWARF情報を更新することをまだサポートしていません。

[2020] Rust Wasmデバッグガイド

残念ながら、WebAssemblyのデバッグはまだ未成熟です。ほとんどのUnixシステムでは、DWARF を使用して、デバッガーが実行中のプログラムのソースレベルの検査を提供するために必要な情報をエンコードします。Windowsで同様の情報をエンコードする代替フォーマットがあります。現在、WebAssemblyには同等のものはありません。

[2019] Rust Wasmロードマップ

デバッグは、このワーキンググループの手に負えないことが多く、WebAssembly標準化団体とブラウザ開発者ツールを実装している人々の両方に依存しているため、難しいです。