実際の HTML DOM を表示する
クライアント側のコードをデバッグしている場合、 デバッグ ツールウィンドウの 要素 タブには、実際のブラウザーページとその 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、CSS、JavaScript でのライブ編集 を参照してください。
実際のページの HTML ソースと DOM 構造を表示する
デバッグセッションを開始するには、 タイプ JavaScript デバッグの実行構成を作成し、ツールバーの デバッグ ボタン (
) をクリックします。デバッグ ツールウィンドウに切り替えて、 要素 タブを開きます。 このタブは、2 つの読み取り専用ペインで構成されています。
テキスト ペインには、ブラウザーで現在開いているページの HTML ソースコードが表示されます。 ブラウザー内のページに変更が加えられると（アイコンをクリックするなど）、ペイン内のコードが適宜更新されます。
構造 ペインには、 テキスト ペインに HTML コードの DOM 構造が表示されます。
構造 と テキスト ペインは相互に同期されています。 DOM 構造のノードをクリックすると、PhpStorm が テキスト ペインのコンテンツをスクロールします。 ペインはブラウザーとも同期されます。DOM 構造または テキスト ペインのノードをクリックすると、PhpStorm がブラウザー内の対応する要素をハイライトします。
実行されたスクリプトのツリーを表示するには、 スクリプト タブを開きます。