Windows + PhpStorm + Docker + XdebugでのHTTPリクエストのデバッグ方法

VSCode では出来たことが PhpStorm だと上手く出来なかったので、その解消法です
Remote Development に慣れてるとハマりやすいと思います
PhpStorm に類似の機能は多分ないです

PhpStorm 編

確認環境

一応 Apache の上に乗っかった Laravel で確認してますがそこらへんの環境情報は端折ってます

Env Ver
Windows 11 Pro
PhpStorm 2021.3.2
Docker 20.10.11
docker-compose 1.29.2
PHP 8.1.1
Xdebug 3.1.3

Dockerfile

PHP が入ってる Dockerfile に以下を追記
出来ることならヒアドキュメントで書きたい

RUN pecl install xdebug
RUN docker-php-ext-enable xdebug
RUN echo "zend_extension=xdebug" > /usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini
RUN echo "xdebug.mode=develop,coverage,debug,trace" >> /usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini
RUN echo "xdebug.start_with_request=trigger" >> /usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini
RUN echo "xdebug.client_host=host.docker.internal" >> /usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini
RUN echo "xdebug.trigger_value=StartProfileForMe" >> /usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini

Docker の設定

適当に Docker を追加してコンテナとローカルのパスをマッピング

f:id:lycolia:20220412031939p:plain

PHP インタプリタの設定

CLI インタプリタを Docker に向けて設定します
パスマッピングは勝手にやってくれた気がする

f:id:lycolia:20220412031948p:plain

デバッグ

HTTP リクエスト

受話器みたいなところを押して curl なり POSTMAN なりブラウザなりに XDEBUG_TRIGGER=StartProfileForMe という Cookie を刺してリクエストするとブレークにかかります
初回だけパスマッピングを構成するダイアログが出てくるのでよしなに処理します

f:id:lycolia:20220412031956p:plain

PHPUnit

デバッグ構成を作ってデバッグするだけ

f:id:lycolia:20220412032006p:plain

おまけの VSCode 編

VSCode だとネイティブに動くので Docker の存在を考えなくて済むのは楽ですが、IDE としての性能は PHP Intelephense に課金しても PhpStorm には劣るので微妙なところ(静的解析に問題がある

確認環境

PhpStorm と被る部分は端折ってます

Env Ver
VSCode 1.64.2
ms-vscode-remote.remote-containers 0.217.4
robberphex.php-debug 1.14.0

Dockerfile

PHP が入ってる Dockerfile に以下を追記
PhpStorm との違いは xdebug.client_host が不要なところです
(PhpStorm でも CLI Debug だとなくていけるっぽいのでややこしい)

RUN pecl install xdebug
RUN docker-php-ext-enable xdebug
RUN echo "zend_extension=xdebug" > /usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini
RUN echo "xdebug.mode=develop,coverage,debug,trace" >> /usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini
RUN echo "xdebug.start_with_request=trigger" >> /usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini
RUN echo "xdebug.trigger_value=StartProfileForMe" >> /usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini

launch.json

  • Listen for Xdebug
    • HTTP リクエスト用
  • PHPUnit
    • PHPUnit 用
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for Xdebug",
            "type": "php",
            "request": "launch",
            "port": 9003
        },
        {
            "name": "PHPUnit",
            "type": "php",
            "request": "launch",
            "program": "${workspaceFolder}/vendor/phpunit/phpunit/phpunit",
            "args": ["${file}"],
            "env": {
                "XDEBUG_TRIGGER": "StartProfileForMe"
            },
            "port": 9003
        }
    ]
}

デバッグ

PHP のいるコンテナに Attach Visual Studio Code して F5 押せばデバッグできます

あとがき

個人的に操作感は VSCode の方が好みなので使えるなら VSCode でいきたいのですが、今の所 PhpStorm には敵わないという感じなのが悲しい
まぁ JS/TS 用のエディタみたいなもんだし仕方がないですね…
ただ Git の GUI 周りは VSCode が圧倒的に好みなので、Git 操作するときだけ VSCode 使ってたりはします
しかし PhpStorm と VSCode を共存させるのは xdebug.client_host の向きの関係で微妙な感じですね…