Debug C/C++ WebAssembly On Chrome

Test environment:

Ubuntu 22.04.2 LTS
Google Chrome
emcc 3.1.33
clang version 17.0.0
Target: wasm32-unknown-emscripten

Write a simple test program.

main.c:

#include <stdlib.h>

void assert_less(int x, int y) {
  if (x >= y) {
    abort();
  }
}

int main() {
  assert_less(10, 20);
  assert_less(30, 20);
}

Compile it with DWARF debug information included.

emcc -g main.c -o main.html

Download chrome (stable version):

https://www.google.com/chrome/

Install chrome on ubuntu.

sudo dpkg -i google-chrome-stable_current_amd64.deb

Set up a light http server for viewing it on chrome.

python3 -m http.server 4001

Then open the web page at http://0.0.0.0:4001/main.html

Go to Sources -> Breakpoints -> Pause on caught exceptions, check it.

Group source files.

Next, we can click on the location in the call stack to open the corresponding source file.