Debug Kotlin/Wasm code

Create a project using the Kotlin Multiplatform wizard:

1. Open the Kotlin Multiplatform wizard.

2. On the New Project tab, change the project name and ID to your preference. In this tutorial, we set the name to "WasmDemo" and the ID to "wasm.project.demo".

   tip

   These are the name and ID of the project directory. You can also leave them as they are.

3. Select the Web option. Make sure that no other options are selected.

4. Click the Download button and unpack the resulting archive.

1. Download and install the latest version of IntelliJ IDEA.

2. On the Welcome screen of IntelliJ IDEA, click Open or select File | Open in the menu bar.

3. Navigate to the unpacked "WasmDemo" folder and click Open.

1. In IntelliJ IDEA, open the Gradle tool window by selecting View | Tool Windows | Gradle.

   note

   You need at least Java 11 as your Gradle JVM for the tasks to load successfully.

2. In composeApp | Tasks | kotlin browser, select and run the wasmJsBrowserRun task.

   

   Alternatively, you can run the following command in the terminal from the WasmDemo root directory:

   ./gradlew wasmJsBrowserRun

3. Once the application starts, open the following URL in your browser:

   http://localhost:8080/

   tip

   The port number can vary because the 8080 port may be unavailable. You can find the actual port number printed in the Gradle build console.

   You see a "Click me!" button. Click it:

   

   Now you see the Compose Multiplatform logo:

   

note

Currently, debugging is only available in your browser. In the future, you will be able to debug your code in IntelliJ IDEA.

You can debug this Compose Multiplatform application in your browser out of the box, without additional configurations.

However, for other projects, you may need to configure additional settings in your Gradle build file. For more information about how to configure your browser for debugging, expand the next section.

Configure your browser for debugging

Enable access to project's sources

By default, browsers can't access some of the project's sources necessary for debugging. To provide access, you can configure the Webpack DevServer to serve these sources. In the ComposeApp directory, add the following code snippets to your build.gradle.kts file.

Add this import as a top-level declaration:

import org.jetbrains.kotlin.gradle.targets.js.webpack.KotlinWebpackConfig

Add this code snippet inside the commonWebpackConfig{} block, located in the wasmJs{} target DSL and browser{} platform DSL within kotlin{}:

devServer = (devServer ?: KotlinWebpackConfig.DevServer()).apply {
    static = (static ?: mutableListOf()).apply {
        // Serve sources to debug inside browser
        add(project.rootDir.path)
        add(project.projectDir.path)
    }
}

The resulting code block looks like this:

kotlin {
 {...}

note

Currently, you can't debug library sources. We will support this in the future.

Enhance your debugging with custom formatters

In addition to the default debugging configuration, you can set up custom formatters to display and locate variable values in a more user-friendly and comprehensible manner.

This implementation is supported across major browsers like Firefox and Chromium-based as it uses the custom formatters API.

To set up custom formatters for an improved debugging experience:

1. Add the following compiler argument to the wasmJs compiler options:

   kotlin {
       wasmJs {
           // ...
           compilerOptions {
               freeCompilerArgs.add("-Xwasm-debugger-custom-formatters")
           }
       }
   }

2. Enable the Custom formatters feature in your browser:

   • In the Chrome DevTools, it's placed in Settings | Preferences | Console:

   

   • In the Firefox Developer Tools, it's placed in Settings | Advanced settings:

   

After setting up custom formatters, you can complete the debugging tutorial.

We would appreciate any feedback you may have on your debugging experience!

• Slack: get a Slack invite and provide your feedback directly to the developers in our #webassembly channel.

• Provide your feedback in YouTrack.

• See Kotlin/Wasm debugging in action in this YouTube video.

• Try the Kotlin/Wasm examples from our kotlin-wasm-examples repository:

  • Compose image viewer

  • Jetsnack application

  • Node.js example

  • WASI example

  • Compose example