👻

WSL-Docker開発環境でVSCodeのXdebugの設定をする

2023/09/04に公開

PHPStormのDebugって使いにくい

関連記事:
WSLとJetbrains GatewayでPHPStormローカルリモート開発
PHP SPLの標準Interfaceを真剣に考える
assertEqualsを今すぐ捨て、assertSameを使うのです
PHPUnitには @testdox を使え

筆者は長年PHPStormを使っているが、
xdebugの設定になるといつもやるかどうか悩む。
設定が煩雑で分かりにくく、
設定終わっても反応がない上に理由もわからない。
稼働させても動いてるのか止まってるのかわからない。

ログを適当に出すのと手間が変わらないので、
ログで済ませたりする。
とはいえ、詳細を調べなきゃならないときはブレイクポイントを使いたい。

そこでVSCodeのデバッガーを使ってデバッグ作業はそちらでやっている。

その際、Docker環境だとちょっと追加しなきゃならなかったので、
そちらを記載する。

ヾ(・ω<)ノ" 三三三● ⅱⅲ コロコロ♪

------------------- ↓ 本題はここから ↓-------------------

準備

XDebugが動作していることが前提。
設定内容は以下の通り

xdebug.mode = debug,develop
xdebug.client_port = 9003
xdebug.client_host = host.docker.internal
xdebug.idekey = VSCODE
xdebug.start_with_request = true
xdebug.discover_client_host = true

XDebugが設定されているとWebのログに以下のログが無限に出ている

docker compose logs -f [webサーバーコンテナ]
  web-1  | NOTICE: PHP message: Xdebug: [Step Debug] Time-out connecting to debugging client, waited: 200 ms. Tried: xx.xx.xx.xx:9003 (from REMOTE_ADDR HTTP header), host.docker.internal:9003 (fallback through xdebug.client_host/xdebug.client_port) :-(

VSCode

VSCodeの設定

VSCodeの左メニューのRun and Debugを押下

Run and Debug

初回にcreate a lanunch.json fileよりDebug設定ファイルを作成する


Config

このファイルを開きconfiguration.name: Listen for Xdebug欄に以下の設定を追加する

 "hostname": "0.0.0.0",
 "pathMappings": {
   "/var/www/html": "${workspaceFolder}"
 },


Listen for Xdebug

設定が完了したのでデバッガを起動する

Webからアクセス

デバッガを起動した状態でlocalhostに普通にアクセスする。
上記ログのエラーが消えていたら接続成功

docker compose logs -f [webサーバーコンテナ]
  web-1  | - -  22/Aug/2023:08:08:11 +0900 "GET /index.php" 200

(^o^) エラーなくなった

Discussion