Zenn
📝

Slim 3 Framework まだやってます xdebugでデバッグとかリモートデバッグとVSCode で楽々デバッグ。その４

2021/04/10に公開
tech

まだやってます

slim 楽でいいすね。ちょっとした便利rest-apiなんかチョコチョコっと作れるのでいいすわー。

Visual Studio Codeでデバッグしたい

仮想環境vagrantに入ってvi でコード編集するのが面倒なのでnfsマウントしたvagrantのディレクトリ下にslimおいて・・・とwindows側でVisual Studio Code使って編集してますがなんか面倒になったわけですよ。xdebug使ってリモートデバックするまでもないのでxampp立ち上げてローカルでデバッグする環境をさくっと作ってみます。

前提と今回のレシピ

・その１で、Vagrant環境にPHP7.0とslim3色々、＋ Vagrant環境にxdebugを設定す（今回）
・Windows環境にXAMPPいれる
・Visual Studio Code ＋ 拡張モジュール PHP Debug いれる。

Vagrant 立ち上げてるんでリモートデバッグ

なんだか最近は、Vagrant+リモートデバッグが流行？らしいのでまずは、こちらの設定から。xdebugの設定をしてあげます。remote_host 指定したら remote_autostart は無効になるよとか先生はいってたけど私の環境では両方指定しないとだめでした。まあとりあえずよしとします。

/etc/php.d/99-xdebug.ini
[XDebug]
zend_extension = /opt/remi/php70/root/usr/lib64/php/modules/xdebug.so
xdebug.coverage_enable=1
xdebug.default_enable=1
xdebug.profiler_enable=1
xdebug.profiler_output_dir="/tmp"
xdebug.remote_handler = "dbgp"
xdebug.remote_port = 9001
xdebug.remote_autostart=1
xdebug.remote_enable=1
xdebug.remote_log="/tmp/xdebug_log"
xdebug.remote_host=デバッグする端末ip

XAMPP 立ち上げてローカルデバッグ

こちらはローカルでデバッグする方法。数年前にXAMPPいれたとき多少面倒臭いことしたような気がしますが今回簡単にインストールできました、なのでさくっとインストールしましょう。apache+php7 だけインストールします。

XAMPP Apache + MariaDB + PHP + Perl

virtual host でエラー？

XAMPP の Apache 設定同じよう virtual host を設定します。httpd-vhosts.conf に同じように記述するだけですが「Access forbidden!」ってエラーが・・・。

XAMPP のバーチャルホスト設定で 403 Access Forbidden、どうする？

\xampp\apache\conf\extra\httpd-vhosts.conf
Listen 8080
NameVirtualHost *:8080
<VirtualHost *:8080>
  ServerName slim3
  DocumentRoot "C:\Users\hogehoge\vagrant\slim3\public"
  ErrorLog "logs/slim-error.log"
  CustomLog "logs/slim-access.log" common
  <Directory "C:\Users\hogehoge\vagrant\slim3\public">
    AllowOverride All
    Require all granted
  </Directory>
</VirtualHost>

xdebug がインストールされてない

XAMPPの中に同梱されていると思いつつ入ってませんでしたわ。php 5.x 系だと同梱されているのかな？ここは自分でインストール。php 7.0 TS(32 bit)版をダウンロードして C:\xampp\php\ext\ の下にいれます。

XDEBUG EXTENSION FOR PHP

xdebug のコメントなんか無いよ

php.ini に xdebugの記述がコメントされているからコメントを外すだけ…なんて書かれているサイトが多いですがそもそも書いてないから！　と３０分無駄にしました。下記のように php.ini に記述しましょう。

[XDebug]
zend_extension = C:\xampp\php\ext\php_xdebug-2.4.1-7.0-vc14.dll
xdebug.remote_handler = "dbgp"
xdebug.remote_port = 9000
xdebug.remote_enable=1
xdebug.remote_autostart=1
[Date]
date.timezone = Asia/Tokyo

Apache再起動してphpinfo

XAMPPのコントールパネルでApacheを再起動してdos窓から php -iで xdebug の記載があるか確認します。

いよいよ Visual Studio Code でローカルデバッグ/リモートデバック

まあEclipesとかでも出来るんですけどね軽量でいいじゃないですかVisual Studio Code。その前にVisual Studio Codeをインストールしておいてくださいね。あと拡張モジュールとして PHP Debug をインストールします。

Visual Studio Code
PHP Xdebug

自分は、こんな感じに拡張モジュールいれてる
image

launch.json の設定

Visual Studio Code のデバッグ設定をするを参考にして。launch.json を編集します。
ローカルデバッグ(XAMPP)とリモートデバック(Vagrant)側の設定。
リモートデバック(Vagrant)側のserverSourceRootは、ローカルデバッグ側(windows)でも同じファイルを編集できるように /vagrant 配下で作成しておきます。

.vscode/launch.json
{
    "name": "Local Xdebug",
    "type": "php",
    "request": "launch",
    "port": 9000
},
{
    "name": "Vagrant XDebug",
    "type": "php",
    "request": "launch",
    "port": 9001,
    "serverSourceRoot": "/vagrant/slim3",
    "localSourceRoot": "${workspaceRoot}"
},

ローカルデバッグする

上記でもちらっと書いたけどローカルデバッグ側は、vagrantでnfsされた /vagrant にあるファイルを直接編集します（楽だしね）。これローカルデバッグ側というかwindowsにXAMPPいれただけでcomposerの設定とかしなくていいので何も考えなしに実行できるのがいいですね（当たり前か）。

で、ローカルデバッグ方法。launch.json で指定した「Local Xdebug」を選択するだけ。もちろんXAMPPを起動しておかないとだめですけどね。

image

リモートデバッグする

これですね。

image

おおお

デバッグポイントを指定して・・・・きたー！。デバッグ楽しい！！

image

参考にさせて頂いたサイト

”VisualStudio Code”をPHP開発に使う
Check! Visual Studio Code で PHP をデバッグ実行 (Xdebug)
mac + visual studio code + vagrant(nginx + php-fpm) でphpのデバッグ

次回

MySQL とSQLite と両方のインスタンス切り替えたりステージングの切り替えとかとか、やってみようかな？とｗ

GitHubで編集を提案

Discussion