PhpStorm 2026.3 Help

Chrome での JavaScript のデバッグ

PhpStorm は、 client-side JavaScript コード用の組み込みデバッガーを提供します。

以下の手順では、このデバッガーの使用を開始するための基本的な手順を説明します。

始める前に

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

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

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

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

組み込みサーバーで実行されているアプリケーションをデバッグする

PhpStorm には Web サーバーが内蔵されており、Web ブラウザーでアプリケーションをデバッグしたり、PhpStorm の内蔵ブラウザーでコードをプレビューしたりできます。 このサーバーは常に稼働しており、手動での設定は不要です。

デバッグを開始する

  1. 必要に応じて、JavaScript コードに ブレークポイントを設定します。

  2. デバッグするために、JavaScript を参照している HTML ファイルを開くか、 問題ツールウィンドウ で HTML ファイルを選択します。

  3. エディターのコンテキストメニューまたは選択から、 <名前> のデバッグ を選択します。 PhpStorm はデバッグ構成を生成し、それを通してデバッグセッションを開始します。 ファイルがブラウザーで開き、 デバッグツールウィンドウが表示されます。

  4. デバッグ ツールウィンドウで、通常どおり進めます: プログラムをステップ実行し、プログラムの実行を 一時停止して再開し、 中断時に調査し、コールスタックと変数を調べ、ウォッチを設定し、変数を評価し、 実際の HTML DOM を表示するなどです。

    ソースマップを無視して実際に実行されているコードをステップ実行するには、 ソースマップ無効化トグルボタン を デバッグ ツールウィンドウのツールバーで押してください。

Example

debug_from_run.html ファイルと debug_from_run.js ファイルで構成され、 debug_from_run.html が debug_from_run.js を参照する単純なアプリケーションがあるとします。

組み込みサーバーを使用してこのアプリケーションのデバッグを開始するには、 debug_from_run.js にブレークポイントを設定し、エディターで debug_from_run.html を開き、コンテキストメニューから デバッグ 'debug_from_run.html' を選択します。

エディターからデバッグセッションを開始する

PhpStorm は 実行 / デバッグ構成を自動的に作成し、デバッグセッションが開始します。

デバッグセッションが開始され、ブラウザーでアプリが開く

新しい実行 / デバッグ構成を再起動するには、リストからそれを選択し、 the Debug button をクリックします。

デバッグセッションを再開する

ブラウザーで現在のページを再ロードする

デバッグ ツールウィンドウの 再実行 ボタン (再実行ボタン) をクリックしてアプリケーションを再起動するほかに、 ブラウザーで再ロード アクションを使用して、現在移動しているページを再ロードすることもできます。 これは、Chrome の ページの再ロード機能 (Ctrl+R) と同じように機能します。

  • 現在のページを再ロードするには、ツールバーの the More icon をクリックし、 ブラウザーで再ロード (ブラウザーで再ロード) を選択します。

    ブラウザーで再ロードするアクション

以下の例は、2 つの HTML ページと JavaScript スクリプトで構成される単純なアプリケーションを示しています。 開始 home.html ページには サブミット ボタンがあり、これを押すと calculator.html ページが開き、 Calculator.js スクリプトの実行結果が表示されます。

デバッグセッション中に、 再実行 ボタン (再実行ボタン) をクリックすると、 サブミット ボタンを含む home.html ページが再ロードされます。 ブラウザーで再ロード ボタン (the Reload in Browser button) をクリックすると、 calculator.html ページが再ロードされ、以前のスクリプト出力がすべてクリアされ、デバッガーは Calculator.js の 1 行目に戻ります。

Reloading the current page in browser

開発モードでローカルホスト上で実行されているアプリケーションをデバッグする

アプリケーションが localhost 上の開発モードで実行されている場合、組み込みの ターミナル （Alt+F12）、 実行ツールウィンドウ 、または デバッグツールウィンドウからデバッグを開始できます。 Ctrl+Shift を押したまま、アプリケーションが実行されている URL をクリックしてください。

  1. コードに ブレークポイントを設定します。

  2. たとえば、npm スクリプトを使用して、アプリケーションを開発モードで起動します。

  3. 実行 ツールウィンドウまたは ターミナル には、アプリケーションが実行されている URL が表示されます。 Ctrl+Shift を押したまま、この URL リンクをクリックします。 PhpStorm は、タイプ JavaScript デバッグの自動生成された 構成でデバッグセッションを開始します。

    新しいターミナルから開発モードでアプリケーションを起動した場合は、リンクの横にある ブラウザーでデバッグを開始する ボタンをクリックするだけです。

    新しいターミナル: ブラウザーでデバッグを開始ボタン

    デフォルトでは、ボタンは表示されません。 ボタンを表示するには、 設定 ダイアログ（Ctrl+Alt+S ）を開き、 詳細設定 に移動して、 JavaScript and TypeScript 領域で ターミナルの localhost リンクに 'ブラウザでデバッグを開始' ボタンを表示する チェックボックスを選択します。

これは、 Vue.js、 Angular、 React、 Node.js アプリケーションのデバッグにも機能します。

リモート Web サーバー上で実行されているアプリケーションをデバッグする

外部の開発 Web サーバー上で実行されているアプリケーションのクライアント側 JavaScript をデバッグしたい場合がよくあります。

リモート Web サーバーとは何ですか？

PhpStorm では、現在のプロジェクトの外側に ドキュメントルートを持つサーバーはすべて リモートと呼ばれます。 このサーバーは実際には物理的なリモートホストまたはあなたのマシン上で実行されているかもしれません。

例: プロジェクトが C:/%instance%Projects/MyProject にあり、Web サーバーのドキュメントルートが C:/XAMPP/htdocs である場合、PhpStorm では、この Web サーバーは リモートです。

サーバー上のアプリケーションソースを PhpStorm プロジェクト内のローカルコピーと同期するにはどうすればよいですか？

リモートウェブサーバー上のアプリケーションをデバッグする場合は、そのソースのコピーを IntelliJ IDEA プロジェクト内に用意する必要があります。 ローカルソースとリモートソースを同期させるには、 リモートサーバー構成を作成する と Web サーバーに接続する説明に 従ってデプロイ構成を作成します。

リモート Web サーバーでアプリケーションをデバッグする

  1. 必要に応じて、JavaScript コードに ブレークポイントを設定します。

  2. JavaScript Debug タイプの実行 / デバッグ構成を作成します。

    実行 | 実行構成の編集 に移動し、 実行構成の編集 ダイアログで、開いた 実行構成の編集 ダイアログで、ツールバーの 追加 ボタン (追加ボタン) をクリックし、リストから JavaScript Debug を選択します。

  3. 開いた 実行/デバッグ構成：JavaScript デバッグダイアログで、アプリケーションが実行されている URL アドレスを指定します。 この URL アドレスは、 Web サーバールート URL と、 サーバーアクセス構成に従って、Web サーバーのドキュメントルートを基準とした HTML ファイルへのパスを連結したものである必要があります。 詳細については、「デプロイ 」を参照してください。

    OK をクリックして構成設定を保存します。

  4. ツールバーの 実行 / デバッグ構成を選択 リストで新しく作成した構成を選択し、 デバッグ ボタン Start the debugger をクリックします。 実行構成で指定された HTML ファイルが選択したブラウザーで開き、 デバッグツールウィンドウが表示されます。

  5. デバッグ ツールウィンドウで、通常どおり進めます: プログラムをステップ実行し、プログラムの実行を 一時停止して再開し、 中断時に調査し、コールスタックと変数を調べ、ウォッチを設定し、変数を評価し、 実際の HTML DOM を表示するなどです。

    ソースマップを無視して実際に実行されているコードをステップ実行するには、 ソースマップ無効化トグルボタン を デバッグ ツールウィンドウのツールバーで押してください。

サンプル: マッピングなしでデバッグする

次のような単純なアプリケーションがあり、 index.html ファイルと App.js ファイルで構成され、 index.html が App.js を参照します。

  1. 次に、単純なアプリケーションをローカル Web サーバーにデプロイしましょう (デプロイ を参照して下さい)。 次の例では、Apache です。

    外部 Web サーバーで JavaScript をデバッグする: リモートホストにアップロードされたソース

  2. この例のように Nginx や Apache などのローカル Web サーバーを使用する場合、または Web サーバーがリモートホスト上にある場合は、JavaScript デバッガーを起動するための実行 / デバッグ構成を作成する必要があります。 これを行うには、PhpStorm ウィンドウの右上隅にあるリストをクリックして 実行構成の編集 を選択します。 あるいは、メインメニューから 実行 | 実行構成の編集 を選択します。

    外部 Web サーバーで JavaScript をデバッグする: 構成の編集を開くダイアログ

    実行 / デバッグ構成 ダイアログで、 をクリックし、リストから JavaScript Debug を選択します。

    JavaScript デバッグ構成を作成する

    実行中のアプリケーションの URL を指定します。この例では http://localhost:8888/MySimpleApp/index.html です。

    アプリケーションを実行するための URL

    この例では、ローカルプロジェクト構造とサーバー上のファイル構造は同じであるため、マッピングは必要ありません。

  3. これでデバッグを開始できます: PhpStorm ウィンドウの右上隅にあるリストから新しい実行 / デバッグ構成を選択し、 the Debug button をクリックします。

    エディター、メインメニュー、ツールバー

    デバッグ ツールウィンドウで、通常どおり進めます: プログラムをステップ実行し、プログラムの実行を 一時停止して再開し、 中断時に調査し、コールスタックと変数を調べ、ウォッチを設定し、変数を評価し、 実際の HTML DOM を表示するなどです。

    ソースマップを無視して実際に実行されているコードをステップ実行するには、 ソースマップ無効化トグルボタン を デバッグ ツールウィンドウのツールバーで押してください。

マッピング

マッピングは、Web サーバー上のファイルとそのローカルコピー間の対応を設定します。 マッピングが必要です:

  • アプリケーションが リモート Web サーバーにデプロイされて実行されているとき。

  • プロジェクトルートに加えていくつかのリソースルートフォルダーを定義した場合。

PhpStorm は、 デプロイ構成から、またはファイル名とスクリプト名と内容に基づいてパスマッピングを推測しようとします。 ただし、アプリケーション構造が複雑な場合は、パスマッピングを手動で指定する必要があります。

マッピングを構成する

  1. アプリケーションのデバッグの説明に従って、タイプ JavaScript デバッグのデバッグ構成を作成します。

  2. ローカルファイルのリモート URL 領域で、現在使用されている デプロイ構成に従って、ファイルとフォルダーをサーバー上のファイルとフォルダーの URL アドレスにマップします。 ローカルフォルダーをサーバー上のフォルダーにマップし、URL アドレスにアクセスしてアクセスするを参照してください。

サンプル: マッピングを使用してデバッグする

何らかの理由で、アプリケーションのフォルダー構造を 前の例から変更し、 index.html と App.js を別のフォルダー src に移動することにしたとします。

ローカルフォルダーの構造は、リモート Web サーバー上のフォルダー構造とは異なります

ローカルソースと Web サーバー上のアプリケーションは構造が異なるため、デバッガーはローカルソースと実際に実行されるコードを同期できません。

この問題を解決するには、アプリケーションルートの URL アドレスを src フォルダーにマップしましょう。

  1. 上記の説明に従って、実行 / デバッグ構成の作成を開始します。

  2. 実行 / デバッグ構成 ダイアログで、 ローカルファイルのリモート URL 領域の をクリックします。

  3. 開いたダイアログで、 MySimpleApp の src フォルダーを選択します。

  4. リモート URL フィールドにアプリケーションの URL アドレスを入力します、この例では http://localhost:8888/MySimpleApp です

    URL マッピング

  5. 実行 / デバッグ構成を保存し、 上記の説明に従って起動します。

その他のデバッグ例については、WebStorm ブログの投稿 React アプリケーションのデバッグ(英語)および Angular アプリケーションのデバッグ(英語)を参照してください。

Code with Me セッションでデバッグ

一緒にコードセッション中にデバッグを開始することもできます。 ホストとして操作するか クライアントとして操作するかに関係なく、デバッグセッションを開始した側でブラウザーが開きます。

非同期コードをデバッグする

PhpStorm は非同期のクライアントサイド JavaScript コードのデバッグをサポートします。 PhpStorm は非同期コード内のブレークポイントを認識し、停止して、そのようなコードにステップインすることを可能にします。 非同期関数内のブレークポイントがヒットするか、非同期コードにステップインするとすぐに、新しい要素 Async call from <caller> が デバッガー タブの フレーム ペインに追加されます。 PhpStorm は、呼び出し元と非同期アクションの開始までの全経路を含む、完全な呼び出しスタックを表示します。

Debugging asynchronous JavaScript code

上の例では、デバッガーは line3(ブレークポイント) で停止し、次に line5(ブレークポイント) で停止します。 ステップイン をクリックすると、デバッガーは行 5 (function 上) で停止し、その後行 6 に移動します。

非同期デバッグモードは、デフォルトでオンになっています。 非同期スタックトレースを無効にするには、 レジストリの js.debugger.async.call.stack.depth を 0 に設定します。

ワーカーをデバッグする

PhpStorm は サービスワーカー(英語)と Web ワーカーのデバッグをサポートします。 PhpStorm は各 ワーカーのブレークポイントを認識し、そのデバッグデータを デバッグツールウィンドウの デバッガー タブの フレーム ペインに個別のスレッドとして表示します。

PhpStorm は 専用のワーカーのみをデバッグできることに注意してください。現在、 共有ワーカーのデバッグはサポートされていません。

  1. デバッグする ワーカーに ブレークポイントを設定します。

  2. サービスワーカーを使用している場合は、 デバッガー ページ（設定 | ビルド、実行、デプロイ | デバッガー ）で 署名されていない要求を許可する チェックボックスが選択されていることを確認してください。 そうし ないと、デバッグセッション中にサービスワーカーが使用できなくなる可能性があります。

  3. 外部 Web サーバー上で実行されているクライアント側の JavaScript のデバッグで前述したように、タイプ JavaScript デバッグのデバッグ構成を作成します。

  4. ツールバーの 実行 ウィジェットリストから、新しく作成した 構成を選択し、その横にある the Debug button をクリックします。

    実行構成で指定された HTML ファイルがブラウザーで開き、 デバッグツールウィンドウが開き、使用可能なすべての ワーカーを示す フレーム リストが表示されます。

    デバッグサービスワーカー

    ワーカーのデータ（変数、ウォッチなど）を調べるには、リストでそのスレッドを選択し、 変数 ペインと ウォッチ ペインでそのデータを表示します。 別の ワーカーを選択すると、それに応じてペインの内容が更新されます。

Chrome 拡張機能をデバッグする

IntelliJ IDEA では、 Attach to Node.js/Chrome タイプの実行/デバッグ構成を使用して Chrome 拡張機能をデバッグできます。 Chrome を カスタム Chrome ユーザーデータプロファイルで起動する必要があります。詳しくは 推奨する Chrome ユーザーデータでデバッグセッションを開始する を参照してください。

Node.js/Chrome 実行 / デバッグ構成へのアタッチを作成する

  1. 実行 | 実行構成の編集 に進みます。 または、ツールバーの 実行 ウィジェットから 実行構成の編集 を選択します。

    構成の編集を開くダイアログ

    開いた 実行構成の編集 ダイアログで、ツールバーの 追加 ボタン (追加ボタン) をクリックし、リストから Node.js/Chrome への接続 を選択します。

    Node.js/Chrome 構成タイプにアタッチを選択する

    実行 / デバッグ構成: Node.js/Chrome への接続ダイアログが開きます。

  2. 構成名を指定し、事前定義されたホストとポートの値 localhost:9229 を受け入れます。

    Node.js/Chrome 実行 / デバッグ構成へのアタッチを作成する

  3. 適用 と OK をクリックして設定を保存し、ダイアログを終了します。

Chrome を実行して拡張機能をロードする

  1. コマンドラインから Chrome を実行する(英語)を使用して、リモートデバッグポートと Chrome ユーザーデータディレクトリ(英語)を指定します。

    コマンドライン シェルまたは組み込みの ターミナル （Alt+F12 ）を開き、次のように入力します：

    <path_to_chrome_executable> --remote-debugging-port=<port_specified_in_run_configuration> --user-data-dir=<your_Chrome_user_data_directory>

  2. 開いた Chrome ウィンドウに 解凍した拡張機能をロードする(英語)を入力します。

デバッグを開始する

  1. 必要に応じて ブレークポイントを設定します。

  2. ツールバーの 実行 ウィジェットリストから、新しく作成した Node.js/Chrome への接続 構成を選択し、その横にある the Debug button をクリックします。

    Node.js/Chrome 構成へのアタッチを選択する

    デバッグツールウィンドウが開きます。

  3. 拡張機能がロードされている Chrome タブに移動します。

  4. PhpStorm に切り替えます。 デバッグ ツールウィンドウで、 ブレークポイントをステップスルーし、フレームを切り替え、値をオンザフライで変更し、 中断されたプログラムを調べ、式を 評価し、 ウォッチを設定します。

2026 年 11 月 9 日
JSDoc コメント対話型デバッガーコンソール