Qt, Linux and everything: Debugging Qt WebAssembly

Source: Hacker News

One of the most tedious tasks a developer will do is debugging a nagging bug. It’s worse when it’s a web app, and even worse when it’s a WebAssembly web app.

The easiest way to debug Qt WebAssembly is by configuring the build with the -g argument, or CMAKE_BUILD_TYPE=Debug. Emscripten embeds DWARF symbols in the wasm binaries.

Note: Debugging wasm files with DWARF works only in the Chrome browser with the help of a browser extension.

• C/C++ DevTools Support (DWARF) browser extension.
  If you are using Safari or Firefox, or cannot install a browser extension, you will need to generate source maps (covered in a future post).

DWARF debugging

You need to enable DWARF in the browser developer tools settings. Unlike source maps, you do not need symlinks to the source directories because the binaries are embedded with the full directory path.

Emscripten embeds DWARF symbols into binaries built with -g by default, so rebuilding Qt or your application in debug mode is all you need to do.

Qt builds debug libraries by default using the optimized argument -g2, which produces less debugging info but results in faster link times. To preserve full debug symbols, build Qt debug using -g or -g3. Both options have the same effect.

Using DWARF debugger

1. Open Chrome with the extension installed and open the DevTools console.
2. Navigate to the Qt for WebAssembly web application you need to debug.
3. Wait a few seconds for all symbols and files to be parsed (debugging into Qt may take longer).
4. The console will list source file paths. Locate the file you want to debug and set breakpoints.
5. Reload the page; when execution hits a breakpoint, it will stop and highlight the current line in the source view, showing variable names and values.
6. Step through the code just as you would when debugging a desktop application.