実際の HTML DOM を表示する
クライアント側のコードをデバッグしている場合、デバッグツールウィンドウの要素タブには、実際のブラウザページとその HTML DOM 構造(英語)を実装する HTML ソースコードが表示されます。
ブラウザまたはエディターを介してページに加えられた変更は、要素タブにもすぐに反映されます。
現在のところ、この機能は Google Chrome(英語) でのみサポートされており、デバッグセッション中にのみサポートされています。
始める前に
JetBrains リポジトリからプラグインをインストールする説明に従って、設定 / 環境設定 | プラグインページでライブ編集プラグインをインストールして有効にします。
HTML、CSS、および JavaScript でのライブ編集の詳細を参照してください。
実際のページの HTML ソースと DOM 構造を表示する
デバッグセッションを開始するには、JavaScript デバッグタイプの実行構成を作成し、ツールバーの
をクリックします。デバッグツールウィンドウに切り替えて、要素タブを開きます。このタブは、2 つの読み取り専用ペインで構成されています。
テキストペインには、ブラウザで現在開いているページの HTML ソースコードが表示されます。ブラウザ内のページに変更が加えられると（アイコンをクリックするなど）、ペイン内のコードが適宜更新されます。
構造ペインには、テキストペインに HTML コードの DOM 構造が表示されます。
実行されたスクリプトのツリーを表示するには、スクリプトタブを開きます。
関連ページ：
プラグインを管理する
プラグインは PhpStorm のコア機能を拡張します。彼ら：バージョン管理システム、アプリケーションサーバー、およびその他のツールとの統合を提供する、さまざまな言語とフレームワークのコーディング支援サポートを追加する、ショートカットヒント、ライブプレビュー、ファイルウォッチャーなどで生産性を向上、...
HTML、CSS、および JavaScript でのライブ編集
ライブ編集機能を使用すると、HTML、CSS、または JavaScript コードに加えた変更は、ページをリロードせずにブラウザーにすぐに表示されます。ライブ編集は、デバッグセッション中にのみ使用できます。詳細については、Chrome での JavaScript のデバッグを参照してください。ライブ...