Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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!  
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)
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. 
                @MauroBringolf What I mean is that if we really want to dive into debugger WASM code, we can at least set breakpoint, step into, over, out.. and look at the stack and locals, at least in Chrome, so it is kind of nice in this way. However, I believe it's still difficult to make sence of WASM in general, so I suggest if the WASM was compiled from other high level languages, then I guess it's easier to find "logical error" in the high level language.
– Yuhao Tiger Huang
                Apr 19, 2018 at 20:18
For those coming across this question in 2020: it is now possible to debug WebAssembly in Chrome DevTools by compiling code with emcc -g (equivalent of emcc -g3).
More information can be found in the official announcement: https://developers.google.com/web/updates/2020/12/webassembly
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.