调试 Kotlin/Wasm 代码

开始之前的准备步骤

打开 Kotlin Multiplatform 向导.
在 New Project 页, 将项目名称和 ID 修改为你喜欢的值. 在本教程中, 我们将项目名称设置为 "WasmDemo", ID 设置为 "wasm.project.demo".
tip
这些值是项目目录的名称和 ID. 你也可以使用原来的值, 不做修改.
选择 Web 选项. 请确认没有选择其他选项.
点击 Download 按钮, 将生成的压缩包文件解包.

在 IntelliJ IDEA 中打开项目

运行应用程序

在 IntelliJ IDEA 中, 选择菜单 View | Tool Windows | Gradle, 打开 Gradle 工具窗口.
note
你需要至少 Java 11 以上版本, 用作你的 Gradle JVM, 才能成功装载 task.
在 composeApp | Tasks | kotlin browser 中, 选中并运行 wasmJsBrowserRun 任务.
或者, 你可以在终端窗口, 在 WasmDemo 根目录下运行以下命令:
```
./gradlew wasmJsBrowserRun
```
应用程序启动之后, 在你的浏览器中打开下面的 URL:
```
http://localhost:8080/
```
tip
端口号可能会变化, 因为 8080 端口可能不能使用. 你可以在 Gradle 构建任务的控制台看到打印输出的实际端口号.
你会看到一个 "Click me!" 按钮. 请点击它:
现在你会看到 Compose Multiplatform 的 Logo:

在你的浏览器中进行调试

允许访问项目的源代码

默认情况下, 浏览器不能访问某些调试所需要的项目源代码. 要允许访问, 你可以配置 Webpack DevServer 来提供这些源代码. 在 ComposeApp 目录中, 向你的 build.gradle.kts 文件添加以下代码片段.

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

在 kotlin{} 之内的 wasmJs{} 编译目标 DSL 内的 browser{} 平台 DSL 中, 找到 commonWebpackConfig{} 代码块, 添加这个代码片段:

devServer = (devServer ?: KotlinWebpackConfig.DevServer()).apply {
    static = (static ?: mutableListOf()).apply {
        // 提供源代码, 以便在浏览器内进行调试
        add(project.rootDir.path)
        add(project.projectDir.path)
    }
}

kotlin { {...}

使用自定义格式增强调试能力

向 wasmJs 编译器参数添加以下值:

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

在你的浏览器中启用 Custom formatters 功能:
- 在 Chrome DevTools 中, 位置是 Settings | Preferences | Console:
- 在 Firefox Developer Tools 中, 位置是 Settings | Advanced settings: