除錯

驚恐

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 的一部分，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 標準制定單位，也取決於實作瀏覽器開發工具的人員。