PhpStorm 2020.3 ヘルプ

実際の 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. 実行されたスクリプトのツリーを表示するには、スクリプトタブを開きます。

関連ページ:

プラグインを管理する

このサイトのメニューやアクション名表記は日本語です。PhpStorm を日本語化するには、日本語言語パックのインストールを参照してください。プラグインは以下に示すように PhpStorm のコア機能を拡張します。バージョン管理システム、アプリケーションサーバー、およびその他のツールとの統合を提供する、さまざまな言語とフレームワークのコーディング支援サポートを追加する、ショートカットヒント、ライブプレビュー、ファイルウォッチャーなどで生産性を向上、コーディング演習と検証で新しいプログラミング言語を...

HTML、CSS、JavaScript でのライブ編集

ライブ編集機能を使用すると、HTML、CSS、または JavaScript コードに加えた変更は、ページを再ロードせずにブラウザーにすぐに表示されます。ライブ編集は、デバッグセッション中にのみ使用できます。詳細については、Chrome での JavaScript のデバッグを参照してください。ライブ編集は、HTML、CSS、または JavaScript を含むまたは生成する他のファイルタイプで機能します。Node.js アプリケーションのデバッグの場合、ライブ編集も使用できます。詳細については、...

Firefox で JavaScript をデバッグする

PhpStorm を使用すると、Firefox リモートデバッグ機能を使用して、Firefox バージョン 36 以降でクライアント側の JavaScript をデバッグできます。ただし、以下の理由から、Chromeまたは Chrome ファミリの他のブラウザーを使用することを強くお勧めします。Ph