実際の HTML DOM を表示する

設定で JavaScript and TypeScript バンドルプラグインが有効になっていることを確認します。 Ctrl+Alt+S を押して設定を開き、 プラグイン​ を選択します。 検索フィールドに JavaScript と TypeScript と入力します。 プラグインに関する詳細は、 プラグインの管理を参照してください。

JavaScript Debugger と Live Edit プラグインを 設定 | プラグイン ページで、 JetBrains Marketplace からプラグインをインストールするの説明に従ってインストールしてください。 プラグインは PyCharm Pro でのみ利用できます。

JavaScript デバッガーの構成 の説明に従って、組み込みデバッガーを構成します。

HTML、CSS、JavaScript コードに加えた変更を、ページを再ロードせずにブラウザーにすぐに表示するには、 ライブ編集機能をアクティブにします。 ライブ編集機能の詳細については、 HTML、CSS、JavaScript でのライブ編集 を参照してください。

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

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

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

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

構造 と テキスト のペインは相互に同期されています。 DOM構造のノードをクリックすると、PyCharm が テキスト ペインの内容をスクロールします。 ペインはブラウザーとも同期されています。DOM構造や テキスト ペインのノードをクリックすると、PyCharm がブラウザー内の対応する要素をハイライトします。

実行されたスクリプトのツリーを表示するには、 スクリプト タブを開きます。