As I mentioned earlier, we will need to compile our app to support source maps that we can use for in-browser debugging in Firefox and Chrome. Currently, the only browsers that support in-browser debugging are Firefox, Chrome, and Safari. I will only be covering Firefox and Chrome in this book. You can compile the debug.cpp file for use with the WebAssembly debugger using the following emcc command:
emcc -g4 debug.cpp -o debug.html --source-map-base http://localhost:8080/ --preload-file sprites -s USE_SDL=2 -s USE_SDL_IMAGE=2 -s SDL2_IMAGE_FORMATS=["png"] -s MAIN_MODULE=1 -s WASM=1
The first new flag is -g4, which instructs the compiler to have the highest amount of debugging data and create source map files for our WebAssembly. After that comes the --source-map-base http://localhost:8080/ flag, which tells the compiler to add the sourceMappingURL$http://localhost:8080/debug.wasm.map string to the end of the debug.wasm file. This allows the browser to find the source map file that is associated with the debug.wasm file. The last two new flags are -s MAIN_MODULE=1 and -s WASM=1. I'm not sure why either of these flags are required to make the source mapping work. Both of these flags are explicitly telling the compiler to run the default behavior. However, at the time of writing, if you don't include these flags, browser debugging will not work. This feels like a bug to me, so it is possible that by the time you are reading this, emcc will not require those final two flags. Compiling with the preceding command will allow you to test using the WebAssembly debugger on Chrome and Firefox. If you really want to debug on Opera, Edge, or some other debugger that doesn't support WebAssembly debugging yet, you do have an alternative.