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

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

```ini:/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エクステンションをインストール
![スクリーンショット 2017-06-13 1.23.38.png](https://qiita-image-store.s3.amazonaws.com/0/165247/269916ee-b296-8bf4-fca0-6e11d1153def.png)

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

#### 3. デバッグウィンドウを開く
左側にあるメニューバーの虫のボタンをクリックしてください。

#### 4. PHP Debugの設定をする
デバッグウィンドウを開いたら、左上に歯車マークがあります。
それをクリックすると、デバッグ言語を選択できるので、PHPを選択します。
PHPを選択すると、launch.jsonが開かれるので、それを修正していきます。
(作業ディレクトリに、.vscodeというディレクトリが作成され、その中にlaunch.jsonが用意されます。)

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

```js: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
        }
    ]
}
```

【修正後】

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

```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](https://qiita-image-store.s3.amazonaws.com/0/165247/e9488932-437e-6865-7df6-99512e6b9a5e.png)

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

うまく設定できていれば、設定したブレークポイントで処理が止まっているかと思います。
![スクリーンショット 2017-06-14 1.09.26.png](https://qiita-image-store.s3.amazonaws.com/0/165247/f96b311f-89fc-41b2-a494-307bcc71e656.png)

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

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