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