---
title: '調試'
---

## 意外終止 (Panics)

Yew 會自動在瀏覽器控制台中輸出意外終止日誌。

## 控制台日誌

在 JavaScript 中，`console.log()` 用於輸出到瀏覽器控制台。以下是一些 Yew 的選項。

### [`wasm-logger`](https://crates.io/crates/wasm-logger)

`wasm-logger` crate 與 [`log`](https://crates.io/crates/log) crate 集成，以將日誌等級、來源行和檔案名稱傳送到瀏覽器控制台。

```rust ,ignore
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`](https://crates.io/crates/gloo-console)

這個 crate 是 Gloo 的一部分，提供了對瀏覽器 API 的 Rust 包裝。 `log!` 巨集可以直接接受 `JsValue`，比 `wasm_logger` 更容易使用。

```rust ,ignore
use gloo_console::log;
use wasm_bindgen::JsValue;

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

### [`tracing-web`](https://crates.io/crates/tracing-web)

`tracing-web` 可以與 [`tracing-subscriber`](https://crates.io/crates/tracing-subscriber) 一起使用，將訊息輸出到瀏覽器控制台。

```rust ,ignore
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`](https://crates.io/crates/tracing) 可用於收集與組件生命週期相關的事件資訊。 `tracing` 還附帶一個 `log` 支援的特性標誌，可以與 `wasm-logger` 很好地整合。

[編譯時過濾器](https://docs.rs/tracing/latest/tracing/level_filters/index.html#compile-time-filters) 可以用於調整詳細程度或停用日誌記錄，這應該會導致更小的Wasm 檔案。

## 來源映射 (Source Maps)

有一些支援 [來源映射](https://developer.chrome.com/blog/wasm-debugging-2019/#enter-dwarf)。但是，需要一些配置。

## 過去的文章

以下是一些關於 Rust 中 WebAssembly 偵錯狀態的過去文章。它們可能是有趣的閱讀。

\[Dec 2019\] [Chrome DevTools 更新](https://developers.google.com/web/updates/2019/12/webassembly#the_future)

> 這些工作還有很多要做。例如，在工具方面，Emscripten（Binaryen）和 wasm-pack（wasm-bindgen）尚未支援在它們執行的轉換上更新 DWARF 資訊。

\[2020\] [Rust Wasm 偵錯指南](https://rustwasm.github.io/book/reference/debugging.html#using-a-debugger)

> 不幸的是，WebAssembly 的調試能力仍然不成熟。在大多數Unix 系統上，[DWARF](http://dwarfstd.org/) 用於編碼調試器需要提供運行中程序的源級檢查的信息，就連在Windows 上有一種編碼類似信息的替代格式。但目前，WebAssembly 並沒有對應的格式。

\[2019\] [Rust Wasm 路線圖](https://rustwasm.github.io/rfcs/007-2019-roadmap.html#debugging)

> 偵錯很棘手，因為很多情況不在這個工作小組的掌控之中，而是取決於 WebAssembly 標準化機構和實現瀏覽器開發者工具的人。
