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

wasm-logger crate integrates with log crate to send the log level, source line and filename to the browser console.

  1. use log::info;
  2. use wasm_bindgen::JsValue;
  4. fn main() {
  5.     wasm_logger::init(wasm_logger::Config::default());
  7.     let object = JsValue::from("world");
  8.     info!("Hello {}", object.as_string().unwrap());
  9. }

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.

  1. use gloo_console::log;
  2. use wasm_bindgen::JsValue;
  4. fn main() {
  5.     let object = JsValue::from("world");
  6.     log!("Hello", object)
  7. }

tracing-web

tracing-web can be used with tracing-subscriber to output messages to the browser console.

  1. use tracing_subscriber::{
  2.     fmt::{
  3.         format::{FmtSpan, Pretty},
  4.         time::UtcTime,
  5.     },
  6.     prelude::*,
  7. };
  8. use wasm_bindgen::JsValue;
  10. fn main() {
  11.     let fmt_layer = tracing_subscriber::fmt::layer()
  12.         .with_ansi(false)
  13.         .with_timer(UtcTime::rfc_3339())
  14.         .with_writer(tracing_web::MakeConsoleWriter)
  15.         .with_span_events(FmtSpan::ACTIVE);
  16.     let perf_layer = tracing_web::performance_layer().with_details_from_fields(Pretty::default());
  18.     tracing_subscriber::registry()
  19.         .with(fmt_layer)
  20.         .with(perf_layer)
  21.         .init();
  22.     let object = JsValue::from("world");
  23.     tracing::info!("Hello {}", object.as_string().unwrap());
  24. }

Debugging component lifecycles

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 can be used to adjust verbosity or disable logging, which should result in a smaller Wasm file.

Source Maps

There is some support 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

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

Unfortunately, the debugging story for WebAssembly is still immature. On most Unix systems, DWARF 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

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.