Kotlin/Wasm コードのデバッグ
このチュートリアルでは、Kotlin/Wasm を使用して構築された Compose Multiplatform アプリケーションを、IntelliJ IDEA とブラウザを使用してデバッグする方法を説明します。
始める前に
- IntelliJ IDEA での Kotlin/Wasm コードのデバッグは、IDE のバージョン 2025.3 以降で利用可能です。現在は 早期アクセスプログラム (EAP) で提供されており、今後安定版になる予定です。別のバージョンの IntelliJ IDEA で
WasmDemoプロジェクトを作成した場合は、このチュートリアルを続行するために、バージョン 2025.3 に切り替えてプロジェクトを開いてください。- IntelliJ IDEA で Kotlin/Wasm コードをデバッグするには、JavaScript Debugger プラグインがインストールされている必要があります。プラグインの詳細とインストール方法については、こちらを参照してください。
IntelliJ IDEA でのデバッグ
作成した Kotlin マルチプラットフォームプロジェクトには、Kotlin/Wasm で動作する Compose Multiplatform アプリケーションが含まれています。特別な設定を行うことなく、このアプリケーションを IntelliJ IDEA でデバッグできます。
IntelliJ IDEA で、デバッグする Kotlin ファイルを開きます。このチュートリアルでは、Kotlin マルチプラットフォームプロジェクトの以下のディレクトリにある
Greeting.ktファイルを使用します。WasmDemo/composeApp/src/wasmJsMain/kotlin/wasm.project.demo.wasmdemo行番号をクリックして、調査したいコードにブレークポイントを設定します。
実行構成（run configurations）のリストから composeApp[wasmJs] を選択します。
画面上部にあるデバッグアイコンをクリックして、デバッグモードでコードを実行します。
アプリケーションが起動すると、新しいブラウザウィンドウが開きます。
また、IntelliJ IDEA 内で Debug パネルが自動的に開きます。
アプリケーションの検査
ブラウザでデバッグしている場合も、アプリケーションの検査には同じ手順を使用できます。
アプリケーションのブラウザウィンドウで、Click me! ボタンをクリックしてアプリケーションを操作します。このアクションによってコードの実行がトリガーされ、実行がブレークポイントに達するとデバッガーが一時停止します。
デバッグペインで、デバッグコントロールボタンを使用して、ブレークポイントでの変数やコードの実行を検査します：
ステップオーバー（Step over）：現在の行を実行し、次の行で停止します。
ステップイン（Step into）：関数内に入って詳細に調査します。
ステップアウト（Step out）：現在の関数を抜けるまでコードを実行します。
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 のデベロッパーツールでは、Settings | Preferences | Console にある Custom formatters チェックボックスを見つけてオンにします：
Firefox のデベロッパーツールでは、Settings | Advanced settings にある Enable custom formatters チェックボックスを見つけてオンにします：
この機能は custom formatters API を使用しており、Firefox および Chromium ベースのブラウザでサポートされています。
カスタムフォーマッターはデフォルトで Kotlin/Wasm の開発ビルド（development builds）に対してのみ機能するため、製品ビルド（production builds）でも使用したい場合は、Gradle 設定を調整する必要があります。wasmJs {} ブロックに以下のコンパイラオプションを追加してください。
// build.gradle.kts
kotlin {
wasmJs {
// ...
compilerOptions {
freeCompilerArgs.add("-Xwasm-debugger-custom-formatters")
}
}
}フィードバックの提供
デバッグ体験に関するフィードバックをお待ちしております！
Slack: Slack の招待を受け取り、#webassembly チャンネルで開発者に直接フィードバックを提供してください。- YouTrack でフィードバックを提供してください。
次のステップ
- Kotlin/Wasm デバッグの実演については、こちらの YouTube ビデオ（英語）をご覧ください。
- その他の Kotlin/Wasm の例を試してみてください：