実際の HTML DOM を表示する
クライアント側のコードをデバッグしている場合、 デバッグ ツールウィンドウの 要素 タブには、実際のブラウザーページとそのを実装する HTML ソースコードが表示されます。
ブラウザーまたはエディターを介してページに加えられた変更は、 要素 タブにもすぐに反映されます。
現在、この機能は Google Chrome(英語) でのみ、デバッグセッション中にのみサポートされています。
始める前に
設定で JavaScript and TypeScript バンドルプラグインが有効になっていることを確認します。 Ctrl+Alt+S を押して設定を開き、 を選択します。 インストール済み タブをクリックします。 検索フィールドに JavaScript and TypeScript と入力します。 プラグインの詳細については、 プラグインの管理 を参照してください。
設定で JavaScript Debugger バンドルプラグインが有効になっていることを確認します。 Ctrl+Alt+S を押して設定を開き、 を選択します。 インストール済み タブをクリックします。 検索フィールドに JavaScript デバッガー と入力します。 プラグインの詳細については、 プラグインの管理 を参照してください。
JetBrains マーケットプレイスからプラグインをインストールする説明に従って、 設定 | プラグイン ページの Marketplace タブに ライブ編集プラグインをインストールして有効にします。
JavaScript デバッガーの構成 の説明に従って、組み込みデバッガーを構成します。
HTML、CSS、JavaScript コードに加えた変更を、ページを再ロードせずにブラウザーにすぐに表示するには、 ライブ編集機能をアクティブにします。 ライブ編集機能の詳細については、 HTML、CSS、JavaScript でのライブ編集 を参照してください。
実際のページの HTML ソースと DOM 構造を表示する
デバッグセッションを開始するには、タイプ JavaScript デバッグ の実行構成を作成し、ツールバーの デバッグ ボタン
をクリックします。デバッグ ツールウィンドウに切り替えて、 要素 タブを開きます。 このタブは、2 つの読み取り専用ペインで構成されています。
テキスト ペインには、ブラウザーで現在開いているページの HTML ソースコードが表示されます。 ブラウザー内のページに変更が加えられると（アイコンをクリックするなど）、ペイン内のコードが適宜更新されます。
構造 ペインには、 テキスト ペインに HTML コードの DOM 構造が表示されます。
構造 と テキスト ペインは相互に同期されています。 DOM 構造のノードをクリックすると、CLion が テキスト ペインの内容までスクロールします。 これらのペインはブラウザーとも同期されます。DOM 構造または テキスト ペインのノードをクリックすると、CLion が対応する要素をブラウザー内でハイライトします。
実行されたスクリプトのツリーを表示するには、 スクリプト タブを開きます。