Webでのデバッグと言えばphpStormやNetBeans使ってみてましたけど、毎度上手くデバッグ設定できず心折れていました。
が!今回はスムーズにできたし、何より「無料で」構築できるのが素晴らしいです。昔のMicrosoftからはとても考え付きませんね(笑)
【動作環境】
・Windows10 (Pro)
・VisualStudioCode 1.51.1
・XAMPP v3.2.4
→PHP7.4が入っているバージョンです。
【前提条件】
・XAMPPがC:\直下にインストール済みであること。
・webルートディレクトリは変更していません。
→httpd.confは変更を加えていない状態。
【構築手順】
1.環境に合った適切なXdebugの準備
1)c:\xampp\htdocs配下に [phpinfo.php] を作成し、配置する。
<?php phoinfo();
2)ブラウザで、localhost/phpinfo.phpを実行する。
3)ブラウザに表示された phpinfo の内容を何も考えず [ctrl+a] → [ctrl+c] で全部コピーする。
4)https://xdebug.org/wizard に接続、コピー内容をペーストし、「Analyse my phpinfo() output」ボタンをクリックする。
5)ダウンロード対象のDLLが「Instructions」に表示されるので、クリックしダウンロードする。
6)ダウンロードしたDLLを、C:\xampp\php\extへコピーする。
2.PHPとXdebugの関連付け
1)c:\xampp\php\php.ini をバックアップしておく。
2)c:\xampp\php\php.ini をテキストエディタ等で開き、以下を最後部に追記する。
[xdebug] zend_extension=C:\xampp\php\ext\【上記1.でDLしたDLLのファイル名】 xdebug.idekey=VSCODE xdebug.client_host=localhost xdebug.client_port=9003 xdebug.mode=debug xdebug.start_with_request=1
※私の環境では [php_xdebug-3.0.0-7.4-vc15-x86_64.dll] でした。
※Xdebugのポート、Ver3.0ではデフォルト9003とのこと。それ以前は9000または9001で確認。
3.VSCodeの下準備
1)C:\【サインインユーザー名】\AppData\Roaming\Code\User\settings.json をバックアップしておく。
2)上記ファイルを開き、以下の記述を追記・保存する。
// php debug の設定 "php.validate.executablePath": "C:\\xampp\\php\\php.exe" "php.executablePath": "C:\\xampp_hayakawa\\php\\php.exe" "php.validate.run": "onType"
3)画像を参考に、VSCodeの拡張機能をインストールする。
①をクリック。
②で拡張機能を検索。
③に対象が表示される。以下をインストールする。
・Japanese Language Pack(1.51.2)
・PHP Debug(1.13)
・PHP Extension Pack(1.0.2)
・PHP Intelephense(1.5.4)
・PHP IntelliSense(2.3.14)
※2020/12月現在では、画像のバージョンが目安。
4)VSCodeを再起動する。
4.VSCodeとXdebugの関連付け
1)画像を参考に、[launch.json] ファイルを作成し関連付け。
①をクリック。
②「launch.jsonファイルを作成します」をクリック。
③作成位置はC:\xampp\htdocs配下です。
C:\xampp\htdocs\.vscode\launch.jsonとなればOK。
2)[launch.json]を開き、以下構文を追記・保存する。
"configurations": [ { "name": "Listen for XDebug", "type": "php", "request": "launch", "port": 9003, "log":true }, { "name": "Launch currently open script", "type": "php", "request": "launch", "program": "${file}", "cwd": "${fileDirname}", "port": 9003, "stopOnEntry": false, "log":true } ]
5.デバッグ実行を試す
1)テスト用プログラムを [test.php] を作成する。
変数の変遷など確認できるようなのが良いかと。
<?php for( $test = 1; $test < 10; $test++){ echo "test script line ".$test."<BR>"; }
2)ブレークポイントfor文に設定する。
3)「Launch currently open script」 を試す。
①をクリック。
②で「Launch currently open script」を選択、左の緑三角をクリック。
③デバッグが実行され、左ペインの「変数」部分に $test の値がインクリメントされていく事を確認。
4)「Launch currently open script」 を試す。
①をクリック。
②で「Listen for XDebug」を選択、左の緑三角をクリック。
③ブラウザで http://localhost/test.php を実行する。
④デバッグが実行され、左ペインの「変数」部分に $test の値がインクリメントされていく事を確認。
【注意】
1)XdebugのVer3.0とそれ以前では、php.ini にて設定する項目名に変更がある。詳しくは公式サイト参照。
2)デバッグが上手く動作されない場合、「PHPとXdebugの紐づけが正しいか」と
「XdebugとVSCodeの紐づけが正しいか」を切り分けて確認する。
判断するには、ログを出力するように設定すると良い。
3)[httpd.conf] の設定で、ポートは80番のみ利用設定でOK。
参考URL:
https://qiita.com/hitotch/items/7b2895f9822ded3fa7db
https://qiita.com/naoyukik/items/ef83fd9f59228694556d