调试

Panic

Yew 会自动在浏览器控制台中记录 Panic。

控制台日志记录

在 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

此箱是 Gloo 的一部分，Gloo 是一个库集合，为浏览器 API 提供符合人体工程学的 Rust 包装器。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 标准化机构和实现浏览器开发工具的人员。