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

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

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

始める前に

PhpStorm は、最も人気のある 2 つのツール、Xdebug(英語) と Zend デバッガー(英語)によるデバッグをサポートしています。これらのツールは、互いにブロックし合うため、同時に使用することはできません。この問題を回避するには、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 サーバーを使用してアプリケーションをローカルで実行するか、ローカルまたはリモートマシンで実行されている他の Web サーバーを利用できます。

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

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

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

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

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

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

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

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

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

ゼロコンフィギュレーションデバッグアプローチに従います。ブラウザーでは、PhpStorm デバッグブックマークレットまたはブラウザーのデバッグ拡張機能の 1 つを使用して、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 :）。

URL parameter for the Run/Debug configuration

トラブルシューティング

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 ブレークポイントを設定することができます。

2024 年 2 月 11 日

関連ページ：

Xdebug を構成する

Xdebug をダウンロード PHP バージョンと互換性のある Xdebug 拡張をダウンロードし、Xdebug インストールガイドの説明に従ってインストールします。事前構成された AMP (Apache、MySQL、PHP) パッケージを使用している場合は、Xdebug 拡張機能がすでにインストールされている可能性があります。パッケージに固有の手順を参照してください。Xdebug と PHP エンジンの統合アクティブな php.ini ファイルをエディターで開きます。デバッグエンジンが PhpStor...

Zend デバッガーの構成

Zend デバッガーをダウンロードしてインストールするお使いのオペレーティングシステムに対応した Zend デバッガーパッケージをダウンロードしてください。PHP のバージョンに対応するディレクトリ（php-7.0.x など）で ZendDebugger.so(UNIX) または ZendDebugger.dll(Windows) ファイルを見つけます。Web サーバーからアクセス可能な場所に Web サーバーにファイルをコピーします。Zend デバッガーと PHP インタープリターの統合を有効にするエ...

デバッグツールウィンドウ

デバッガーセッションを開始すると、デバッグツールウィンドウが開きます。このウィンドウを使用して、デバッガーセッションを制御し、プログラムデータ (フレーム、変数など) を表示および分析し、デバッガーアクションを実行します。デフォルトでは、プログラムがブレークポイントに到達したときにデバッグツールウィンドウが開き、セッションが終了しても非表示になりません。この動作を変更するには、ビルド、実行、デプロイ | デバッガー設定ページに移動し、ブレークポイントでデバッグウィンドウを表示するチェックボック...

ブレークポイント

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

デバッグ

このページを使用して、Xdebug と Zend デバッガーの動作を設定します。事前構成この領域には、デバッガーのインストール、デバッガーのクッキーを制御してデバッグセッションを開始 / 停止するを実行するブックマークレットの生成、およびゼロコンフィギュレーションデバッグの起動に関する簡単なガイドラインが示されています。外部接続この領域で、PhpStorm がホストから受信した接続、デプロイサーバー構成として登録されていないポートを介した接続をどのように処理するかを指定します。未登録のサーバー構...

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

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