PhpStorm 2020.2 ヘルプ

実際の HTML DOM を表示する

クライアント側のコードをデバッグしている場合、デバッグツールウィンドウの要素タブには、実際のブラウザページとその HTML DOM 構造(英語)を実装する HTML ソースコードが表示されます。

ブラウザまたはエディターを介してページに加えられた変更は、要素タブにもすぐに反映されます。

現在のところ、この機能は Google Chrome(英語) でのみサポートされており、デバッグセッション中にのみサポートされています。

始める前に

HTML、CSS、および JavaScript でのライブ編集の詳細を参照してください。

実際のページの HTML ソースと DOM 構造を表示する

  1. デバッグセッションを開始するには、JavaScript デバッグタイプの実行構成を作成し、ツールバーのDebugをクリックします。

  2. デバッグツールウィンドウに切り替えて、要素タブを開きます。このタブは、2 つの読み取り専用ペインで構成されています。

    • テキストペインには、ブラウザで現在開いているページの HTML ソースコードが表示されます。ブラウザ内のページに変更が加えられると(アイコンをクリックするなど)、ペイン内のコードが適宜更新されます。

    • 構造ペインには、テキストペインに HTML コードの DOM 構造が表示されます。

    構造テキストのペインは互いに同期しています。DOM 構造内のノードをクリックすると、PhpStorm はテキストペインの内容をスクロールします。ペインはブラウザとも同期されます。DOM 構造内のノードまたはテキストペインでノードをクリックすると、PhpStorm はブラウザ内の対応する要素をハイライトします。
  3. 実行されたスクリプトのツリーを表示するには、スクリプトタブを開きます。

最終更新日 :