4 ms·

And how to debug a running game from a browser? Or you can only debug native builds?

4pkjai 3y ago
I think you can easily log out to the browser console. I believe hooking up a debugger to your IDE is also possible. I haven’t tried it yet though: https://emscripten.org/docs/porting/Debugging.html https://emscripten.org/docs/porting/Debugging.html? Maybe I’ll give it a go and write about it in my next post.
- shortrounddev2 3y ago
  Chrome has experimental support for debugging symbols in was but I've never gotten them to work. Personally I'm not going to bother with working on a project unless I can easily pit breakpoints in the original source
  - flohofwoe 3y ago
    Check out this new-ish extension for VSCode: https://marketplace.visualstudio.com/items?itemName=ms-vscode.wasm-dwarf-debugging https://marketplace.visualstudio.com/items?itemName=ms-vscod... ...IME this is a lot easier to setup than the Chrome extension (the problem in Chrome that's easy to overlook is to allow Chrome access to your source code directory, the VSCode extension doesn't require such brittle details). The blog post I posted in a sibling comment above details how to setup VSCode so that debugging works by just pressing F5 in VSCode like it would work for natively compiled code.
flohofwoe 3y ago
I actually wrote a blog post about this just recently: https://floooh.github.io/2023/11/11/emscripten-ide.html https://floooh.github.io/2023/11/11/emscripten-ide.html TL;DR: there's a new WASM DWARF debugging extension for VSCode which allows a 'traditional' debugging experience for WASM code running either in Node.js or Chrome.
speps 3y ago
You can debug the original code by providing a map file (compiler generated) that allows you to let the WebAssembly runtime know how to map WASM bytecode to the source code. It works really well.
- flohofwoe 3y ago
  The old source-maps-approach never worked all too well. Emscripten can generate DWARF debug info for a while now, and there are extensions for Chrome and VSCode which make use of this DWARF debug information and allow for a much better debugging experience. E.g. see here: https://developer.chrome.com/blog/wasm-debugging-2020 https://developer.chrome.com/blog/wasm-debugging-2020 ...and here...: https://marketplace.visualstudio.com/items?itemName=ms-vscode.wasm-dwarf-debugging https://marketplace.visualstudio.com/items?itemName=ms-vscod...

I think you can easily log out to the browser console. I believe hooking up a debugger to your IDE is also possible. I haven’t tried it yet though: https://emscripten.org/docs/porting/Debugging.html https://emscripten.org/docs/porting/Debugging.html? Maybe I’ll give it a go and write about it in my next post.

shortrounddev2 3y ago
Chrome has experimental support for debugging symbols in was but I've never gotten them to work. Personally I'm not going to bother with working on a project unless I can easily pit breakpoints in the original source
- flohofwoe 3y ago
  Check out this new-ish extension for VSCode: https://marketplace.visualstudio.com/items?itemName=ms-vscode.wasm-dwarf-debugging https://marketplace.visualstudio.com/items?itemName=ms-vscod... ...IME this is a lot easier to setup than the Chrome extension (the problem in Chrome that's easy to overlook is to allow Chrome access to your source code directory, the VSCode extension doesn't require such brittle details). The blog post I posted in a sibling comment above details how to setup VSCode so that debugging works by just pressing F5 in VSCode like it would work for natively compiled code.

flohofwoe 3y ago

I actually wrote a blog post about this just recently: https://floooh.github.io/2023/11/11/emscripten-ide.html https://floooh.github.io/2023/11/11/emscripten-ide.html TL;DR: there's a new WASM DWARF debugging extension for VSCode which allows a 'traditional' debugging experience for WASM code running either in Node.js or Chrome.

speps 3y ago

You can debug the original code by providing a map file (compiler generated) that allows you to let the WebAssembly runtime know how to map WASM bytecode to the source code. It works really well.

flohofwoe 3y ago
The old source-maps-approach never worked all too well. Emscripten can generate DWARF debug info for a while now, and there are extensions for Chrome and VSCode which make use of this DWARF debug information and allow for a much better debugging experience. E.g. see here: https://developer.chrome.com/blog/wasm-debugging-2020 https://developer.chrome.com/blog/wasm-debugging-2020 ...and here...: https://marketplace.visualstudio.com/items?itemName=ms-vscode.wasm-dwarf-debugging https://marketplace.visualstudio.com/items?itemName=ms-vscod...