ラズパイ（Raspberry Pi 4）開発環境を作る-03【Xdebug / VSCode】

こんにちわ、PHPエンジニアのエンジニア婦人（@naho_osada）です。
私はPHPエンジニアとして8年～の経験があります。

ラズパイ（Raspberry Pi 4 Model B）を開発用のWebサーバーにしてしまう作戦です。

ここではPHPのデバッグ「Xdebug」がVSCodeでできるようにしていきます。

Xdebug2とXdebug3で記述の内容が大きく異なります。ここではXdebug3の記述をしています。

開発用のWebサーバーにする→ラズパイで開発環境を作る-01【Nginx × PHP × MariaDB】
GitHub連携→ラズパイ（Raspberry Pi 4）で開発環境を作る-02【GitHub連携】

XDebugのインストール

Nginixではphp-fpmを使ってPHPを動かしているので、

sudo apt-get install php-xdebug

これでやるとphp-fpmに入りません（php-cliのときはこちらでOK）。

そのため、ソースからコンパイルしていきます。

PHP7.4に対応のXdebugは3.1.6です。

拡張機能のコンパイルするため、依存ライブラリも一緒にインストールします。

wget http://xdebug.org/files/xdebug-3.1.6.tgz
sudo apt install php-dev

なお、PHPのバージョンとXdebugの対応バージョンは公式のXdebug Supportの画面で実行中のphpinfoの内容をコピペすると調べることができます。ここで判定するとXdebugのコンパイル手順も出てきます。

取得したソースを解凍、コンパイルします。

tar -xvzf xdebug-3.1.6.tgz
cd xdebug-3.1.6
phpize
./configure
make

順調にソースを解凍してコンパイルできたら以下の場所にxdebug.soをコピーします。

cp modules/xdebug.so /usr/lib/php/20210902

ここまでできたら、一度php-fpmを再起動してXdebugの追加を反映させます。

sudo /etc/init.d/php7.4-fpm restart

php-fpm7.4 -v
PHP 7.4.33 (fpm-fcgi) (built: Jun 9 2023 16:51:37)
Copyright (c) The PHP Group
Zend Engine v3.4.0, Copyright (c) Zend Technologies
with Zend OPcache v7.4.33, Copyright (c), by Zend Technologies
with Xdebug v3.1.6, Copyright (c) 2002-2022, by Derick Rethans

php-fpm7.4 -vでXdebugの記述が出てきたらOKです。

php.iniにXdebugの設定を追記する

php.iniを開き、Xdebugの設定を追記します。

Xdebug3とXdebug2では記述の内容が大きく異なります。PHP7.4の対応Xdebugはver 3です。

細かいこと言わなければこの2行だけで動作すると思います。その他にもいろいろ設定はできるようです。詳細はこちら→Documentation – all settings | Xdebug

[xdebug]
xdebug.mode=debug
xdebug.start_with_request=yes

記述したら再度php-fpmを再起動します。

sudo /etc/init.d/php7.4-fpm restart

display_errorsをonにしておく

php-fpmを入れたばかりだとエラー表示がoffになっていることがあります。

開発機なので、Xdebugの追記と一緒に有効にしておきましょう。

9003ポートをあける

Xdebug2のデフォルトポートは9000でしたが、Xdebug3からは9003になります。

9003から変更したい場合はphp.iniの設定でxdebug.client_portで任意のポート番号を指定します。

sudo ufw allow 9003
sudo ufw reload

VSCodeのlaunch.jsonを書く

"version": "0.2.0",
"configurations": [
    {
        "name": "Listen for Xdebug",
        "type": "php",
        "request": "launch",
        "port": 9003,
        "pathMappings" : {"${workspaceRoot}" : "${workspaceRoot}"},
    },

portを9003にして、pathMappingを記述するだけです。

これでVSCode上に張ったブレークポイントで停止するようにできたと思います。