Edited at

VisualStudioCode + Vagrant + XdebugでPHPをリモートデバッグ

More than 1 year has passed since last update.

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の設定をしていきます。


/etc/php.d/15-xdebug.ini

; 628行目

xdebug.remote_autostart = 1

; 680行目
xdebug.remote_enable = 1

; 709行目(PHPサーバにリクエストを送る側のIPアドレスです。 $_SERVER['REMOTE_ADDR']で確認できます。
xdebug.remote_host = 192.168.33.1


最低限、上記の3箇所を修正していますが、xdebugにはこれ以外にも様々な設定がありますので、適宜設定してみると良いかと思います。


apache再起動

xdebugの設定が完了したら、apacheを再起動しましょう。

$ sudo systemctl restart httpd

これでVagrant上のPHP環境の準備はOKです。


VisualStudioCodeの設定


1. PHP Debugエクステンションをインストール

スクリーンショット 2017-06-13 1.23.38.png


2. 作業ディレクトリを開く

file → openで作業ファイルが含まれているディレクトリを開いてください。


3. デバッグウィンドウを開く

左側にあるメニューバーの虫のボタンをクリックしてください。


4. PHP Debugの設定をする

デバッグウィンドウを開いたら、左上に歯車マークがあります。

それをクリックすると、デバッグ言語を選択できるので、PHPを選択します。

PHPを選択すると、launch.jsonが開かれるので、それを修正していきます。

(作業ディレクトリに、.vscodeというディレクトリが作成され、その中にlaunch.jsonが用意されます。)

デフォルトでは以下のようになっているので、いくつか修正を加えていきます。

【修正前】


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
}
]
}

【修正後】


launch.json

{

"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ファイルを作ってみます。(ローカル・リモートどっちも)


text.php

$a = 1;

if ($a === 1) {
echo "Hello";
} else {
echo "World";
}

作成したら、VisualStudioCodeのデバッグウィンドウを開き、左上の:arrow_forward:ボタンを押下します。(VisualStudioCodeの下のバーがオレンジ色に変わるはずです)

さらに、開いているPHPファイルの行番号の左側をクリックして、ブレークポイントの設定をします。

ホバーすると赤くなるのでわかるかと思います。

スクリーンショット 2017-06-14 0.51.26.png

この状態でブラウザからPHPスクリプトを実行してみましょう。

うまく設定できていれば、設定したブレークポイントで処理が止まっているかと思います。

スクリーンショット 2017-06-14 1.09.26.png

左側のVARIABLESの欄に現在の変数の値も記載されているので、実行時点での処理を追いやすくなるかと思います。


以上で設定は基本的な設定は終わりです。

誤解している点や修正点などありましたら、ご指摘いただければと思います。