Visual Studio CodeでPHPのデバッグ環境を作れる？
WordPressでPHPをデバッグしてみたいと思いましたので、今回はその方法を調べて構築してみました。ただ、色々と手こずってしまいましたので、今後スムーズに構築できるように記事に残しておきたいと思います。
デバッグ環境を作る手順
私のPCの環境はWindows7の64bitのものを使用しています。また、「XAMPP」と「Visual Studio Code」はインストール済みである前提で、以下の手順を実施していきます。
①PHPのバージョンを確認
②Xdebugのインストール
③php.iniの編集
④PHP IntelliSenseのインストール
⑤PHP Debugのインストール
⑥launch.jsonの編集
⑦User Settingsの編集
⑧ApacheとMySQLの再起動
デバッグ環境のフォルダ構成
デバッグ環境のフォルダ構成は以下の通りになります。
PHPのバージョンを確認
まずはPHPのバージョンを確認してみましょう。PHPのバージョンによってインストールするXdebugが異なってきますので、それを事前に確認しておくためです。
XAMPPのApacheとMySQLのStartボタンを押してローカルサーバーを立ち上げます。
両方とも立ち上がったら以下のURLをクリックして表示されるPHPのバージョンを確認しましょう。
http://localhost/dashboard/phpinfo.php
Xdebugのインストール
PHPのバージョンを確認したら次にXdebugをダウンロードしてきます。
以下のURLにアクセスしてPHPのバージョンに合わせたライブラリをダウンロードしましょう。
https://xdebug.org/download.php
ここで注意することとして、ファイルの末尾が「TS」で「32bit」のものをダウンロードするようにしてください。なぜか64bit版のものではブラウザのデバッグができませんでした。
ファイルがダウンロードできたらファイル名を「php_xdebug-2.7.0beta1-7.2-vc15.dll」→「php_xdebug.dll」に変更しましょう。
ファイル名の変更が完了したら以下の場所にファイルを格納しましょう。
php.iniの編集
次にXdebugを有効にするためにphp.iniを編集しましょう。
php.iniをエディタで開いて以下の文言を最終行の部分に追記します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
[XDebug] zend_extension = "C:\xampp\php\ext\php_xdebug.dll" xdebug.profiler_append = 0 xdebug.profiler_enable = 1 xdebug.profiler_enable_trigger = 0 xdebug.profiler_output_dir = "C:\xampp\tmp" xdebug.profiler_output_name = "cachegrind.out.%t-%s" xdebug.remote_enable = 1 xdebug.remote_autostart = 1 xdebug.remote_handler = "dbgp" xdebug.remote_host = "127.0.0.1" xdebug.remote_port = 9000 xdebug.auto_trace = 1 xdebug.trace_output_dir = "C:\xampp\trace" xdebug.idekey = "phpstorm" |
PHP IntelliSenseのインストール
次に「Visual Studio Code」のほうに「PHP IntelliSense」をインストールしましょう。
「Visual Studio Code」を起動して、左側の四角いアイコンをクリックしましょう。
検索ボックスで「PHP IntelliSense」を検索しましょう。「PHP IntelliSense」が表示されたらインストールボタンを押してインストールしてしまいましょう。
これで「PHP IntelliSense」のインストールは完了です。
PHP Debugのインストール
次に「Visual Studio Code」のほうに「PHP Debug」をインストールしましょう。
上記と同じ手順で「PHP Debug」を検索、表示されたらインストールボタンを押してインストールしてしまいましょう。
これで「PHP Debug」のインストールは完了です。
launch.jsonの編集
次に「Visual Studio Code」の「launch.json」を編集しておきます。
以下のように「launch.json」を編集しましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
{ "name": "Listen for XDebug", "type": "php", "request": "launch", "port": 9000, "pathMappings": { "${workspaceRoot}": "${workspaceRoot}" } }, { "name": "Launch currently open script", "type": "php", "request": "launch", "program": "${file}", "cwd": "${fileDirname}", "port": 9000, } |
上段の部分はブラウザで表示しながらデバッグを実施するとき、下段は「Visual Studio Code」内だけでデバッグするときに使用されます。「Ctrl＋S」でファイルは保存しておくようにしましょう。
User Settingsの編集
次に「Visual Studio Code」の「User Settings」も編集しておきます。
以下のように「User Settings」を編集しましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
{ "php.validate.executablePath": "C://xampp//php//php.exe", "php.executablePath": "C://xampp//php//php.exe", "php.suggest.basic": false, "workbench.iconTheme": "vs-minimal", "files.autoSave": "afterDelay", "editor.minimap.enabled": true, "window.menuBarVisibility": "default", "git.ignoreMissingGitWarning": true, "editor.renderWhitespace": "none", "editor.renderControlCharacters": false, "window.zoomLevel": 0 } |
これで「User Settings」の編集は完了です。「Ctrl＋S」でファイルは保存しておくようにしましょう。
ApacheとMySQLを再起動する
上記の全ての設定が完了したらApacheとMySQLを再起動させましょう。
ブラウザで動作を見ながらデバッグしてみる
ブレークポイントを設置します。ブラウザで動作を見ながらデバッグしたいときは「Listen for XDebug」を選択しましょう。
再生ボタンを押してデバッグを開始しましょう。
ローカル環境のサイトをブラウザで表示（http://localhost/）させて動作させると、ブレークポイントの部分で処理が停止するはずです。
まとめ
Xdebugファイルのバージョン違いなどでかなり手こずりましたが、なんとかデバッグできる環境を作ることができました。動作は軽快なのでサクサクとデバッグを進めることができそうです。皆様もVisual Studio CodeでPHPのデバッグ環境を作ってみてはいかがでしょうか。
コメントを残す