调试 Kotlin/Wasm 代码

本教程演示如何使用你的浏览器调试使用 Kotlin/Wasm 构建的 Compose Multiplatform 应用程序.

开始之前的准备步骤

使用 Kotlin Multiplatform 向导创建一个项目:

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

在 IntelliJ IDEA 中打开项目

下载并安装最新版本的 IntelliJ IDEA.
在 IntelliJ IDEA 的欢迎界面, 点击 Open, 或在菜单栏选择 File | Open.
导航到解包后的 "WasmDemo" 文件夹, 点击 Open.

运行应用程序

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

在你的浏览器中进行调试

你可以在你的浏览器中直接调试这个 Compose Multiplatform 应用程序, 不需要额外的配置.

但是, 对于其它项目, 你可能需要在你的 Gradle build 文件中配置一些设置. 关于如何配置你的浏览器进行调试, 请展开下面的小节.

配置你的浏览器进行调试

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

将这个 import 添加为顶级声明:

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 { @OptIn(ExperimentalWasmDsl::class) wasmJs { moduleName = "composeApp" browser { commonWebpackConfig { outputFileName = "composeApp.js" devServer = (devServer ?: KotlinWebpackConfig.DevServer()).apply { static = (static ?: mutableListOf()).apply { // 提供源代码, 以便在浏览器内进行调试 add(project.rootDir.path) add(project.projectDir.path) } } } } } }

调试你的 Kotlin/Wasm 应用程序

在应用程序的浏览器窗口中, 点击鼠标右键, 并选择 Inspect, 打开开发者工具. 或者, 你也可以使用快捷键 F12, 或选择菜单 View | Developer | Developer Tools.
切换到 Sources 页, 并选择要调试的 Kotlin 文件. 在本教程中, 我们使用 Greeting.kt 文件.
点击行号, 在你想要检查的代码上设置断点. 只有行号数字较暗的行才可以设置断点.

点击 Click me! 按钮, 与应用程序交互. 这个动作会触发代码的执行, 当执行到断点位置时, 调试器会暂停.
在调试面板中, 使用调试控制按钮, 检查断点处的变量和代码运行状况:
- Step into: 更加深入的调查一个函数.
- Step over: 执行当前的代码行, 并在下一行暂停.
- Step out: 执行代码, 直到从当前函数退出.