Debugging WebAssembly Applications

This section describes how to debug WebAssembly modules in a Web application.

You can debug WebAssembly applications on an emulator or a Samsung device using the Developer's Tools component, which is started automatically whenever you start a debug session.

For information on debugging your application's other Web components, see TV Simulator, TV Emulator, and Target Device.

Before you can start the application on an emulator or a Samsung device:

To debug WebAssembly modules in a Web application:

  1. In the "Project Explorer" view, right-click the Web application project and select "Debug As > Tizen Web Application".

    Tizen Studio launches the application project on the connected emulator or device, and a DevTools window opens.

    Figure 1. DevTools Window

  2. Navigate to the "Sources" tab, then select "Page" tab on the left hand side of the window so that the page tree is visible. Locate the wasm folder among others in the tree (see Figure 1).

  3. Expand the folder and note that there are further folders - one per each WebAssembly module on the page. These folders can again be expanded and they contain several source files - one per each WebAssembly function in your module.

  4. In the source files, you can set breakpoints, watch expressions and do other typical debug activities.

    For example, to set a new breakpoint, click the line number of the currently displayed code, where the breakpoint is to be set. Now, when you reload the page, the WebAssembly execution pauses on the set breakpoint.

    Figure 2. WebAssembly Execution Paused on a Breakpoint