调试

意外终止 (Panics)

Yew 会自动在浏览器控制台中输出意外终止日志。

控制台日志

在 JavaScript 中，console.log() 用于输出到浏览器控制台。以下是一些 Yew 的选项。

wasm-logger

wasm-logger crate 与 log crate 集成，以将日志级别、源行和文件名发送到浏览器控制台。

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

这个 crate 是 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 文件。

源映射 (Source Maps)

有一些支持 源映射。但是，需要一些配置。

过去的文章

以下是一些关于 Rust 中 WebAssembly 调试状态的过去文章。它们可能是有趣的阅读。

[Dec 2019] Chrome DevTools 更新

这些工作还有很多要做。例如，在工具方面，Emscripten（Binaryen）和 wasm-pack（wasm-bindgen）尚未支持在它们执行的转换上更新 DWARF 信息。

[2020] Rust Wasm 调试指南

不幸的是，WebAssembly 的调试能力仍然不成熟。在大多数 Unix 系统上，DWARF 用于编码调试器需要提供运行中程序的源级检查的信息，就连在 Windows 上有一种编码类似信息的替代格式。但目前，WebAssembly 没有相应的格式。

[2019] Rust Wasm 路线图

调试很棘手，因为很多情况不在这个工作组的掌控之中，而是取决于 WebAssembly 标准化机构和实现浏览器开发者工具的人。