PyCharm 2024.3 ヘルプ

実際の HTML DOM を表示する

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

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

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

始める前に

  1. 設定で JavaScript and TypeScript バンドルプラグインが有効になっていることを確認します。Ctrl+Alt+S を押して設定を開き、プラグインを選択します。インストール済みタブをクリックします。検索フィールドに JavaScript and TypeScript と入力します。プラグインの詳細については、プラグインのマッピングを参照してください。

  2. 設定で JavaScript Debugger バンドルプラグインが有効になっていることを確認します。Ctrl+Alt+S を押して設定を開き、プラグインを選択します。インストール済みタブをクリックします。検索フィールドに JavaScript Debugger と入力します。プラグインの詳細については、プラグインのマッピングを参照してください。

  3. JetBrains マーケットプレイスからプラグインをインストールする説明に従って、設定 | プラグインページのマーケットプレースタブにライブ編集プラグインをインストールして有効にします。

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

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

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

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

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

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

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

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

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

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

HTML、CSS、JavaScript でのライブ編集 カバレッジで未使用のコードを見つける

関連ページ：

プラグインのインストール

プラグインは PyCharm のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。プラグイン設定を開くを押して設定を開き、を選択します。マーケットプレースタブを使用して、JetBrains マーケット...

JavaScript デバッガーの構成

PyCharm は、client-sideJavaScript コード用の組み込みデバッガーを提供します。デバッグセッションを開始すると、ビルトインデバッガーが自動的に起動します。デバッグが正常に行われるようにするには、組み込みの Web サーバーポートを指定して、PyCharm が他のデバッガーオプションに提案しているデフォルト設定を受け入れるだけで十分です。始める前に設定で JavaScript and TypeScript バンドルプラグインが有効になっていることを確認します。を押して設定を...

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

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