How to go about debugging WebAssembly running in the browser?

[mmarczell-graphisoft]

Currently the only way to debug C++ code that is running inside the browser compiled to WASM is a closed source Chrome extension by Google. This is quite limited and buggy. (Sometimes it doesn't even work, most of the time stepping doesn't work, standard library types are not all inspectable etc.)

My team is thinking about how this situation could be improved. I'm looking for feedback on whether our line of thinking is correct.

Our idea is that a VSCode extension could be written that integrates with the existing browser debugging experience in VSCode, but also interprets the DWARF debugging information contained within the WASM file and enables breaking, stepping and inspecting variables in C++ source files. (I recall that if we switch out the buildtime DWARF generation for sourcemap generation, this already works, except for inspecting values, which makes it quite useless for serious work.)

What I'm not certain about is where the boundaries of responsibility lie between VSCode itself, the browser being debugged, the existing C++ extension and a theoretical new "Wasm debugger" extension. Is it possible for an extension to do all the above? Do the required points of extensibility exist within the browser debugging flow and the debugger itself? (It would be rather less convenient if we had to fork VSCode itself to achieve this.)

[connor4312]

Duplicates microsoft/vscode-js-debug#1205

[mmarczell-graphisoft]

Thank you for pointing me there :)