Beta

Kotlin/Wasm コードのデバッグ

このチュートリアルでは、IntelliJ IDEA とブラウザを使用して、Kotlin/Wasm でビルドされた Compose Multiplatform アプリケーションをデバッグする方法を説明します。

開始する前に

1. Kotlin Multiplatform 開発環境をセットアップする。
2. Kotlin/Wasm をターゲットとする Kotlin 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 で追加設定なしで、すぐにデバッグできます。

1. IntelliJ IDEA で、デバッグする Kotlin ファイルを開きます。このチュートリアルでは、Kotlin Multiplatform プロジェクトの以下のディレクトリにある Greeting.kt ファイルを扱います。

   WasmDemo/composeApp/src/wasmJsMain/kotlin/wasm.project.demo.wasmdemo

2. 調べたいコードにブレークポイントを設定するには、行番号をクリックします。

   

3. 実行構成のリストで、composeApp[wasmJs] を選択します。

4. 画面上部のデバッグアイコンをクリックして、コードをデバッグモードで実行します。

   

   アプリケーションが起動すると、新しいブラウザウィンドウで開きます。

   

   また、IntelliJ IDEA で Debug パネルが自動的に開きます。

   

アプリケーションを検査する

ブラウザでデバッグしている場合も、アプリケーションを検査するために同じ手順を実行できます。

1. アプリケーションのブラウザウィンドウで、Click me! ボタンをクリックしてアプリケーションを操作します。このアクションによりコードの実行がトリガーされ、実行がブレークポイントに到達するとデバッガが一時停止します。

2. デバッグペインで、デバッグコントロールボタンを使用してブレークポイントでの変数とコードの実行を検査します。

   • ステップオーバーして、現在の行を実行し、次の行で一時停止します。
   • ステップインして、関数をさらに深く調査します。
   • ステップアウトして、現在の関数を終了するまでコードを実行します。

3. Threads & Variables ペインを確認します。これは、関数呼び出しのシーケンスをトレースし、エラーの場所を特定するのに役立ちます。

   

4. コードを変更し、アプリケーションを再度実行して、すべてが期待どおりに機能することを確認します。

5. デバッグが完了したら、ブレークポイントのある行番号をクリックしてブレークポイントを削除します。

ブラウザでデバッグする

この Compose Multiplatform アプリケーションは、追加設定なしでブラウザでデバッグすることもできます。

開発用の Gradle タスク (*DevRun) を実行すると、Kotlin は自動的にソースファイルをブラウザに提供し、ブレークポイントの設定、変数の検査、Kotlin コードのステップ実行を可能にします。

ブラウザで Kotlin/Wasm プロジェクトのソースを提供するための設定は、Kotlin Gradle プラグインにすでに含まれています。 以前にこの設定を build.gradle.kts ファイルに追加していた場合は、競合を避けるために削除する必要があります。

このチュートリアルでは Chrome ブラウザを使用していますが、他のブラウザでもこれらの手順を実行できるはずです。詳細については、ブラウザのバージョンを参照してください。

1. Compose Multiplatform アプリケーションを実行するの手順に従ってください。

2. アプリケーションのブラウザウィンドウで右クリックし、Inspect アクションを選択して開発者ツールにアクセスします。 あるいは、F12 ショートカットを使用するか、View | Developer | Developer Tools を選択することもできます。

3. Sources タブに切り替え、デバッグする Kotlin ファイルを選択します。このチュートリアルでは、Greeting.kt ファイルを扱います。

4. 調べたいコードにブレークポイントを設定するには、行番号をクリックします。ブレークポイントを設定できるのは、数字が濃い色の行のみです。この例では、4、7、8、9 行目です。

   

5. IntelliJ IDEA でのデバッグと同様に、アプリケーションを検査します。

   ブラウザでデバッグする際、関数呼び出しのシーケンスをトレースし、エラーの場所を特定するためのペインは、Scope と Call Stack です。

   

カスタムフォーマッタを使用する

カスタムフォーマッタは、ブラウザで Kotlin/Wasm コードをデバッグする際に、変数値をよりユーザーフレンドリーで分かりやすい方法で表示し、特定するのに役立ちます。

カスタムフォーマッタは Kotlin/Wasm 開発ビルドでデフォルトで有効になっていますが、 ブラウザの開発者ツールでカスタムフォーマッタが有効になっていることを確認する必要があります。

• Chrome DevTools では、Settings | Preferences | Console でカスタムフォーマッタのチェックボックスを見つけます。

  

• 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 の例を試してみてください。
  • KotlinConf application
  • Compose image viewer
  • Jetsnack application
  • Node.js example
  • WASI example
  • Compose example