実際の HTML DOM を表示する
クライアント側のコードをデバッグしている場合、デバッグツールウィンドウの要素タブには、実際のブラウザーページとその HTML DOM 構造(英語)を実装する HTML ソースコードが表示されます。
ブラウザーまたはエディターを介してページに加えられた変更は、要素タブにもすぐに反映されます。
現在のところ、この機能は Google Chrome(英語) でのみサポートされており、デバッグセッション中にのみサポートされています。
始める前に
JavaScript と TypeScript、JavaScript デバッガー、ライブ編集に必要なプラグインが設定 | プラグインページのインストール済みタブで有効になっていることを確認します。詳細については、プラグインのマッピングを参照してください。
JavaScript デバッガーの構成の説明に従って、組み込みデバッガーを構成します。
HTML、CSS、JavaScript コードに加えた変更を、ページを再ロードせずにブラウザーにすぐに表示するには、ライブ編集機能をアクティブにします。ライブ編集機能の詳細については、「HTML、CSS、JavaScript でのライブ編集」を参照してください。
HTML、CSS、JavaScript でのライブ編集の詳細を参照してください。
実際のページの HTML ソースと DOM 構造を表示する
デバッグセッションを開始するには、タイプ JavaScript デバッグの実行構成を作成し、ツールバーのデバッグボタン (
) をクリックします。デバッグツールウィンドウに切り替えて、要素タブを開きます。このタブは、2 つの読み取り専用ペインで構成されています。
テキストペインには、ブラウザーで現在開いているページの HTML ソースコードが表示されます。ブラウザー内のページに変更が加えられると（アイコンをクリックするなど）、ペイン内のコードが適宜更新されます。
構造ペインには、テキストペインに HTML コードの DOM 構造が表示されます。
構造とテキストのペインは互いに同期しています。DOM 構造内のノードをクリックすると、JetBrains Rider はテキストペインの内容をスクロールします。ペインはブラウザーとも同期されます。DOM 構造内のノードまたはテキストペインでノードをクリックすると、JetBrains Rider はブラウザー内の対応する要素をハイライトします。
実行されたスクリプトのツリーを表示するには、スクリプトタブを開きます。
関連ページ：
プラグインのインストール
プラグインは JetBrains Rider のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。プラグイン設定を開くを押して設定を開き、を選択します。マーケットプレースタブを使用して、JetBrai...
JavaScript デバッガーの構成
JetBrains Rider は、client-sideJavaScript コード用の組み込みデバッガーを提供します。デバッグセッションを開始すると、ビルトインデバッガーが自動的に起動します。デバッグが正常に行われるようにするには、組み込みの Web サーバーポートを指定して、JetBrains Rider が他のデバッガーオプションに提案しているデフォルト設定を受け入れるだけで十分です。始める前に設定で JavaScript と TypeScript バンドルプラグインが有効になっていることを...
HTML、CSS、JavaScript でのライブ編集
ライブ編集機能を使用すると、HTML、CSS、JavaScript コードに加えた変更は、ページを再ロードせずにブラウザーにすぐに表示されます。ライブ編集は、HTML、CSS、JavaScript を含む、または生成する他のファイルタイプに対して機能します。Node.js アプリケーションのデバッグのときにライブ編集を使用することもできます。詳細については、「Node.js アプリケーションでのライブ編集」を参照してください。デフォルトでは、ライブ編集は HTML および CSS ファイルに対し...