Visual Studio Code+Vagrant+Xdebug

環境

  • ホスト
    • Ubuntu 16.04
    • PHP7.1.1
    • Visual Studio Code 1.13.0
    • Vagrant 1.9.1
    • ワークスペース:/home/maeda/workspace
  • ゲスト
    • CentOS 7
    • PHP 7.1.1
    • Apache 2.4
    • DocumentRoot: /var/www/html -> /home/vagrant/html/

ドキュメントルートは上のように/vagrant/htmlを丸ごとシンボリックリンクしてある。

ゲスト側

Xdebugをインストール


yum install php-xdebug --enbalerepo=remi-php71,remi,epel
Installed: php-pecl-xdebug.x86_64 0:2.5.4-1.el7.remi.7.1
Complete!

php.iniを編集。xdebug.iniも作成されてるが、そちらは触らずphp.iniで設定した。


xdebug.remote_remote_autostart = 1
xdebug.remote_port = 9001
xdebug.remote_log = /var/log/xdebug.log
xdebug.remote_host = 10.0.2.2

ホストのIPは、ゲストからホストへのアクセスになるので10.0.2.2になるみたい。

あとはVSCで左バーにある「lanch.jsonを開く」を押しファイルを作成し、以下を記述する。


{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for XDebug",
            "type": "php",
            "request": "launch",
            "port": 9001,
            "serverSourceRoot": "/home/vagrant/html",
            "localSourceRoot": "/home/maeda/workspace",
            "log": true
        }
    ]
}

localSourceRootは"localSourceRoot": "${workspaceRoot}"でいいのだが、上のように絶対パスでも指定できる。

また、最初に書いたように自分は/var/www/htmlのドキュメントルートが/home/vagrant/htmlのシンボリックリンクのため、serverSourceRoot: /var/www/htmlだとVSCがファイル本体を見つけらないため、実体の方をlanch.jsonに記述する必要がある。

設定が終わればF5を押せば準備ができ、ブラウザで開けばデバッグができる。

トラブル

通常は上のように設定は簡単なんだけども、自分の場合はハマってしまい解決に2日要した。…というのも、仮想ホストを設定しているとどうもリモートのXdebugが利用できないみたい。できるのかもしれないが、方法がわからなかった。

自分の場合、/etc.httpd/conf.d/vhost.confに仮想ホストの設定が記述してあり、Vagrantfileにはエイリアスがその数だけ記述されている。このうちvhost.confを一時無効に(リネームなど)すると動いてくれた。

おまけ:ホストのみでXdebug

Vagrantのゲストを使わず単に手元の環境でVSC+Xdebugを使う場合も書いとく。
VSCでは下記のワークスペースディレクトリを開いているものとする。

  • ワークスペース: /home/maeda/workspace
  • サーバ: PHPビルトインサーバ

サーバを起動する。現在のカレントディレクトリ(/home/maeda/workspace)がlocalhost:8000で閲覧できるようになる。


cd /home/maeda/worksoace
php -S localhost:8000

lanch.jsonは以下。この場合はVSCで開いているディレクトリが起点になるので、特別な設定は不要。多分デフォルトから触る必要はないはず。


{
    "name": "Listen for XDebug",
    "type": "php",
    "request": "launch",
    "port": 9001,
    "log": true
}

あとはVagrantのときと同じでサイドメニューからデバッガーを起動し、対象のページをブラウザ表示すればデバッグが行える。

コメントする




four × two =