偵錯 Kotlin/Wasm 程式碼

Kotlin/Wasm 處於 Alpha 階段。它隨時可能更改。

本教學示範如何使用瀏覽器偵錯以 Kotlin/Wasm 建置的 Compose Multiplatform 應用程式。

開始之前

使用 Kotlin Multiplatform wizard 建立專案：

1. 開啟 Kotlin Multiplatform wizard。

2. 在 New Project 標籤頁中，依偏好變更專案名稱與 ID。在本教學中，我們將名稱設定為「WasmDemo」，ID 設定為「wasm.project.demo」。

   這些是專案目錄的名稱和 ID。您也可以保留它們不變。

3. 選取 Web 選項。請確保沒有選取其他選項。

4. 按一下 Download 按鈕並解壓縮產生的壓縮檔。

   

在 IntelliJ IDEA 中開啟專案

1. 下載並安裝最新版 IntelliJ IDEA。
2. 在 IntelliJ IDEA 的歡迎畫面中，按一下 Open 或在選單列中選取 File | Open。
3. 導覽至解壓縮後的「WasmDemo」資料夾，然後按一下 Open。

執行應用程式

1. 在 IntelliJ IDEA 中，透過選取 View | Tool Windows | Gradle 開啟 Gradle 工具視窗。

   您需要至少 Java 11 作為您的 Gradle JVM，以便任務成功載入。

2. 在 composeApp | Tasks | kotlin browser 中，選取並執行 wasmJsBrowserDevelopmentRun 任務。

   

   或者，您可以在 WasmDemo 根目錄下的終端機中執行以下命令：

   ./gradlew wasmJsBrowserDevelopmentRun

3. 應用程式啟動後，在您的瀏覽器中開啟以下 URL：

   http://localhost:8080/

   連接埠號碼可能不同，因為 8080 連接埠可能不可用。您可以在 Gradle 建置控制台中找到實際的連接埠號碼。

   您會看到一個「Click me!」按鈕。點擊它：

   

   現在您會看到 Compose Multiplatform 標誌：

   

在瀏覽器中偵錯

目前，偵錯僅在您的瀏覽器中可用。未來，您將能夠在 IntelliJ IDEA 中偵錯您的程式碼。

您可以直接在瀏覽器中偵錯此 Compose Multiplatform 應用程式，無需額外配置。

然而，對於其他專案，您可能需要在 Gradle 建置檔案中配置額外設定。有關如何配置瀏覽器以進行偵錯的更多資訊，請展開下一節。

配置您的瀏覽器以進行偵錯

啟用專案原始碼的存取

預設情況下，瀏覽器無法存取偵錯所需的部分專案原始碼。為了提供存取權，您可以配置 Webpack DevServer 來提供這些原始碼。在 ComposeApp 目錄中，將以下程式碼片段新增到您的 build.gradle.kts 檔案中。

將此匯入作為頂層宣告新增：

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

將此程式碼片段新增到 commonWebpackConfig{} 區塊內，該區塊位於 kotlin{} 中的 wasmJs{} 目標 DSL 和 browser{} 平台 DSL 中：

devServer = (devServer ?: KotlinWebpackConfig.DevServer()).apply {
    static = (static ?: mutableListOf()).apply {
        // Serve sources to debug inside browser
        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 { 
                        // Serve sources to debug inside browser
                        add(project.rootDir.path)
                        add(project.projectDir.path)
                    }
                } 
            }
        }
    }
}

目前，您無法偵錯函式庫原始碼。我們將在未來支援此功能。

使用自訂格式化程式

自訂格式化程式有助於在偵錯 Kotlin/Wasm 程式碼時，以更使用者友善且易於理解的方式顯示和定位變數值。

自訂格式化程式在開發版本中預設啟用，因此您不需要額外的 Gradle 配置。

此功能在 Firefox 和基於 Chromium 的瀏覽器中受到支援，因為它使用了 自訂格式化程式 API。

若要使用此功能，請確保在您瀏覽器的開發人員工具中啟用自訂格式化程式：

• 在 Chrome DevTools 中，於 Settings | Preferences | Console 尋找自訂格式化程式的核取方塊：

  

• 在 Firefox DevTools 中，於 Settings | Advanced settings 尋找自訂格式化程式的核取方塊：

  

自訂格式化程式適用於 Kotlin/Wasm 開發版本。如果您對生產版本有特定要求，您需要相應地調整您的 Gradle 配置。將以下編譯器選項新增到 wasmJs {} 區塊中：

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

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

啟用自訂格式化程式後，您可以繼續進行偵錯教學。

偵錯您的 Kotlin/Wasm 應用程式

本教學使用 Chrome 瀏覽器，但您應該能夠使用其他瀏覽器遵循這些步驟。如需更多資訊，請參閱 Browser versions。

1. 在應用程式的瀏覽器視窗中，按右鍵並選取 Inspect 動作以存取開發人員工具。或者，您可以使用 F12 快捷鍵或選取 View | Developer | Developer Tools。

2. 切換到 Sources 標籤頁並選取要偵錯的 Kotlin 檔案。在本教學中，我們將使用 Greeting.kt 檔案。

3. 按一下行號以在您要檢查的程式碼上設定中斷點。只有數字顏色較深的行可以設定中斷點。

   

4. 按一下 Click me! 按鈕與應用程式互動。此動作會觸發程式碼執行，當執行到達中斷點時，偵錯程式會暫停。

5. 在偵錯窗格中，使用偵錯控制按鈕檢查中斷點處的變數和程式碼執行：

   • 逐步執行以更深入地調查函式。
   • 跳過以執行目前行並在下一行暫停。
   • 跳出以執行程式碼直到其退出目前函式。

   

6. 檢查 Call stack 和 Scope 窗格以追蹤函式呼叫序列並確定任何錯誤的位置。

   

   為了更好地視覺化變數值，請參閱 配置您的瀏覽器以進行偵錯 區段中的 使用自訂格式化程式。

7. 更改您的程式碼並再次執行應用程式以驗證一切是否按預期運作。

8. 按一下有中斷點的行號以移除中斷點。

提供回饋

我們非常感謝您對偵錯體驗提出的任何回饋！

• Slack: 取得 Slack 邀請 並在我們的 #webassembly 頻道中直接向開發人員提供您的回饋。
• 在 YouTrack 中提供您的回饋。

接下來是什麼？

• 在此 YouTube 影片 中查看 Kotlin/Wasm 偵錯的實際操作。
• 嘗試我們 kotlin-wasm-examples 儲存庫中的 Kotlin/Wasm 範例：
  • Compose image viewer
  • Jetsnack application
  • Node.js example
  • WASI example
  • Compose example