Debug Kotlin/Wasm code

Before you start

Open the Kotlin Multiplatform wizard.
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.
Select the Web option. Make sure that no other options are selected.
Click the Download button and unpack the resulting archive.

Open the project in IntelliJ IDEA

Run the application

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.
In composeApp | Tasks | kotlin browser, select and run the wasmJsBrowserDevelopmentRun task.
Alternatively, you can run the following command in the terminal from the WasmDemo root directory:
```
./gradlew wasmJsBrowserDevelopmentRun
```
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:

Debug in your browser

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.

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)
    }
}

kotlin { {...}

Use custom formatters

Custom formatters work for Kotlin/Wasm development builds. If you have specific requirements for production builds, you need to adjust your Gradle configuration accordingly. Add the following compiler option to the wasmJs {} block:

// build.gradle.kts
kotlin {
    wasmJs {
        // ...

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