サーバー側とクライアント側のコードのデバッグ
IntelliJ IDEA を使用すると、Node.js アプリケーションのサーバー側コードとクライアント側 JavaScript コードを一緒にデバッグできます。そのためには、Node.js 構成に加えて、JavaScript デバッグ構成を作成して起動する必要があります。
IntelliJ IDEA を使用すると、メインの Node.js 構成を作成または編集するときに、ライブ編集タブから JavaScript デバッグ構成を作成できます。この場合、Node.js 構成を開始するたびに、JavaScript デバッグ構成が自動的に開始されます。
![start debugging the server and the client code with one run/debug configuration](https://resources.jetbrains.com/help/img/idea/2024.1/node_debug_server_client.png)
または、実行構成の編集ダイアログ ( ) から JavaScript デバッグ構成を作成し、構成を個別に起動します。
2 つの実行 / デバッグ構成を作成する
実行ウィジェットのリストから、JavaScript デバッグ構成と一緒に起動する Node.js 実行構成を選択します。次に、
をクリックし、メニューから編集を選択します。
または、Node.js 実行 / デバッグ構成を作成するの説明に従って、新しい Node.js 実行構成を作成します。
開いたダイアログには、選択した Node.js 実行 / デバッグ構成の設定が表示されます。ブラウザー / Live Edit タブに切り替えます。
ブラウザー / Live Edit タブで、デバッグセッションを起動したときにブラウザーを自動的に起動するには、起動後を選択します。下のフィールドに、アプリケーションを開く URL アドレスを入力します。
起動後チェックボックスの隣のリストから使用するブラウザーを選択してください。
システムデフォルトブラウザーを使用するには、デフォルトを選択します。
カスタムブラウザーを使用するには、リストからブラウザーを選択します。JavaScript クライアント側コードのデバッグは、Google Chrome(英語) およびその他の Chromium ベースのブラウザー(英語)でのみサポートされていることに注意してください。
ブラウザーを構成するには、
をクリックし、表示される Web ブラウザーとプレビューダイアログで設定を調整します。詳細については、「ウェブブラウザー」を参照してください。
JavaScript デバッガーを使用するチェックボックスを選択します。
サーバーとクライアントのコードをデバッグするためのセッションを開始する
実行ウィジェットのリストから、変更された Node.js 実行構成を選択し、その横にある
をクリックします。
開いたデバッグツールウィンドウには、Node.js 実行 / デバッグ構成のタブと Javascript デバッグ実行 / デバッグ構成のタブの 2 つのタブがあります。どちらのタブがアクティブになるかは、最初のヒットブレークポイントの場所によって異なります。
デバッグセッションを続行します。ブレークポイントをステップ実行し、フレームを切り替え、オンザフライで値を変更し、中断されたプログラムを調べ、式を評価し、ウォッチを設定します。
ブラウザーが開いたら、コードの実行をトリガーする手順を実行します。例: アプリケーションの開始ページからブラウザー内の別のページに移動します。
クライアント側コードの最初のブレークポイントに到達すると、アプリケーションが停止し、ブラウザーのページが再読み込みされ、デバッグツールウィンドウのフォーカスが JavaScript デバッグ構成のタブに移動します。
デバッグセッションを続行します。ブレークポイントをステップ実行し、フレームを切り替え、オンザフライで値を変更し、中断されたプログラムを調べ、式を評価し、ウォッチを設定します。
関連ページ:
![](https://resources.jetbrains.com/help/img/idea/2024.1/ws_node_run_app_with_rc.png)
Node.js の実行とデバッグ
IntelliJ IDEA は、Node.js アプリケーションの実行とデバッグを支援します。IntelliJ IDEA から起動し、すでに実行中のアプリケーションにアタッチするアプリケーションをデバッグできます。始める前に:JavaScript と TypeScript、JavaScript デバッガー、Node.js に必要なプラグインが設定 | プラグインページのインストール済みタブで有効になっていることを確認します。詳細については、プラグインのマッピングを参照してください。Node.js...
![](https://resources.jetbrains.com/help/img/idea/2024.1/external-tools-create-dialog.png)
外部ツール
サードパーティのコマンドラインアプリケーションを外部ツールとして構成して、IntelliJ IDEA から実行します。例: ワークフローでは、特定のスクリプト、コードジェネレーター、アナライザー、プリプロセッサーまたはポストプロセッサー、データベースユーティリティなどの実行が必要になる場合があります。外部ツールとして構成することにより、IntelliJ IDEA は専用のアクションを提供します。これは、メインメニューや特定のコンテキストメニューから実行したり、ショートカットを割り当てたり、特定の...
![](https://pleiades.io/icons/idea.png)
プログラムのステップスルー
ステップは、プログラムの段階的な実行を制御するプロセスです。IntelliJ IDEA は、戦略に応じて使用される一連のステップアクションを提供します(たとえば、次の行に直接移動するか、途中で呼び出されたメソッドを入力する必要があるかなど)。ステップボタンは、デバッグウィンドウのツールバーにあります。ステップオーバー:現在のコード行をステップオーバーし、ハイライトされた行にメソッド呼び出しが含まれている場合でも、次の行に移動します。メソッドの実装はスキップされ、呼び出し元メソッドの次の行に直接...
![](https://resources.jetbrains.com/help/img/idea/2024.1/debug_examining_frames_tab.png)
中断されたプログラムを調べる
デバッガーセッションが開始されると、デバッグツールウィンドウが表示され、次のいずれかが発生するまでプログラムが正常に実行されます。ブレークポイントがヒットしました、プログラムを手動で一時停止する、その後、プログラムは中断され、現在の状態を調べたり、実行を制御したり、実行時にさまざまなシナリオをテストしたりできます。フレームを調べる:プログラムの状態はフレームで表されます。プログラムが一時停止すると、現在のフレームスタックがデバッグツールウィンドウのフレームタブに表示されます。フレームはアクティ
![](https://resources.jetbrains.com/help/img/idea/2024.1/ws_node_multiprocess.png)
マルチプロセスデバッグ
IntelliJ IDEA を使用すると、child_process.fork() メソッドまたはクラスターモジュールによって起動される追加の Node.js プロセスをデバッグできます。このようなプロセスは、デバッグツールウィンドウのデバッガータブのフレームペインにスレッドとして表示されます。デバッグするプロセスにブレークポイントを設定します。Node.js の実行とデバッグの説明に従って、Node.js 実行 / デバッグ構成を作成します。ツールバーの実行 / デバッグ構成を選択リストから、新しく...