調試

意外終止 (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 標準化機構和實現瀏覽器開發者工具的人。