Kotlin/Wasm コードのデバッグ

Kotlin/Wasm は アルファ版です。これは予告なく変更される可能性があります。

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

開始する前に

Kotlin Multiplatform ウィザードを使用してプロジェクトを作成します:

1. Kotlin Multiplatform ウィザードを開きます。

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 ツールウィンドウを開きます。

   タスクを正常にロードするには、Gradle JVM として Java 11 以降が必要です。

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

kotlin{} 内の wasmJs{} ターゲット DSL および browser{} プラットフォーム DSL にある commonWebpackConfig{} ブロック内に、このコードスニペットを追加します:

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 設定は必要ありません。

この機能は、カスタムフォーマッタ API を使用しているため、Firefox および Chromium ベースのブラウザでサポートされています。

この機能を使用するには、ブラウザの開発者ツールでカスタムフォーマッタが有効になっていることを確認してください:

• 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 ブラウザを使用していますが、他のブラウザでもこれらの手順を実行できるはずです。詳細については、ブラウザのバージョンを参照してください。

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