JavaScript デバッガーの構成
JetBrains Rider は、 クライアントサイドの JavaScript コード用に組み込みのデバッガーを提供します。 デバッグセッションを開始すると、ビルトインデバッガーが自動的に起動します。
デバッグが正常に行われるようにするには、組み込みの Web サーバーポートを指定し、JetBrains Rider が他のデバッガーオプションに提案するデフォルト設定を受け入れるだけで十分です。
始める前に
設定で JavaScript and TypeScript バンドルプラグインが有効になっていることを確認します。 Ctrl+Alt+S を押して設定を開き、 を選択します。 インストール済み タブをクリックします。 検索フィールドに JavaScript and TypeScript と入力します。 プラグインの詳細については、 プラグイン管理を参照してください。
設定で JavaScript Debugger バンドルプラグインが有効になっていることを確認します。 Ctrl+Alt+S を押して設定を開き、 を選択します。 インストール済み タブをクリックします。 検索フィールドに JavaScript デバッガー と入力します。 プラグインの詳細については、 プラグイン管理を参照してください。
組み込みの Web サーバーポートを設定する
JetBrains Rider には組み込みの Web サーバーがあり、Web ブラウザーでアプリケーションをデバッグしたり、JetBrains Rider に組み込まれているブラウザーでコードをプレビューしたりできます。 このサーバーは常に実行されており、手動による構成は必要ありません。 組み込みサーバーで実行中のアプリケーションのデバッグの詳細をご覧ください。
Ctrl+Alt+S を押して設定を開き、 を選択します。
ビルトインサーバー エリアで、組み込み Web サーバーが実行されるポートを指定します。 デフォルトでは、このポートは、JetBrains Rider がサービスからの接続を受け入れるデフォルトの JetBrains Rider ポート 63342 に設定されています。 ポート番号は 1024 から始まる他の値に設定できます。
デフォルトのデバッガー構成をカスタマイズする
呼び出しを抑制する
Ctrl+Alt+S を押して設定を開き、 に移動します。
外部接続を受け入れ可能(E) または 署名されていない要求を許可する(A) のチェックボックスをそれぞれオフにすることで、他のコンピューターや JetBrains Rider 外部から組み込みサーバー上のファイルへの呼び出しを抑制できます。
ブレークポイントを削除する方法を選択する
デフォルトでは、マウスの左ボタンをクリックすることでブレークポイントを切り替えることができます。 この動作を変更するには、以下の手順に従います。
Ctrl+Alt+S を押して設定を開き、 に移動します。
ブレークポイントの除去 領域で、適切なオプションを選択します。
スキップするスクリプトを指定する
デフォルトでは、デバッガーはライブラリ スクリプトのみをステップ実行しません。 除外リストを拡張するには：
Ctrl+Alt+S を押して設定を開き、 に移動します。
JavaScript 領域で、 スクリプトにステップインしない チェックボックスを選択し、
と 
を使用してスキップする URL アドレスを追加します。
拡張オプション
Ctrl+Alt+S を押して設定を開き、 に移動します。
インラインデバッグを有効または無効にしたり、オブジェクトの値や 式の評価結果を含むツールヒントをいつ表示するかを指定したりします。
Ctrl+Alt+S を押して設定を開き、 に移動します。
オブジェクトプロパティをオブジェクトノードに表示するかどうかを指定します。 表示する場合は、プロパティを指定します。 プロパティのリストを管理するには、
と を使用します。
推奨する Chrome ユーザーデータでデバッグセッションを開始する
デバッグセッションが、通常のウィンドウではなく、カスタム Chrome ユーザーデータ(英語)で新しいウィンドウで開始されることに気付くかもしれません。 その結果、ウィンドウの見た目が通常と異なり、たとえばブックマーク、ブラウザー履歴、拡張機能が表示されず、開発エクスペリエンスが損なわれます。 これは、JetBrains Rider が Chrome デバッグプロトコルを利用し、Chrome を --remote-debugging-port オプションで実行するために発生します。 ただし、Chrome がすでに起動している場合、同じユーザーデータディレクトリを持つ新規または既存の Chrome インスタンスに対してデバッグポートを開くことができません。 そのため、JetBrains Rider は常にカスタムユーザーデータディレクトリを持つ新しいウィンドウでデバッグセッションを開始します。
使い慣れたルックアンドフィールで新しい Chrome インスタンスを開くには、JetBrains Rider で Chrome を設定してユーザーデータディレクトリから開始するようにしてください。
JetBrains Rider で Chrome を設定して、推奨する Chrome ユーザーデータで起動する
お好みの Chrome ユーザーデータ(英語)を Chrome のデフォルトのユーザーデータディレクトリ(英語)とは異なる別のカスタムディレクトリ 形式でコンピューターに保存します。
Chrome 136 以降はデフォルトのユーザーディレクトリでのデバッグをサポートしていないため、お好みのユーザーデータを別のカスタムディレクトリに保存する必要があります。 詳しくは Chrome オフィシャル Web サイト(英語)を参照してください。
Ctrl+Alt+S を押して設定を開き、 を選択します。
新しい Chrome 構成を作成するには、
をクリックします。 新しい項目がリストに表示されます。 パス フィールドに、Chrome インストールフォルダーへのパスを指定します。新しい構成を選択し、 編集 ボタン (
) をクリックします。Chrome 設定 ダイアログで、 カスタムユーザーデータのディレクトリを使用する(U) チェックボックスを選択し、優先するユーザーデータを含むカスタムディレクトリへのパスを指定します。
複数の ユーザーデータプロファイル(英語)がある場合、それぞれが別々のサブディレクトリに保存されます。 プロファイルを使用するには、 コマンドラインオプション フィールドで以下のように指定します。
--profile-directory="<profile_to_use>"
デフォルトの JetBrains Rider ブラウザーの選択に記載されている通り、Chrome ブラウザー構成の デフォルトの設定を行ってください。 ブラウザー リストから必要なブラウザーを選択して、 実行/デバッグ構成を作成する際に忘れずに選択してください。