偵錯 Kotlin/Wasm 程式碼
本教學示範如何使用 IntelliJ IDEA 和瀏覽器來偵錯使用 Compose Multiplatform 建置的 Kotlin/Wasm 應用程式。
開始之前
- 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]。
點擊畫面頂端的偵錯圖示，以偵錯模式執行程式碼。
應用程式啟動後，會在新的瀏覽器視窗中開啟。
同時，Debug 面板會在 IntelliJ IDEA 中自動開啟。
檢查您的應用程式
如果您正在瀏覽器中偵錯，可以按照相同的步驟來檢查您的應用程式。
在應用程式的瀏覽器視窗中，點擊 Click me! 按鈕與應用程式互動。此操作會觸發程式碼執行，且當執行到達中斷點時，偵錯工具會暫停。
在偵錯窗格中，使用偵錯控制按鈕來檢查中斷點處的變數和程式碼執行情況：
單步越過：執行目前行並在下一行暫停。
單步進入：深入調查函式內部。
步出：執行程式碼直到退出目前函式。
檢查 Threads & Variables 窗格。它可以幫助您追蹤函式呼叫的順序並精確定位任何錯誤的位置。
修改程式碼並再次執行應用程式以驗證其運作情況。
完成偵錯後，點擊帶有中斷點的行號以移除中斷點。
在瀏覽器中偵錯
您也可以在瀏覽器中偵錯此 Compose Multiplatform 應用程式，無需額外配置。
當您執行開發 Gradle 任務 (*DevRun) 時，Kotlin 會自動將原始碼檔案提供給瀏覽器，讓您可以設定中斷點、檢查變數並單步執行 Kotlin 程式碼。
在瀏覽器中提供 Kotlin/Wasm 專案原始碼的配置現在已包含在 Kotlin Gradle 外掛程式中。如果您之前在 build.gradle.kts 檔案中手動新增了此配置，則應將其移除以避免衝突。
本教學使用 Chrome 瀏覽器，但您應該也可以使用其他瀏覽器遵循這些步驟。如需更多資訊，請參閱瀏覽器版本。
在應用程式的瀏覽器視窗中，按右鍵並選擇檢查操作以存取開發者工具。或者，您可以使用 F12 快速鍵或選擇 檢視 | 開發人員 | 開發者工具。
切換到 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 範例：