WebAssembly is referred to as the modern binary format for the web. It is an open standard to develop applications running in the browser, allowing more than 40 programming languages, including C and C++, Python, Go, Java, Rust, and PHP.

“Most importantly, these programs can run near-native speeds in the browser.”

Debugging WebAssembly

Until recently, Chrome DevTools had limited support for WebAssemby debugging. We could only analyze individual instructions in a disassembled WebAssembly text formats and viewing raw stack traces.

This approach works fine with WebAssembly modules, which have isolated functions that have a small debugging scope. However, it was not suitable for complex applications where the mapping between the source code and the disassembled WebAssembly code was not that obvious.

As a solution, Emscripten and DevTools have temporarily adopted the existing source maps format to WebAssembly.

A source map is a way of mapping a combined/minified file back to an unbuilt state. When using source maps, client-side code will be readable and, more importantly, debuggable, even without impacting performance.

This allowed mappings between binary offsets in the compiled module to original locations in source files.

Emscripten

Emscripten is a compiler toolchain to WebAssembly, with a special focus on speed, size, and the Web platform.

One of the main advantages of debugging cross-platform Emscripten code is that we can debug the code using either the native platform or the Chrome DevTool debugger and profiler.

Functionalities

• Emits debug logs using Debug mode and stores intermediate build files for analysis.
• Enable runtime checking of memory accesses and common allocation errors.
• Auto Debugger can instrument low-level virtual machine code.

However, source maps were designed targeting textual programming languages like JavaScript, where binary formats like WebAssembly find their limits.

Emscripten also adopted source maps, which leads to less integration-friendly, hacky, and less supportive outside Emscripten.

DWARF

DWARF is a debugging file format used by many compilers — Source

There is a Devtool Plugin supporting DWARF which you can install using the Google Chrome Webstore.

It supports debugging C/C++ WebAssembly applications using DWARF debug information. This extension serves as an adapter between a WebAssembly app running in the browser and Chrome DevTools. It enables developers to debug C++ applications that are exported to WebAssembly in Chrome DevTools 88+ directly.

Furthermore, DWARF provides necessary data for debuggers to resolve type layouts, variable names, locations, and many more.

Recently Chrome DevTools also added a feature supporting native source mapping using DWARF information.

New Features added for DWARF in Chrome DevTools.

• Compilers like Rust and Clang already support emitting DWARF information in WebAssembly modules. This leads the Google dev team to use DWARF directly in their DevTools.
• Also, support of the native source mapping is available in DevTools, so developers can debug Wasm modules produced by any Rust or Clang based compilers without using any custom scripts.
• Developers can observe the code when debugging, resolve stack traces, and set breakpoints un source code by using new DevTools integration with DWARF.

However, there are still some WebAssembly-specific features that need to be added for full compatibility.