How can i debug wasm at chrome?

Question

I'd like to debug wasm code at chrome.

I checked the guide build with '-g4' option. I did it and it shows wasm-0000~ and binary code like below...

  func $stackAlloc (param i32) (result i32)
  (local i32)
   get_global 7
   ....

Is there need more option or What am i doing wrong?

Thanks in advance!

Answer 1

It seems in Chrome 70 this is still not possible. Though, as of Firefox 60 you can step though the source code when compiled with debug information retained and source maps enabled.

Compile with debug information retained and source map information on the base URL:

emcc -g4 --source-map-base http://host:port/base-path-to-source-maps-and-sources/ ...

Now copy the source file and along with the generated .wasm.map to the target directory pointed to by the --source-map-base option. You shall now be able to debug the source too.

Directory layout:

$ tree # in the served directory
.
├── hellowasm.c
├── hellowasm.js
├── hellowasm.wasm
├── hellowasm.wasm.map
├── hellowasm.wast
├── index.html
└── main.js

Voilà!

You can find details here: https://web.archive.org/web/20190301201137/http://webassemblycode.com/using-browsers-debug-webassembly/ (Archived content, the original domain no longer exists)

Answer 2

You didn't do anything wrong, wasm is actually in binary format and your browser shows you a textual representation of the wasm binary format. See more at mozilla This is the best browser can do, you can set breakpoint or so, as if it js a javascirpt in your browser's developer tool.

However, it is easier to debug in the original language c/c++/rust... make sure things work first then compile it to wasm.