Help us understand the problem. What is going on with this article?

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

More than 3 years have 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の欄に現在の変数の値も記載されているので、実行時点での処理を追いやすくなるかと思います。


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

u_d
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした