VisualStudioCode と Xdebugを使って、ホストマシンからVagrant上のPHPをリモートでデバッグするための手順をまとめてみました。
環境
vagrant 1.9.5
CentOS7.3
PHP 7.1(remi-php71でインストール済み)
Xdebug 2.5.4
Xdebugをインストール
peclでもインストールできるらしいですが、今回はyumでインストールしてみます。
$ sudo yum --enablerepo=remi-php71 -y install php-pecl-xdebug
インストールできたか確認
$ php -i | grep xdebug
Additional .ini files parsed => /etc/php.d/15-xdebug.ini,
xdebug
xdebug support => enabled
:
省略
Xdebugの設定を変更
上記の方法でxdebugをインストールできたら、/etc/php.d/15-xdebug.ini というファイルができているので、そのファイルを修正してxdebugの設定をしていきます。
; 628行目
xdebug.remote_autostart = 1
; 680行目
xdebug.remote_enable = 1
; 709行目(PHPサーバにリクエストを送る側のIPアドレスです。 $_SERVER['REMOTE_ADDR']で確認できます。
xdebug.remote_host = 192.168.33.1
最低限、上記の３箇所を修正していますが、xdebugにはこれ以外にも様々な設定がありますので、適宜設定してみると良いかと思います。
apache再起動
xdebugの設定が完了したら、apacheを再起動しましょう。
$ sudo systemctl restart httpd
これでVagrant上のPHP環境の準備はOKです。
VisualStudioCodeの設定
1. PHP Debugエクステンションをインストール
2. 作業ディレクトリを開く
file → openで作業ファイルが含まれているディレクトリを開いてください。
3. デバッグウィンドウを開く
左側にあるメニューバーの虫のボタンをクリックしてください。
4. PHP Debugの設定をする
デバッグウィンドウを開いたら、左上に歯車マークがあります。
それをクリックすると、デバッグ言語を選択できるので、PHPを選択します。
PHPを選択すると、launch.jsonが開かれるので、それを修正していきます。
(作業ディレクトリに、.vscodeというディレクトリが作成され、その中にlaunch.jsonが用意されます。)
デフォルトでは以下のようになっているので、いくつか修正を加えていきます。
【修正前】
{
"version": "0.2.0",
"configurations": [
{
"name": "Listen for XDebug",
"type": "php",
"request": "launch",
"port": 9000
},
{
"name": "Launch currently open script",
"type": "php",
"request": "launch",
"program": "${file}",
"cwd": "${fileDirname}",
"port": 9000
}
]
}
【修正後】
{
"version": "0.2.0",
"configurations": [
{
"name": "Listen for XDebug",
"type": "php",
"request": "launch",
"port": 9000,
"serverSourceRoot": "/var/www/html",
"localSourceRoot": "${workspaceRoot}"
},
{
"name": "Launch currently open script",
"type": "php",
"request": "launch",
"program": "${file}",
"cwd": "${fileDirname}",
"port": 9000
}
]
}
変更点は2箇所で、configurationsノードの最初の1つ目のオブジェクトに
"serverSourceRoot": "/var/www/html"
と
"localSourceRoot": "${workspaceRoot}"
を追記しています。
serverSourceRootはvagrant上のサーバにある、デバッグ対象のPHPファイルを含むトップディレクトリとなります。
ここではドキュメントルートを設定していますが、ファイル構成によっては必ずしもドキュメントルートになるとは限りません。
localSourceRootはローカル環境にあるPHPファイルを含むトップディレクトリとなります。
${workspaceRoot} と指定していますが、これは手順2で開いた作業ディレクトリを表しています。
vagrantを使用していれば、Vagrantfileの設定でローカルとリモートのファイルを同期している方も多いと思いますので、そこで指定しているディレクトリを serverSourceRoot と localSourceRoot に指定しても良いかと思います。
以上で手順が整いましたので、実際に動かしてみましょう。
動かしてみる
Xdebugを使ったデバッグとして、ブレークポイントを使ったデバッグを試してみます。
まず、上のlaunch.jsonで指定したディレクトリ上にテスト用のphpファイルを作ってみます。(ローカル・リモートどっちも)
$a = 1;
if ($a === 1) {
echo "Hello";
} else {
echo "World";
}
作成したら、VisualStudioCodeのデバッグウィンドウを開き、左上の
ボタンを押下します。(VisualStudioCodeの下のバーがオレンジ色に変わるはずです)
さらに、開いているPHPファイルの行番号の左側をクリックして、ブレークポイントの設定をします。
ホバーすると赤くなるのでわかるかと思います。
この状態でブラウザからPHPスクリプトを実行してみましょう。
うまく設定できていれば、設定したブレークポイントで処理が止まっているかと思います。
左側のVARIABLESの欄に現在の変数の値も記載されているので、実行時点での処理を追いやすくなるかと思います。
以上で設定は基本的な設定は終わりです。
誤解している点や修正点などありましたら、ご指摘いただければと思います。