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

Web アプリケーションは一般的に PHP コードと JavaScript コードの両方で構成されます。PHP コードはサーバー側で、JavaScript はブラウザーで実行されます。 PhpStorm を使えば、サーバー上で何が起きているかを確認したり、変数を修正したりといった PHP コードのデバッグが簡単に行えます。また、IDE から JavaScript デバッグセッションを開始することで、ブラウザー上で実行されている JavaScript もデバッグできます。

このチュートリアルでは、PhpStorm 内から PHP と JavaScript のコードを同時にデバッグする方法の概要を説明します。

始める前に

PhpStorm は、最も人気のあるツールである Xdebug と Zend Debugger でデバッグをサポートしています。これらのツールは、互いにブロックし合うため、同時に使用することはできません。この問題を回避するには、 Xdebug を構成するおよび Zend デバッガーの構成に従って、関連する PHP インタープリターの php.ini ファイルを更新する必要があります。

エディターでアクティブな php.ini ファイルを開きます:

設定ダイアログ (Ctrl+Alt+S) で、 PHP をクリックします。
表示される PHP ページで、 CLI インタープリターフィールドの横にあるをクリックします。
開いている CLI インタープリターダイアログで、構成ファイル読み取り専用フィールドにアクティブな php.ini ファイルへのパスが表示されます。エディターで開くをクリックします。

次に、 PhpStorm デバッグブックマークレットまたはブラウザーのデバッグ拡張機能のいずれかをインストールします。

受信デバッガー接続のリッスン

PhpStorm で、以下のいずれかの方法で受信デバッグ接続のリッスンを有効化します：

ツールバー / ステータスバーのをクリックします。
メインメニューで実行 | PHP デバッグ接続のリッスンを開始を選択します。

これにより、Web サーバーでデバッグセッションが開始されると PhpStorm が反応し、デバッグツールウィンドウが自動的に開きます。デバッグセッションを開始する前に、ブレークポイントが設定されているか、設定ダイアログ Ctrl+Alt+S のデバッグページで PHP スクリプトの最初の行で中断する。オプションが有効になっていることを確認してください。

JavaScript デバッガーを開始する

環境設定やアプリケーションの要件に応じて、PhpStorm のビルトインウェブサーバーを使ってアプリケーションをローカルで実行するか、ローカルまたはリモートマシンで動作している他のウェブサーバーを利用できます。

組み込みの Web サーバーを使用する

PhpStorm の JavaScript デバッガーは、エディターから、またはプロジェクトツールウィンドウからデバッグ | <ファイル名> コンテキストメニューコマンドを使って開始できます。選択したファイルが PHP ファイルの場合、2 つのエントリが使用可能になります。 JavaScript デバッガーを起動するでマークされた最初のものを選択することが重要です。

開始後は、JavaScript コードにブレークポイントを配置し、JavaScript デバッガーを使用することができます。

外部 Web サーバーを使用する

Apache や Nginx などのローカル Web サーバーを使用している場合、またはリモート Web サーバー、 Vagrantまたは Docker マシンで開発している場合は、実行 / デバッグ構成を使用して JavaScript デバッガーを起動できます。

実行 / デバッグ構成を作成する

以下のいずれかを行ってください：
- PhpStorm ツールバーで実行構成の編集を選択します
- メインメニューから実行 | 実行構成の編集を選択します。
開いた実行 / デバッグ構成ダイアログダイアログで、ツールバーのをクリックし、新しい JavaScript デバッグ構成を追加します。
Web サーバー上でデバッグしたいページへの完全な URL を入力してください。必要に応じて、PhpStorm がリモート URL を基準にしてローカルファイルを見つける場所を判断できるように、いくつかマッピングを指定します。これは、ローカルでリモートサーバー上に異なるプロジェクト構造がある場合にのみ必要です。 PhpStorm で PHP アプリケーションをデプロイしている場合、マッピングはデプロイ構成から再利用されます。

構成が作成されたら、PhpStorm ツールバーから JavaScript デバッグセッションを開始できます：

ブラウザーから PHP デバッグセッションを開始する

ゼロ構成デバッグアプローチに従います。ブラウザーでは、 PhpStorm デバッグブックマークレットまたはブラウザーのデバッグ拡張機能を使って PHP デバッグセッションを開始できます。これにより、PHP サーバーは PhpStorm に接続してデバッガーを開くよう指示されます。 IDE は、最初に必要なパスマッピングを提供するように要求する場合があることに注意してください。デバッガーを接続すると、JavaScript と PHP の両方を同時にデバッグできるようになります。 PhpStorm は必要に応じてデバッガーを切り替えます。

JavaScript と PHP デバッガーを同時に起動する

前の手順では、JavaScript デバッガーと PHP デバッガーを別々に起動しました。 Xdebug を使用する場合、 XDEBUG_SESSION_START URL パラメーターをサーバーに渡して、JavaScript デバッグと同時に PHP デバッグを開始できます。これは、カスタマイズされた実行 / デバッグ構成を使用して実行できます。実行 / デバッグ構成前のようにを作成し、 XDEBUG_SESSION_START=some-session-name URL パラメーターを必ず追加してください（例: ?XDEBUG_SESSION_START=phpstorm:）。

トラブルシューティング

PHP ファイルの JavaScript 部分にブレークポイントを配置することはできません

現在、1 つのファイルで PHP ブレークポイントと JavaScript ブレークポイントの両方を設定することはできません。例: 次のコードでは JavaScript ブレークポイントを設定できません:

            <?php
                // ...
            ?><!doctype html>
            <html lang="en">
                <head>
                    <script>
                        /* javascript code */
                    </script>
                </head>
                <body>
                </body>
            </html>
        
   

PHP と JavaScript コードを同時にデバッグできるようにするには、JavaScript コードを別の .js ファイルに移動し、HTML から参照します。

            <?php
                // ...
                ?><!doctype html>
            <html lang="en">
                <head>
                    <script src="index.js"></script>
                </head>
                <body>
                </body>
            </html>
        
   

その後、 php ファイルに PHP ブレークポイントを配置し、 js ファイルに JavaScript ブレークポイントを設定することができます。

2026 年 5 月 22 日