Xdebug 壱ノ型 – WSL2環境
WSL2環境
構成
 |
Windows 10, WSL2, ディストロ : Ubuntu 18.04 LTS, Xdebug2
サーバー設定
WLS2にUbuntuをインストール
Microsoft StoreからUbuntuディストロのインストール
 |
インストール後、開く
 |
コンソールが開く
 |
ユーザー名とパスワードを指定
Installing, this may take a few minutes… Please create a default UNIX user account. The username does not need to match your Windows username. For more information visit: https://aka.ms/wslusers Enter new UNIX username: cuore Enter new UNIX password: Retype new UNIX password: passwd: password updated successfully Installation successful! To run a command as administrator (user “root”), use “sudo See “man sudo_root” for details. cuore@hide-dell:~$ |
PHP + Apacheをインストール
cuore@hide-dell:~/xdebug-test$ sudo apt update cuore@hide-dell:~/xdebug-test$ sudo apt install php cuore@hide-dell:~/xdebug-test$ apache2 -v Server version: Apache/2.4.29 (Ubuntu) Server built: 2022-01-05T14:50:41 cuore@hide-dell:~$ php -v PHP 7.2.24-0ubuntu0.18.04.10 (cli) (built: Oct 25 2021 17:47:59) ( NTS ) Copyright (c) 1997-2018 The PHP Group Zend Engine v3.2.0, Copyright (c) 1998-2018 Zend Technologies with Zend OPcache v7.2.24-0ubuntu0.18.04.10, Copyright (c) 1999-2018, by Zend Technologies cuore@hide-dell:/var/www$ sudo chown -R cuore /var/www/html/ |
xdebugをインストール
cuore@hide-dell:/usr/lib/php$ sudo apt install php-xdebug cuore@hide-dell:~$ php -v PHP 7.2.24-0ubuntu0.18.04.10 (cli) (built: Oct 25 2021 17:47:59) ( NTS ) Copyright (c) 1997-2018 The PHP Group Zend Engine v3.2.0, Copyright (c) 1998-2018 Zend Technologies with Zend OPcache v7.2.24-0ubuntu0.18.04.10, Copyright (c) 1999-2018, by Zend Technologies with Xdebug v2.6.0, Copyright (c) 2002-2018, by Derick Rethans |
Xdebugのバージョンは2.6.0でモジュールができている。
/usr/lib/php/20170718/xdebug.so
/etc/php/7.2/apache2/php.iniにxdebugのディレクティブ追記
cuore@hide-dell:~/xdebug-test$ sudo vi /etc/php/7.2/apache2/php.ini …… [xdebug] zend_extension=/usr/lib/php/20170718/xdebug.so xdebug.remote_enable = 1 xdebug.remote_autostart = 1 xdebug.remote_host = “127.0.0.1” xdebug.remote_port = 9100 |
※ 通常Xdebug2のremote-portは9000だが、私はDockerで9000あたりを使っているので9100に設定。
remote_autostartは1としているが、これによりURLに?XDEBUG_SESSION_STARTがあっても無くてもxdebugが動作する。
一人で管理しているサーバーなら手軽であるが、複数人でテストや運用しているときは他人が知らずにアクセスしてxdebugに引っ掛かって止まることもあるので注意。特に運用中の―サーバーでは0にしておいた方が無難。
/var/www/html//phpinfo.phpを作成
phpinfo(); |
Apache再起動後 http://localhost/phpinfo.php で確認。
 |
1.2 VS Code
「PHP Debug」Extensionをインストール
WSLからVS Codeをインストールし起動する。作業ディレクトリは何でもよい、なぜなら後で/var/www/htmlディレクトリを直接開いてデバッグするので。
cuore@hide-dell:~$ mkdir xdebug-test cuore@hide-dell:~$ cd xdebug-test/ cuore@hide-dell:~/xdebug-test$ code . Installing VS Code Server for x64 (ccb…47) Downloading: 100% Unpacking: 100% Unpacked 1842 files and folders to /home/cuore/.vscode-server/bin/ccb…47. cuore@hide-dell:~/xdebug-test$ |
Extension「
 |
 |
 |
launch.jsonに以下設定。
{ “name”: “Listen for Xdebug”, “type”: “php”, “request”: “launch”, “port”: 9100 }, |
デバッグ対象プロジェクトフォルダを開く
VS Codeから/var/www/htmlを開く。
 |
ここでの確認は、ネット上からおかしなコードをダウンロードしてきて実行したことにより被害を受けてもMSの責任ではないよという確認。
ブレークポイント設定
ソースコード（ここではphpinfo.php）を開いてブレークポイントを設定。
 |
VS Codeをリッスン待ちにする
Run and Debug「
 |
VS Codeがリッスン待ち状態となる。VS Code下部のステータスバーがオレンジ色になりそのことを明示している。
 |
ブラウザからアクセスしブレークポイントで止める
ブラウザからphpinfo.phpを指定する。（ChromeでもFirefoxでもOK）
 |
無事、ブレークポイントで止まりました。
 |
remote_autostartを有効にしているのでブレークポイントで止まっているが、無効の場合はURLに「?XDEBUG_SESSION_START=XXX」を付ける必要がある。詳細を知りたければ「残心の章」を参照。
1.3 PHPStorm
設定の大まかな流れ
- CLI インタープリターの設定 Settings > PHP
- Xdebugのポート設定 Settings > PHP > Debug
- サーバーの構成 Settings > PHP > Servers
- デバッグの構成 Run > Edit Configurations
デバッグ対象プロジェクトフォルダを開く
PHPStormからプロジェクトを開く。\\wsl$でのアクセスに対応しているので、WSL2上のディストロのファイルを直接開ける。
 |
/var/www/htmlを直接指定する。
 |
このプロジェクトのソースを信頼する、に設定。
 |
CLI インタープリターの設定
Setting > PHP画面のCLI Interpreterドロップボックスで
CLI Interpretersダイアログで
 |  |
ラジオボタンWSLを選択後はデフォルトのまま「OK」をクリック。
 |
内容を確認して「OK」ボタンをクリック。
 |
PHP Language levelが5.6だったので7.2に変更
 |
デバッグポートの設定
ポートをphp.iniで設定した値とする。ここでは9100。
‘Break at first line in PHP scripts’はケースバイケースで指定する。指定したステップで止まらないなどの問題が発生したときにチェックを入れてとにかく止める、といったときに便利。
 |
リモートサーバーを追加
 |
サーバーの設定
Name : 任意
Host : localhost（WSL2のディストロが複数ある場合は注意 ※この後の章参照）
 |
デバッグ構成
 |
構成を追加
 |
- PHP Remote Debugを追加
- Name : 任意
- Filter debug connection by IDE keyをチェック
- Serverは前項で設定したサーバー名（localhost）
- IDE keyはPHPSTORM（これは任意の文字列でよいはず）
 |
デバッグエンジンの構成を検証する
 |
 |
ブレークポイント設定
ステップ実行対象のソースの止めたい場所で「●」を付ける。以前用意したphpinfo.phpで止めてみます。
 |
PHP Stormをリッスン待ちにする
 |  |
構成したデバッグ構成「Xdebug」が選択されていることを確認して「
 |
ブラウザからアクセスしブレークポイントで止める
ブラウザからphpinfo.phpを指定する。（ChromeでもFirefoxでもOK）
|
無事、ブレークポイントで止まりました。
 |
remote_autostartを有効にしているのでブレークポイントで止まっているが、無効の場合はURLに「?XDEBUG_SESSION_START=XXX」を付ける必要がある。詳細を知りたければ「残心の章」を参照。