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

最低限、上記の３箇所を修正していますが、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が用意されます。)

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

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のデバッグウィンドウを開き、左上のボタンを押下します。(VisualStudioCodeの下のバーがオレンジ色に変わるはずです)

さらに、開いているPHPファイルの行番号の左側をクリックして、ブレークポイントの設定をします。
ホバーすると赤くなるのでわかるかと思います。

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

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

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

以上で設定は基本的な設定は終わりです。
誤解している点や修正点などありましたら、ご指摘いただければと思います。

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

環境