JetBrains Rider 2024.1 ヘルプ

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

JetBrains Rider を使用すると、Node.js アプリケーションのサーバー側コードとクライアント側 JavaScript コードを一緒にデバッグできます。そのためには、Node.js 構成に加えて、JavaScript デバッグ構成を作成して起動する必要があります。

JetBrains Rider を使用すると、メインの 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 の実行とデバッグ

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

ブラウザーの構成

JetBrains Rider には、HTML ファイルの出力の実行、デバッグ、プレビュー中に IDE から自動的にインストールおよび起動できる最も一般的なブラウザーの事前定義リストが付属しています。JetBrains Rider は、標準の手順に従ってブラウザーをインストールすることを前提としており、各インストールに、ブラウザーの実行可能ファイルまたは macOS アプリケーションへのデフォルトパスを表すエイリアスを割り当てます。デフォルトリストのブラウザーに加えて、カスタムブラウザーのインス...

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

フレームを分析することで、中断されたアプリケーションの状態を調べることができます。コードがデバッグモードで実行されている場合、それを一時停止するには 2 つの方法があります。検査するコード内のブレークポイントの設定で、いずれかがヒットするまで待機します。でプログラムの実行を中断します。デバッガーは、一時停止した瞬間に実行中のステートメントを終了し、次に実行する必要のあるステートメントで停止します。一時停止状態では、現在の実行ポイント(次に実行されるステートメント)は、エディターの左側のガターにあ...

マルチプロセスデバッグ

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