PhpStorm 2025.3 ヘルプ

Chrome での JavaScript のデバッグ

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

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

始める前に

  1. 設定で JavaScript and TypeScript バンドルプラグインが有効になっていることを確認します。Ctrl+Alt+S を押して設定を開き、プラグインを選択します。インストール済みタブをクリックします。検索フィールドに JavaScript and 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. エディターのコンテキストメニューまたは選択から、デバッグ <HTML_ ファイル名> を選択します。PhpStorm はデバッグ構成を生成し、それを通してデバッグセッションを開始します。ファイルがブラウザーで開き、デバッグツールウィンドウが表示されます。

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

サンプル

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' を選択します。

Start debugging session from the editor

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

Debugging session starts, the app opens in the browser

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

Restart debugging session

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

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

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

    Reload in Browser action

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

デバッグセッション中に、再実行ボタン (the Rerun button) をクリックすると、サブミットボタンを含む 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 デバッグの自動生成された 構成でデバッグセッションを開始します。

    New Terminal: the Start debugging in browser button

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Debug JavaScript on an external web server: uploaded sources on the remote host

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

    Debug JavaScript on an external web server: open Edit configurations dialog

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

    Create JavaScript Debug configuration

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

    URL to run your application

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

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

    Editor, main menu and the toolbar

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

マッピング

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

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

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

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

マッピングを構成する

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

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

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

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

The structure of local folders differs from the folder structure on the remote web server

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

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

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

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

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

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

    URL mapping

  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 ファイルがブラウザーで開き、デバッグツールウィンドウが開き、使用可能なすべてのワーカーを示すフレームリストが表示されます。

    Debugging Service Workers

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

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

PhpStorm で Chrome 拡張機能をデバッグするには、Node.js/Chrome への接続タイプの実行 / デバッグ構成を使用します。カスタム Chrome ユーザーデータプロファイル(英語)を使用して Chrome を起動する必要があることに注意してください。詳細については、推奨する Chrome ユーザーデータでデバッグセッションを開始するを参照してください。

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

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

    Open the Edit Configurations dialog

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

    Select the Attach to Node.js /Chrome configuration type

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

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

    Create an Attach to Node.js/Chrome run/debug configuration

  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 をクリックします。

    Select the Attach to Node.js/Chrome configuration

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

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

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

2025 年 12 月 17 日
JSDoc コメント 対話型デバッガーコンソール

関連ページ：

PHP と JavaScript コードを同時にデバッグする

Web アプリケーションは通常、PHP コードと JavaScript コードの両方で構成されます。PHP コードはサーバー側で実行され、JavaScript はブラウザーで実行されます。PhpStorm を使用すると、PHP コードを簡単にデバッグして、サーバーで何が起こっているかをインスペクションしたり、変数を変更したりすることができます。IDE から JavaScript デバッグセッションを開始することで、ブラウザーで実行されている JavaScript をデバッグすることもできます。こ...

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

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

JavaScript デバッガーの構成

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

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

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

ブレークポイント

ブレークポイントは、特定のポイントでプログラムの実行を一時停止する特別なマーカーです。これにより、プログラムの状態と動作を調べることができます。ブレークポイントは、たとえば、特定のコード行に到達したときにプログラムを一時停止するなどの単純なものから、追加の条件をチェックしたり、ログに書き込んだりするなどのより複雑なロジックを含むものまであります。ブレークポイントは、一度設定すると、一時的なブレークポイントを除き、明示的に削除するまでプロジェクト内に残ります。ブレークポイントの種類：PhpSto

プロジェクトツールウィンドウ

プロジェクトツールウィンドウを使用すると、さまざまな視点からプロジェクトを確認し、新しい項目 (ディレクトリ、ファイル、クラスなど) の作成、エディターでのファイルのオープン、必要なコードフラグメントへの移動などのさまざまなタスクを実行できます。このビューには、作成されたスクラッチファイル、クエリコンソール、拡張スクリプトを管理できるスクラッチとコンソールフォルダーも含まれています。ビュー：ツールウィンドウにはいくつかのビューがあります。プロジェクトビュー。このビューには、すべてのプロジェク...