Debugging emscripten C++ code in Chrome

[Gregory Propf]

Hello everyone, first post here and a simple (but aggravating) problem - No matter what combination of -g flags or other command line tricks I use I cannot seem to get Chrome to allow me to step through my C++ code. I can add the CPP files and even set breakpoints but the program does not stop for them. I'm doing this on Ubuntu 22.04 with the latest version of Chrome.

[Sam Clegg]

Can you make it work with a simple hello world program compiled without optimizations?  If not it sounds like maybe a bug in either toolchain or in the debugger plugin.

If you can't set a breakpoint in a simple hello world program can you open a bug, and please include the full command line and full program you are using.

cheers,

sam

On Thu, Aug 18, 2022 at 3:52 PM Gregory Propf <gpr...@gmail.com> wrote:

Hello everyone, first post here and a simple (but aggravating) problem - No matter what combination of -g flags or other command line tricks I use I cannot seem to get Chrome to allow me to step through my C++ code. I can add the CPP files and even set breakpoints but the program does not stop for them. I'm doing this on Ubuntu 22.04 with the latest version of Chrome.

--
You received this message because you are subscribed to the Google Groups "emscripten-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to emscripten-disc...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/emscripten-discuss/02e05a34-f383-4e39-b051-ff7bdb3ae1c9n%40googlegroups.com.

[Gregory Propf]

Well, I made this little program and called it debugtest.cpp:

#include <iostream>

using namespace std;

int main()

{

int n = 100;

for (int i = 0; i < n; i++)

{

cout << "Loop counter: " << i << "\n";

}

}

I then compiled with "emcc debugtest.cpp -g -o debugtest.js". I hit F5 to reload the page and the code just runs again even with a breakpoint at the line with the cout. I almost wonder if there's just something I need to enable in Chrome or some special way to start in debug mode.  

To view this discussion on the web visit https://groups.google.com/d/msgid/emscripten-discuss/CAL_va2_eNCJj_9qnzJfJrYpwkzzLQrVzd-kOnXT2GGB45Mi5Xg%40mail.gmail.com.

[Gregory Propf]

I also tried it with "emcc debugtest.cpp -gsource-map --source-map-base=http://localhost:6931/ -o debugtest.js"

In this case the breakpoints actually are being honored but the variables are all just identified as $var1, $var2, etc... I've seen this before when trying to debug ClojureScript and eventually abandoned the effort because it wasn't that useful, particularly with complex data structures where I really needed the names of the structure members.

On Thu, Aug 18, 2022 at 5:02 PM 'Sam Clegg' via emscripten-discuss <emscripte...@googlegroups.com> wrote:

To view this discussion on the web visit https://groups.google.com/d/msgid/emscripten-discuss/CAL_va2_eNCJj_9qnzJfJrYpwkzzLQrVzd-kOnXT2GGB45Mi5Xg%40mail.gmail.com.

[Sebastian Theophil]

IIRC for source level breakpoints you need to enable the experimental support for dwarf debugging in chrome 

https://developer.chrome.com/blog/wasm-debugging-2020/

Von meinem iPhone gesendet

Am 19.08.2022 um 06:28 schrieb Gregory Propf <gpr...@gmail.com>:



To view this discussion on the web visit https://groups.google.com/d/msgid/emscripten-discuss/CAKdUWHO3ahfPE-31Sj22WiRRuMuyy9E9UNvN93D%2B0dVmz-vkuQ%40mail.gmail.com.

[Sam Clegg]

Indeed, source-map only give you line level debugging (i.e. not variables or parameter values), but work in all browsers.  

Full dwarf debugging (-g) requires the chrome extension.  I thought that you must have that already installed since I'm not sure how you would even set a breakpoint without that working.

To view this discussion on the web visit https://groups.google.com/d/msgid/emscripten-discuss/7AE81AD1-3532-47B4-B401-16164233AB25%40gmail.com.

[Gregory Propf]

I've installed the plugin and have now gotten as far as getting the program to stop at breakpoints. The actual variables are still just $var1, $var2,... I'm serving the program with emrun but I've used 'python3 -m http.server 8000' as well. Both produce the same result. It's probably still worth using but the actual project I'm working on has a lot of complex data structures that I assume will just show up as more of those anonymous 32 bit integers. Has anyone had any success with getting a full debugging environment working for emscripten whether in the browser or not? I'm familiar with debugging regular C++ code in VSCode and I know Emacs can be used for that as well. I'm only interested in things that work in a Linux environment as well.

To view this discussion on the web visit https://groups.google.com/d/msgid/emscripten-discuss/CAL_va2_UC4m_re92Ar%3DxzsbGtG21sauEa-72CgvNKwK1Xv5cRw%40mail.gmail.com.

[Gregory Propf]

It seems I missed something about the plugin that was important, which is that it seems to be designed to run only on the Canary builds of Chrome. I went to get the Canary build but it says right on the front page "Linux is not supported." Anyone aware of any other way to debug emscripten besides Chrome Canary? Anything like the Chrome plugin for Firefox or other browsers? The plugin still works on the production version of Chrome except for the fact that you can't see the identities of your variables which is a pretty critical failing at this point. I can at least stop using printf statements just to determine if a certain function or section of code is running though.

> To view this discussion on the web visit https://groups.google.com/d/msgid/emscripten-discuss/CAL_va2_UC4m_re92Ar%3DxzsbGtG21sauEa-72CgvNKwK1Xv5cRw%40mail.gmail.com.

[Floh]

It should definitely work on Vanilla Chrome, but setting everything up can be a bit finicky:

- install the Debugging extension: https://chrome.google.com/webstore/detail/cc%20%20-devtools-support-dwa/pdcpmagijalfljmkmjngeonclgbbannb

- in the Dev Tools settings, search for 'WebAssembly Debugging' and check that box

- compile your code with '-O0 -g' (no optimization, and debug info enabled'

- IMPORTANT: in the Chrome debugger, there's a 'Filesystem' tab on the left side which is very easy to miss. Here you need to navigate to your project directory and allow Chrome to access that area of your filesystem.

(I think/hope these are all steps)

When you load your application you should see something like this on the Dev Tools console:

[C/C++ DevTools Support (DWARF)] Loading debug symbols for http://localhost:8080/cube-sapp.wasm...
[C/C++ DevTools Support (DWARF)] Loaded debug symbols for http://localhost:8080/cube-sapp.wasm, found 91 source file(s)

...and if everything works it should look roughly like this in the debugger:

[Floh]

PS: What I *usually* do however is just debug a native build of my code in VSCode, Xcode or Visual Studio, having a debugger right under your 'fingertips' during development is still much more convenient than debugging in the browser IMHO - now if VSCode could somehow remote-connect to the Chrome debugger also for WASM code that would be the icing on the cake, but I couldn't get this to work for plain Javascript ;)

[Gregory Propf]

Bit of a late follow-up here but.. IT WORKS! Even in vanilla Chrome running on Ubuntu 22.04. This is what I've got in the Makefile for building my app:
CFLAGS = -O0 -g -std=c++17

(yes, I know the -std setting probably isn't relevant here)
Previously, I had this:

CFLAGS = -O0 -g -gsource-map --source-map-base=http://localhost:6931/ -std=c++17

It seems that the source map stuff actually interferes with the debugger. No more crazy dollar sign vars! Thanks Floh!

On Thu, Aug 25, 2022 at 5:14 AM Floh <flo...@gmail.com> wrote:
>
> It should definitely work on Vanilla Chrome, but setting everything up can be a bit finicky:
>
> - install the Debugging extension: https://chrome.google.com/webstore/detail/cc%20%20-devtools-support-dwa/pdcpmagijalfljmkmjngeonclgbbannb
> - in the Dev Tools settings, search for 'WebAssembly Debugging' and check that box
> - compile your code with '-O0 -g' (no optimization, and debug info enabled'
> - IMPORTANT: in the Chrome debugger, there's a 'Filesystem' tab on the left side which is very easy to miss. Here you need to navigate to your project directory and allow Chrome to access that area of your filesystem.
>
> (I think/hope these are all steps)
>
> When you load your application you should see something like this on the Dev Tools console:
>
> [C/C++ DevTools Support (DWARF)] Loading debug symbols for http://localhost:8080/cube-sapp.wasm...
> [C/C++ DevTools Support (DWARF)] Loaded debug symbols for http://localhost:8080/cube-sapp.wasm, found 91 source file(s)
>
> ...and if everything works it should look roughly like this in the debugger:
>
>

> You received this message because you are subscribed to a topic in the Google Groups "emscripten-discuss" group.
> To unsubscribe from this topic, visit https://groups.google.com/d/topic/emscripten-discuss/DEmpyGoq6kE/unsubscribe.
> To unsubscribe from this group and all its topics, send an email to emscripten-disc...@googlegroups.com.
> To view this discussion on the web visit https://groups.google.com/d/msgid/emscripten-discuss/ed6e0267-28d1-43e9-9db2-c4de9d8000d9n%40googlegroups.com.