WebStorm 2020.1ヘルプ

実際のHTML DOMを表示する

クライアント側コードをデバッグしているとき、デバッグツールウィンドウの要素タブで実際のブラウザページとそのHTML DOM構造(英語)を実装するHTMLソースコードを表示できます。さらに、ブラウザーを介してページに加えられた変更は、すぐに要素タブに反映されます。エディターで行った変更も監視するには、HTML、CSS、およびJavaScriptでのライブ編集で説明されているライブ編集機能を有効にします。

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

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

  1. To start a debugging session, create a run configuration of the type JavaScript Debug and click Debug on the toolbar.

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

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

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

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

最終更新日: 2020年6月23日