実際の HTML DOM を表示する
クライアント側のコードをデバッグしている場合、デバッグツールウィンドウの要素タブには、実際のブラウザーページとその HTML DOM 構造(英語)を実装する HTML ソースコードが表示されます。
ブラウザーまたはエディターを介してページに加えられた変更は、要素タブにもすぐに反映されます。
現在のところ、この機能は Google Chrome(英語) でのみサポートされており、デバッグセッション中にのみサポートされています。
始める前に
JetBrains リポジトリからプラグインをインストールする説明に従って、設定 / 環境設定 | プラグインページでライブ編集プラグインをインストールして有効にします。
HTML、CSS、JavaScript でのライブ編集の詳細を参照してください。
実際のページの HTML ソースと DOM 構造を表示する
デバッグセッションを開始するには、JavaScript デバッグタイプの実行構成を作成し、ツールバーの
をクリックします。デバッグツールウィンドウに切り替えて、要素タブを開きます。このタブは、2 つの読み取り専用ペインで構成されています。
テキストペインには、ブラウザーで現在開いているページの HTML ソースコードが表示されます。ブラウザー内のページに変更が加えられると（アイコンをクリックするなど）、ペイン内のコードが適宜更新されます。
構造ペインには、テキストペインに HTML コードの DOM 構造が表示されます。
実行されたスクリプトのツリーを表示するには、スクリプトタブを開きます。
関連ページ：
プラグインを管理する
このサイトのメニューやアクション名表記は日本語です。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