mirror of
https://github.com/yewstack/yew.git
synced 2025-12-08 21:26:25 +00:00
812c65c54c
* Improve debugging page in docs - add gloo console logging as an option - moved subsubheading "Latest Info" under "Source Maps" to a subheading "Past Articles", which makes more sense for the content - updated examples for `wasm-logger` and also made an equivalent one for `gloo-console` I removed a lot of text to make it easier to read and improve clarity. I did look it over but there may be other info you'd like to keep on the page. I wanted to add more for `panics` but I wasn't sure what to put. * Run Prettier * Mention tracing-web under console logging The source map support is also changed but will require more explanation.
101 lines
3.8 KiB
Plaintext
101 lines
3.8 KiB
Plaintext
---
|
||
title: 'Debugging'
|
||
---
|
||
|
||
## Panics
|
||
|
||
Yew automatically logs panics in the browser console.
|
||
|
||
## Console Logging
|
||
|
||
In JavaScript, `console.log()` is used to log to the browser console. Some options for Yew are listed below.
|
||
|
||
### [`wasm-logger`](https://crates.io/crates/wasm-logger)
|
||
|
||
`wasm-logger` crate integrates with [`log`](https://crates.io/crates/log) crate to send the log level, source line and filename to the browser console.
|
||
|
||
```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)
|
||
|
||
This crate is part of Gloo, a collection of libraries providing ergonomic Rust wrappers for browser APIs.
|
||
The `log!` macro can take a `JsValue` directly which is slightly easier to use than `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` can be used with [`tracing-subscriber`](https://crates.io/crates/tracing-subscriber to output messages to the browser console.
|
||
|
||
```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());
|
||
}
|
||
```
|
||
|
||
## Debugging component lifecycles
|
||
|
||
[`tracing`](https://crates.io/crates/tracing) can be used to collect event information related to a component's lifecycle. `tracing` also comes with a feature flag for `log` support, which integrates nicely with `wasm-logger`.
|
||
|
||
[Compile time filters](https://docs.rs/tracing/latest/tracing/level_filters/index.html#compile-time-filters) can be used to adjust verbosity or disable logging, which should result in a smaller Wasm file.
|
||
|
||
## Source Maps
|
||
|
||
There is [some support](https://developer.chrome.com/blog/wasm-debugging-2019/#enter-dwarf) for source maps.
|
||
However, some configuration is required.
|
||
|
||
## Past Articles
|
||
|
||
Some past articles on the state of debugging in WebAssembly in Rust can be found below. They may serve as interesting reads.
|
||
|
||
\[Dec 2019\] [Chrome DevTools update](https://developers.google.com/web/updates/2019/12/webassembly#the_future)
|
||
|
||
> There is still quite a bit of work to do though. For example, on the tooling side, Emscripten \(Binaryen\) and wasm-pack \(wasm-bindgen\) don’t support updating DWARF information on transformations they perform yet.
|
||
|
||
\[2020\] [Rust Wasm debugging guide](https://rustwasm.github.io/book/reference/debugging.html#using-a-debugger)
|
||
|
||
> Unfortunately, the debugging story for WebAssembly is still immature. On most Unix systems, [DWARF](http://dwarfstd.org/) is used to encode the information that a debugger needs to provide source-level inspection of a running program. There is an alternative format that encodes similar information on Windows. Currently, there is no equivalent for WebAssembly.
|
||
|
||
\[2019\] [Rust Wasm roadmap](https://rustwasm.github.io/rfcs/007-2019-roadmap.html#debugging)
|
||
|
||
> Debugging is tricky because much of the story is out of this working group's hands, and depends on both the WebAssembly standardization bodies and the folks implementing browser developer tools instead.
|