偵錯 Kotlin/Wasm 程式碼
本教學示範如何使用 IntelliJ IDEA 和瀏覽器 來偵錯您以 Kotlin/Wasm 建置的 Compose Multiplatform 應用程式。
開始之前
- 在 IntelliJ IDEA 中偵錯 Kotlin/Wasm 程式碼從 IDE 2025.3 版本開始可用，目前處於 搶先體驗計畫 (EAP) 階段，並將逐步趨於穩定。如果您是在不同版本的 IntelliJ IDEA 中建立
WasmDemo專案，請切換到 2025.3 版本並在那裡開啟專案以繼續本教學。- 若要在 IntelliJ IDEA 中偵錯 Kotlin/Wasm 程式碼，您必須安裝 JavaScript Debugger 插件。 請參閱有關該插件以及如何安裝它的更多資訊。
在 IntelliJ IDEA 中偵錯
您建立的 Kotlin Multiplatform 專案包含一個由 Kotlin/Wasm 支援的 Compose Multiplatform 應用程式。 您可以直接在 IntelliJ IDEA 中偵錯此應用程式，無需額外配置。
在 IntelliJ IDEA 中，開啟要偵錯的 Kotlin 檔案。在本教學中，我們將使用 Kotlin Multiplatform 專案以下目錄中的
Greeting.kt檔案：WasmDemo/composeApp/src/wasmJsMain/kotlin/wasm.project.demo.wasmdemo按一下行號以在您要檢查的程式碼上設定中斷點。
在執行配置清單中，選取 composeApp[wasmJs]。
按一下螢幕頂部的偵錯圖示，以偵錯模式執行程式碼。
應用程式啟動後，它會在新的瀏覽器視窗中開啟。
同時，IntelliJ IDEA 中的 Debug 面板會自動開啟。
檢查您的應用程式
如果您正在瀏覽器中偵錯，您可以按照相同的步驟檢查您的應用程式。
在應用程式的瀏覽器視窗中，按一下「Click me!」按鈕與應用程式互動。此動作會觸發程式碼執行，當執行到達中斷點時，偵錯程式會暫停。
在偵錯窗格中，使用偵錯控制按鈕檢查中斷點處的變數和程式碼執行：
跳過以執行目前行並在下一行暫停。
逐步執行以更深入地調查函式。
跳出以執行程式碼直到其退出目前函式。
檢查 Threads & Variables 窗格。它有助於您追蹤函式呼叫序列並確定任何錯誤的位置。
更改您的程式碼並再次執行應用程式以驗證它是否按預期運作。
完成偵錯後，按一下有中斷點的行號以移除中斷點。
在瀏覽器中偵錯
您也可以直接在瀏覽器中偵錯此 Compose Multiplatform 應用程式，無需額外配置。
當您執行開發 Gradle 任務 (*DevRun) 時，Kotlin 會自動將原始碼檔案提供給瀏覽器， 讓您能夠設定中斷點、檢查變數， 並逐步執行 Kotlin 程式碼。
在瀏覽器中提供 Kotlin/Wasm 專案原始碼的配置現在已包含在 Kotlin Gradle 插件中。 如果您之前將此配置新增到您的 build.gradle.kts 檔案中，則應將其移除以避免衝突。
本教學使用 Chrome 瀏覽器，但您應該能夠使用其他瀏覽器遵循這些步驟。如需更多資訊，請參閱 瀏覽器版本。
在應用程式的瀏覽器視窗中，按右鍵並選取 Inspect 動作以存取開發人員工具。 或者，您可以使用 F12 快捷鍵或選取 View | Developer | Developer Tools。
切換到 Sources 標籤頁並選取要偵錯的 Kotlin 檔案。在本教學中，我們將使用
Greeting.kt檔案。按一下行號以在您要檢查的程式碼上設定中斷點。只有數字顏色較深的行才能設定中斷點 — 在此範例中為 4、7、8 和 9。
檢查您的應用程式，類似於 在 IntelliJ IDEA 中偵錯。
在瀏覽器中偵錯時，用於追蹤函式呼叫序列並確定任何錯誤的窗格是 Scope 和 Call Stack。
使用自訂格式化程式
自訂格式化程式有助於在瀏覽器中偵錯 Kotlin/Wasm 程式碼時，以更使用者友善且易於理解的方式顯示和定位變數值。
自訂格式化程式在 Kotlin/Wasm 開發版本中預設啟用，但是 您仍然需要確保在瀏覽器的開發人員工具中啟用自訂格式化程式：
在 Chrome DevTools 中，於 Settings | Preferences | Console 尋找 Custom formatters 核取方塊：
在 Firefox DevTools 中，於 Settings | Advanced settings 尋找 Enable custom formatters 核取方塊：
此功能使用 自訂格式化程式 API， 並在 Firefox 和基於 Chromium 的瀏覽器中受到支援。
鑑於自訂格式化程式預設僅適用於 Kotlin/Wasm 開發版本， 如果您希望將它們用於生產版本，則需要調整您的 Gradle 配置。 將以下編譯器選項新增到 wasmJs {} 區塊中：
// build.gradle.kts
kotlin {
wasmJs {
// ...
compilerOptions {
freeCompilerArgs.add("-Xwasm-debugger-custom-formatters")
}
}
}提供回饋
我們非常感謝您對偵錯體驗提出的任何回饋！
Slack: 取得 Slack 邀請 並在我們的 #webassembly 頻道中直接向開發人員提供您的回饋。- 在 YouTrack 中提供您的回饋。
接下來是什麼？
- 在此 YouTube 影片 中查看 Kotlin/Wasm 偵錯的實際操作。
- 嘗試更多 Kotlin/Wasm 範例：