Kotlin/JSコードのデバッグ
JavaScriptソースマップは、バンドラーやミニファイアーによって生成された縮小化されたコードと、開発者が実際に作業するソースコードとの間のマッピングを提供します。これにより、ソースマップはコード実行中のデバッグをサポートします。
KotlinマルチプラットフォームGradleプラグインは、プロジェクトのビルド時に自動的にソースマップを生成し、追加の設定なしで利用できるようにします。
ブラウザでのデバッグ
ほとんどの最新のブラウザには、ページコンテンツの検証や、その上で実行されるコードのデバッグを可能にするツールが備わっています。詳細については、お使いのブラウザのドキュメントを参照してください。
ブラウザでKotlin/JSをデバッグするには：
- 利用可能な
runGradleタスクのいずれかを呼び出してプロジェクトを実行します。例えば、マルチプラットフォームプロジェクトではbrowserDevelopmentRunやjsBrowserDevelopmentRunを使用します。 Kotlin/JSの実行について詳しく学ぶ。 - ブラウザでページに移動し、開発者ツールを起動します（例えば、右クリックしてInspectアクションを選択します）。主要なブラウザで開発者ツールを見つける方法について学ぶ。
- プログラムがコンソールに情報をログ出力している場合、Consoleタブに移動してこの出力を確認します。お使いのブラウザによっては、これらのログが参照元のKotlinソースファイルと行を示すことがあります。
- 右側のファイル参照をクリックして、対応するコード行に移動します。 あるいは、手動でSourcesタブに切り替えて、ファイルツリーで必要なファイルを見つけることもできます。Kotlinファイルに移動すると、通常のKotlinコードが表示されます（縮小化されたJavaScriptではありません）。
これでプログラムのデバッグを開始できます。行番号の1つをクリックしてブレークポイントを設定します。開発者ツールはステートメント内でのブレークポイント設定もサポートしています。通常のJavaScriptコードと同様に、設定されたブレークポイントはページのリロード後も維持されます。これにより、スクリプトが最初にロードされたときに実行されるKotlinのmain()メソッドもデバッグできるようになります。
IDEでのデバッグ
IntelliJ IDEA Ultimateは、開発中にコードをデバッグするための強力なツールセットを提供します。
IntelliJ IDEAでKotlin/JSをデバッグするには、JavaScript Debug構成が必要です。このようなデバッグ構成を追加するには：
- Run | Edit Configurationsに移動します。
- **+**をクリックし、JavaScript Debugを選択します。
- 構成のNameを指定し、プロジェクトが実行されるURLを提供します（デフォルトは
http://localhost:8080です）。
- 構成を保存します。
JavaScriptデバッグ構成の設定について詳しく学ぶ。
これでプロジェクトのデバッグ準備が整いました！
- 利用可能な
runGradleタスクのいずれかを呼び出してプロジェクトを実行します。例えば、マルチプラットフォームプロジェクトではbrowserDevelopmentRunやjsBrowserDevelopmentRunを使用します。 Kotlin/JSの実行について詳しく学ぶ。 - 以前に作成したJavaScriptデバッグ構成を実行して、デバッグセッションを開始します。
- プログラムのコンソール出力は、IntelliJ IDEAのDebugウィンドウで確認できます。出力項目は、Kotlinソースファイルとそれらが生成された行を参照します。
- 右側のファイル参照をクリックして、対応するコード行に移動します。
これで、IDEが提供するブレークポイント、ステップ実行、式の評価など、ツール一式を使用してプログラムのデバッグを開始できます。IntelliJ IDEAでのデバッグについて詳しく学ぶ。
現在のIntelliJ IDEAのJavaScriptデバッガーの制限により、ブレークポイントで実行を停止させるためにJavaScriptデバッグを再実行する必要がある場合があります。
Node.jsでのデバッグ
プロジェクトがNode.jsをターゲットとしている場合、このランタイムでデバッグできます。
Node.jsをターゲットとするKotlin/JSアプリケーションをデバッグするには：
buildGradleタスクを実行してプロジェクトをビルドします。- プロジェクトディレクトリ内の
build/js/packages/your-module/kotlin/ディレクトリで、Node.js用の結果の.jsファイルを見つけます。 - Node.jsデバッグガイドに記載されているとおりにNode.jsでデバッグします。
次のステップ
Kotlin/JSプロジェクトでデバッグセッションを開始する方法を理解したところで、デバッグツールを効率的に利用する方法を学びましょう。
問題が発生した場合
Kotlin/JSのデバッグで何か問題に直面した場合は、問題トラッカーであるYouTrackに報告してください。