IntelliJ IDEA 2024.1 ヘルプ

サーバー側とクライアント側のコードのデバッグ

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

または、実行構成の編集ダイアログ ( 実行 | 実行構成の編集 ) から JavaScript デバッグ構成を作成し、構成を個別に起動します。

2 つの実行 / デバッグ構成を作成する

  1. 実行ウィジェットのリストから、JavaScript デバッグ構成と一緒に起動する Node.js 実行構成を選択します。次に、the More button をクリックし、メニューから編集を選択します。

    Select a Node.js run/debug configuration from the Run widget

    または、Node.js 実行 / デバッグ構成を作成するの説明に従って、新しい Node.js 実行構成を作成します。

  2. 開いたダイアログには、選択した Node.js 実行 / デバッグ構成の設定が表示されます。ブラウザー / Live Edit タブに切り替えます。

    Run/Debug configurations: Node.js dialog, switch to the Browser/Live Edit tab
  3. ブラウザー / Live Edit タブで、デバッグセッションを起動したときにブラウザーを自動的に起動するには、起動後を選択します。下のフィールドに、アプリケーションを開く URL アドレスを入力します。

    起動後チェックボックスの隣のリストから使用するブラウザーを選択してください。

    • システムデフォルトブラウザーを使用するには、デフォルトを選択します。

    • カスタムブラウザーを使用するには、リストからブラウザーを選択します。JavaScript クライアント側コードのデバッグは、Google Chrome(英語) およびその他の Chromium ベースのブラウザー(英語)でのみサポートされていることに注意してください。

    • ブラウザーを構成するには、the Browse button をクリックし、表示される Web ブラウザーとプレビューダイアログで設定を調整します。詳細については、「ウェブブラウザー」を参照してください。

    JavaScript デバッガーを使用するチェックボックスを選択します。

    Node.js run/debug configuration: Browser/Live Edit tab

サーバーとクライアントのコードをデバッグするためのセッションを開始する

  1. 実行ウィジェットのリストから、変更された Node.js 実行構成を選択し、その横にある the Debug icon をクリックします。

    Start two run/debug configurations at once, select the main Node.js run/debug configuration
  2. 開いたデバッグツールウィンドウには、Node.js 実行 / デバッグ構成のタブと Javascript デバッグ実行 / デバッグ構成のタブの 2 つのタブがあります。どちらのタブがアクティブになるかは、最初のヒットブレークポイントの場所によって異なります。

    Debug tool window with two tabs

    デバッグセッションを続行します。ブレークポイントをステップ実行し、フレームを切り替え、オンザフライで値を変更し、中断されたプログラムを調べ式を評価しウォッチを設定します

  3. ブラウザーが開いたら、コードの実行をトリガーする手順を実行します。例: アプリケーションの開始ページからブラウザー内の別のページに移動します。

    Trigger app execution in the browser
  4. クライアント側コードの最初のブレークポイントに到達すると、アプリケーションが停止し、ブラウザーのページが再読み込みされ、デバッグツールウィンドウのフォーカスが JavaScript デバッグ構成のタブに移動します。

    The app is paused in the browser

    デバッグセッションを続行します。ブレークポイントをステップ実行し、フレームを切り替え、オンザフライで値を変更し、中断されたプログラムを調べ式を評価しウォッチを設定します

関連ページ:

Node.js の実行とデバッグ

IntelliJ IDEA は、Node.js アプリケーションの実行とデバッグを支援します。IntelliJ IDEA から起動し、すでに実行中のアプリケーションにアタッチするアプリケーションをデバッグできます。始める前に:JavaScript と TypeScript、JavaScript デバッガー、Node.js に必要なプラグインが設定 | プラグインページのインストール済みタブで有効になっていることを確認します。詳細については、プラグインのマッピングを参照してください。Node.js...

外部ツール

サードパーティのコマンドラインアプリケーションを外部ツールとして構成して、IntelliJ IDEA から実行します。例: ワークフローでは、特定のスクリプト、コードジェネレーター、アナライザー、プリプロセッサーまたはポストプロセッサー、データベースユーティリティなどの実行が必要になる場合があります。外部ツールとして構成することにより、IntelliJ IDEA は専用のアクションを提供します。これは、メインメニューや特定のコンテキストメニューから実行したり、ショートカットを割り当てたり、特定の...

プログラムのステップスルー

ステップは、プログラムの段階的な実行を制御するプロセスです。IntelliJ IDEA は、戦略に応じて使用される一連のステップアクションを提供します(たとえば、次の行に直接移動するか、途中で呼び出されたメソッドを入力する必要があるかなど)。ステップボタンは、デバッグウィンドウのツールバーにあります。ステップオーバー:現在のコード行をステップオーバーし、ハイライトされた行にメソッド呼び出しが含まれている場合でも、次の行に移動します。メソッドの実装はスキップされ、呼び出し元メソッドの次の行に直接...

中断されたプログラムを調べる

デバッガーセッションが開始されると、デバッグツールウィンドウが表示され、次のいずれかが発生するまでプログラムが正常に実行されます。ブレークポイントがヒットしました、プログラムを手動で一時停止する、その後、プログラムは中断され、現在の状態を調べたり、実行を制御したり、実行時にさまざまなシナリオをテストしたりできます。フレームを調べる:プログラムの状態はフレームで表されます。プログラムが一時停止すると、現在のフレームスタックがデバッグツールウィンドウのフレームタブに表示されます。フレームはアクティ

マルチプロセスデバッグ

IntelliJ IDEA を使用すると、child_process.fork() メソッドまたはクラスターモジュールによって起動される追加の Node.js プロセスをデバッグできます。このようなプロセスは、デバッグツールウィンドウのデバッガータブのフレームペインにスレッドとして表示されます。デバッグするプロセスにブレークポイントを設定します。Node.js の実行とデバッグの説明に従って、Node.js 実行 / デバッグ構成を作成します。ツールバーの実行 / デバッグ構成を選択リストから、新しく...