CODEWITHSUNDEEP
node.jsdebuggingwebassembly
dim
dim

Reputation: 660

Debugging WebAssembly with node

Is is possible to debug a wasm module through node?

I am using vscode and compiling with emcc -g4 --source-map-base. Putting a breakpoint in the C source file is ineffective. Trying to debug with node inspector node --inspect through Chrome doesn't allow me to use breakpoints either, although it is possible to debug wasm modules from regular web pages in Chrome.

I am using nodejs v10.13.

Upvotes: 4

Views: 2105

Answers (2)

dim
dim

Reputation: 660

So, I managed to get something working. I installed:

  • Node v11.4
  • Chrome beta 71 (because of this)

And launched the node process with node --inspect, for attaching the Chrome DevTools.

Moreover, in my code, instead of doing WebAssembly.instantiate in one shot (supplying directly the bitcode), I do it in two steps: WebAssembly.compile first, and then WebAssembly.instantiate. As soon as compile gets executed, there are some "wasm" sources being made available in the DevTools. This is the WebAssembly in wast text form, in which breakpoints can be set before it gets executed by instantiate.

But you can't debug from the original C-source files, Chrome DevTools only shows the decompiled wast yet. This feels like the stone age of debugging, but it is still possible to debug.

Edit 2020: This article https://developers.google.com/web/updates/2019/12/webassembly seems to indicate you should now be able to debug in devtools, from the original C source files. I did not try it, though.

Upvotes: 2

Bumsik Kim
Bumsik Kim

Reputation: 6633

enter image description here

WebAssembly Source Maps is supported by both Firefox Developer Edition (in screenshot) and Chrome 71.

What you forgot is, to include a path to the source map. For example:

emcc -g4 --source-map-base http://localhost:8000/

Every source files path is prefixed with http://localhost:8000/ with this option. So replace this with your source directory.

Upvotes: 3

Related Questions