第17回 VSCodeのインストールとPHPのデバッグ

公開日：2020-10-01 更新日：2020-10-15

1. 概要

VSCode のインストールと、VSCode で PHP ファイルをデバッグを行います。

2. 動画



3. xdebug のインストール

パッケージの確認
dnf module list | grep xdebug  -> なし。
dnf list        | grep xdebug  -> php-pecl-xdebug.x86_64

インストール
dnf install php-pecl-xdebug

4. xdebug.so のパスの確認

rpm -ql php-pecl-xdebug | grep xdebug.so

結果。以下のパスを php.ini の zend_extension で指定します。
/usr/lib64/php/modules/xdebug.so

5. php.ini の修正

php.ini のパスの確認
php -i | grep php.ini
-> /etc/php.ini        ※ブラウザに phpinfo() を表示して確認するのが正確。

php.ini の最後に以下を追加
remote_host のIPアドレスは、VMのホスト側(Windows)のものを指定します。
remote_port のポート番号も同じです。
VM(CentOS)からVMのホスト(Windows)に接続するため、
VMのファイヤーウォールの設定は不要です。
[XDebug]
zend_extension=/usr/lib64/php/modules/xdebug.so
xdebug.remote_enable = On
xdebug.remote_autostart = On
xdebug.remote_handler = "dbgp"
xdebug.remote_host = "192.168.233.129"
xdebug.remote_mode = "req"
xdebug.remote_port = 9000

nginx と php-fpm を再起動
systemctl restart nginx
systemctl restart php-fpm

6. ネットワークドライブの割り当て

エクスプローラーで VM の共有フォルダにアクセスする。
\\192.168.233.131\html

エクスプローラーで「PC」の上で右クリックして、
「ネットワークドライブの割り当て」をクリックする。
フォルダのパスには、上記共有フォルダのパスを指定する。

これで VM の共有フォルダを、ローカルのドライブとして扱えます。

7. VS Code のインストール

公式サイトからインストーラをダウンロードして実行する。
https://code.visualstudio.com/

インストール後に VS Code を起動して、
左側の Extensions で
Japanese Language Pack for Visual Studio Code
と
PHP Debug
を検索してインストールする。

言語を選択するには、
Ctrl + Shift + P を押下、
画面上部中央に config と入力、
リストの Configure Display Language をクリック、
ja をクリック。

8. VS Code でネットワークドライブの html フォルダを開く

VS Code の左側の再生ボタンの「実行」をクリック、
「launch.json ファイルを作成します。」をクリック、
リストからPHP をクリック。

"name": "Listen for XDebug", がある { } の最後に以下を追加
"pathMappings" : {
  "/usr/share/nginx/html": "${workspaceRoot}"
}

9. デバッグ

ソースの左側をクリックしてブレークポイントを貼る。
VS Code で F5 を押してデバッグを開始する。
デバッグ対象の PHP にブラウザでアクセスする。
http://192.168.233.131/test.php

10. うまくトレースできない場合

Windows側のファイアウォールの設定の受信規則で、
code.exe をブロックする規則がないことを確認する。
ある場合は、規則を無効化する。または、接続を許可するに変更する。

Tag

New Article