JavaScript デバッガーの構成
JetBrains Rider は、client-side JavaScript コード用の組み込みデバッガーを提供します。デバッグセッションを開始すると、ビルトインデバッガーが自動的に起動します。
デバッグが正常に行われるようにするには、組み込みの Web サーバーポートを指定して、JetBrains Rider が他のデバッガーオプションに提案しているデフォルト設定を受け入れるだけで十分です。
始める前に
設定で JavaScript と TypeScript バンドルプラグインが有効になっていることを確認します。Ctrl+Alt+S を押して設定を開き、を選択します。インストール済みタブをクリックします。検索フィールドに JavaScript と TypeScript と入力します。プラグインの詳細については、プラグインのマッピングを参照してください。
設定で JavaScript デバッガーバンドルプラグインが有効になっていることを確認します。Ctrl+Alt+S を押して設定を開き、を選択します。インストール済みタブをクリックします。検索フィールドに JavaScript デバッガーと入力します。プラグインの詳細については、プラグインのマッピングを参照してください。
組み込みの Web サーバーポートを設定する
Ctrl+Alt+S を押して設定を開き、を選択します。
ビルトインサーバーエリアで、組み込み Web サーバーが実行されるポートを指定します。デフォルトでは、このポートは、JetBrains Rider がサービスからの接続を受け入れるデフォルトの JetBrains Rider ポート 63342 に設定されます。ポート番号は 1024 から始まる他の値に設定できます。
オプション
Ctrl+Alt+S を押して設定を開き、に移動します。外部接続を受け入れ可能または署名されていない要求を許可するのチェックボックスをそれぞれオフにして、他のコンピューターまたは JetBrains Rider の外部からの組み込みサーバー上のファイルへの呼び出しを抑制します。
ブレークポイントを削除する方法を選択します。デフォルト設定は左マウスボタンでクリックです。
Ctrl+Alt+S を押して設定を開き、に移動します。データビューページで、詳細なデバッガーオプションを構成します。インラインデバッグを有効または無効にしたり、オブジェクトの値と式の評価結果を含むツールヒントをいつ表示するかを指定したりします。
デフォルトの Chrome ユーザデータによるデバッグセッションの開始
デバッグセッションが、デフォルトのウィンドウではなくカスタム Chrome ユーザーデータ(英語)を使用して新しいウィンドウで開始されることに気づくかもしれません。その結果、ブックマーク、ブラウザーの履歴、拡張機能が欠落しているなど、ウィンドウの見た目が異常になり、開発エクスペリエンスが完全に損なわれてしまいます。これは、JetBrains Rider が Chrome デバッグプロトコル(英語)を使用し、--remote-debugging-port オプションを指定して Chrome を実行するために発生します。ただし、Chrome がすでに開始されている場合、同じユーザーデータを持つ新規または既存の Chrome インスタンスに対してデバッグポートを開くことはできません。Chrome デバッグプロトコルが使用される場合、JetBrains Rider は常にカスタムユーザーデータを使用して新しいウィンドウでデバッグセッションを開始します。
使い慣れたルックアンドフィールで新しい Chrome インスタンスを開くには、JetBrains Rider で Chrome を構成して、ユーザーデータから開始します。この場合、デバッグセッションを開始する前に、Chrome がまだユーザーデータで実行されていないことを必ず確認してください。そうしないと、JetBrains Rider はユーザーデータを使用して Chrome の別のインスタンスを起動しますが、デバッグポートを開くことができません。その結果、JetBrains Rider デバッガーは新しい Chrome インスタンスのアプリケーションへの接続に失敗し、デバッグセッションは開始されません。
JetBrains Rider の Chrome を構成して、Chrome ユーザーデータで開始する
マシンのどこに Chrome ユーザーデータ(英語)を保存してください。
Ctrl+Alt+S を押して設定を開き、を選択します。
新しい Chrome 構成を作成するには、
をクリックします。新しい項目がリストに表示されます。パスフィールドに、Chrome インストールフォルダーへのパスを指定します。新しい構成を選択し、編集ボタン (
) をクリックします。Chrome 設定ダイアログで、カスタムユーザーデータディレクトリを使用するチェックボックスを選択し、JetBrains Rider 設定でユーザーデータディレクトリ(英語)へのパスを指定します。
デフォルトの JetBrains Rider ブラウザーの選択に従って、Chrome ブラウザー構成のデフォルトをマークします。実行 / デバッグ構成の作成の場合は、ブラウザーリストから必要なブラウザーを選択することを忘れないでください。
関連ページ：
Chrome での JavaScript のデバッグ
JetBrains Rider は、client-sideJavaScript コード用の組み込みデバッガーを提供します。以下のビデオと手順では、このデバッガーの使用を開始するための基本的な手順を説明しています。始める前に：設定で JavaScript と TypeScript バンドルプラグインが有効になっていることを確認します。を押して設定を開き、を選択します。インストール済みタブをクリックします。検索フィールドに JavaScript と TypeScript と入力します。プラグインの詳細に...
プラグインのインストール
プラグインは JetBrains Rider のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。プラグイン設定を開くを押して設定を開き、を選択します。マーケットプレースタブを使用して、JetBrai...
デバッガー: データビュー
このページを使用して、データがデバッガーに表示される方法を管理します。共通のデバッガー設定：アルファベット順にソートするデバッグウィンドウの変数ペインの値をソートするには、このオプションを選択します。変数ビューで自動式を有効にする JetBrains Rider デバッガーに式を自動的に評価させ、対応する値をデバッグウィンドウの変数ペインに表示させる場合は、このオプションを選択します。デバッガーは、ブレークポイントのステートメントとそれに最も近い周囲のステートメントを分析して、などのソースコード...
対話型デバッガーコンソール
対話式のコンソールペインには、スタックトレースと、コードにログインしたすべてのものが表示されます（たとえば、を使用）。コンソールペインも read-eval-print ループ（REPL）なので、そこに JavaScript コードスニペットを実行して、現在デバッグしているページと対話できます。コンソールで JavaScript を実行する入力フィールドにでステートメントの入力を始めます。タイプするにつれて、JetBrains Rider は完成のための異形を提案します。該当する明細を選択してを...