Debugging Web Modules

To debug Web Modules, you need to have Google Chrome or the Brave Browser installed. With a default installation, the IDEs will usually find Chrome or Brave automatically, but the following topics will help you set up either, or to point your IDE to a custom browser version:

WebAssembly debugging has been tested with Google Chrome, Microsoft Edge (nee Chromium based versions), and the open source Brave Browser, but might also work with other Chromium-based browsers, such as newer Microsoft Edge versions.

Launching

When running your project from the IDE, the Debugger takes care of launching a new browser istance and pointing it to an internal HTTP server that serves all the right files, including all the static files in the Web folder of your project, as well as a virtual wasm subfolder that contains the compiled binary and related files.

This way, the path relationship between the test .html file (and related files you might add such as images or stylesheets) and the compiler-generated files is intact.

By default, your project created with the Web Module template contains a dummy index.html for debugging and testing purposes. That file will be loaded in the browser, load in the compiled .wasm binary, and initialize it. The file contains relative paths that expect the binary in the (virtual) ./wasm subfolder of the HTTP server.

There are two Project Settings used to control this behavior:

  • <DebugIndexHtmlFile>Web\index.html</DebugIndexHtmlFile> – specifies the test .html file. The path to the file (which usually is relative to the project, but may also be absolute) will determine the root folder for the HTTP server, while the filename itself will determine the URL to be opened in the browser on launch.

  • <DebugUrl>http://localhost:1234/</DebugUrl> – optionally, a full URL to a test server can be provided. If so, the debugger will not launch its own HTTP server, but assume a server is running at the given URL, and that you have set it up to properly serve the test HTML and the WebAssembly files.

Debugging

Once your webpage and the .wasm module is loaded, you can debug your code the same as you would any other project. For example, you can set Breakpoints to pause execution when a certain part of your code is hit, and you will automatically "break" into the debugger, if any Exception occurs.

You will notice in the Stack Frames Pane that your own code intermingles with stack frames that show JavaScript code, as well as of course frames of code of the Browser's runtime itself.

See Also