VSCodeでPHP+Vagrantのデバッグ環境を構築する

背景・動機

• デバッグ作業をする際にvar_dumpなどを使って出力していた。
• 場合によっては20個くらいvar_dumpするので、かなり非効率。
• マスターのソースコードに消し忘れたvar_dumpが混入している。

XDebug使えば？と言われて使ってみたらかなり便利で世界が変わったので、共有したいと思い投稿しました。

前提

• Vagrantで起動されたPHP環境がある。
• XDebugはインストール済み。
• VSCodeにPHP Debugプラグインがインストール済み。

手順

1. Vagrantのphp.iniファイルでXDebugを有効化
2. VSCodeのlaunch.jsonにデバッガの設定を追加
3. Chrome拡張をインストール
4. ブレークポイントをはる
5. デバッグモードにする
6. アプリケーションを起動

1. Vagrantのphp.iniファイルでXDebugを有効化

php.iniファイルに以下の設定を追記します。
追記後はservice httpd restartしましょう。

xdebug.remote_enable=1
xdebug.idekey="vscode"
xdebug.remote_host=192.168.33.1
xdebug.remote_port=9000
xdebug.remote_autostart=1
xdebug.remote_connect_back=1

xdebug.remote_log=/tmp/xdebug.log

2. VSCodeのlaunch.jsonにデバッガの設定を追加

VSCode左メニューのデバッグアイコンをクリックし、左上の歯車アイコンをクリックするとjsonファイルが開くので、以下のように追記します。

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Listen for XDebug",
      "type": "php",
      "request": "launch",
      "port": 9000,
      "serverSourceRoot": "/path/to/app",
      "localSourceRoot": "${workspaceRoot}"
    }
  ]
}

3. Chrome拡張をインストール

Xdebug helper

※対象のアプリケーションがWebAPIなどの場合は、GETパラメータにXDEBUG_SESSION_START=vscodeを追加することで、この手順を省略できます。

4. ブレークポイントをはる

• VSCode上で任意の行番号の左をクリック。

5. デバッグモードにする

• 左メニューの虫アイコンをクリックし、デバッグ右の▶︎をクリック。

6. アプリケーションを起動

• アプリケーションを起動すると、ブレークポイントをはった行で実行が止まり、変数の中身が一覧されます。

デバッガ便利なので是非使ってみてください。