最近Visual Studio Code(以下VSCodeといいます)を使ってPHPの勉強をしています。
VSCode上でデバッグができるようにした際,ネットであれこれ調べたのですが書いてあることがかなりまちまちで意外と手こずってしまいました。
結論としては諸々の記事よりも手順は簡略化できそうなので,それらをまとめたものを紹介します。
環境
- Windows10
- VSCodeのバージョン:1.45.1
- xampp(Cドライブ直下にインストール)のバージョン:3.2.4
- 作業ドライブ:Z:\Dropbox\htdocs\
「XDebug」の設定
XDebugがあるかどうかの確認(なければインストール)
多くのサイトではXDebugをインストールしなければならないと書いてあるのですが,下記サイトによると最近のxamppにはデフォルトで用意されていると書いてあります。

確かに私のxamppにも入っていました。
C:\xampp\php\ext\ に php_xdebug.dll というファイルがあればOKです。
なければ下記サイトからインストールしましょう。
php.iniの設定
C:\xampp\php\ にある php.iniを編集します。
一番下に次の内容を追加します。
[XDebug]
zend_extension = "C:\xampp\php\ext\php_xdebug.dll"
xdebug.remote_enable = 1
xdebug.remote_autostart = 1
この設定が人によって一番まちまちなところです。
が,最低限動かすのであればとりあえずこれだけでよいのではないかと思います。
設定内容については本家サイトのほか,下記サイトがわかりやすかったです。

また,XDebugをインストールした場合はファイル名が違っているかもしれないので,そうした場合は適宜訂正してください。
「PHP Debug」の設定
「PHP Debug」のインストール
VSCodeの拡張機能である「PHP Debug」をインストールします。

- 拡張機能タブを押す
- 「php debug」を検索
- インストールボタンを押してインストール
launch.jsonファイルの編集
launch.jsonファイルを編集しないとうまく動作しないことが多いようです。私もそうでした。
編集の手順は次のとおりです。

- デバッグタブを開く
- 「launch.jsonファイルを作成します」をクリック
- 「PHP」を選択
そうすると下記のようなファイルが開かれるはずです。
{
// IntelliSense を使用して利用可能な属性を学べます。
// 既存の属性の説明をホバーして表示します。
// 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Listen for XDebug",
"type": "php",
"request": "launch",
"port": 9000
},
{
"name": "Launch currently open script",
"type": "php",
"request": "launch",
"program": "${file}",
"cwd": "${fileDirname}",
"port": 9000,
},
]
}
これに
“runtimeExecutable”: “C:\xampp\php\php.exe”
を追加します。
{
// IntelliSense を使用して利用可能な属性を学べます。
// 既存の属性の説明をホバーして表示します。
// 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Listen for XDebug",
"type": "php",
"request": "launch",
"port": 9000
},
{
"name": "Launch currently open script",
"type": "php",
"request": "launch",
"program": "${file}",
"cwd": "${fileDirname}",
"port": 9000,
"runtimeExecutable": "C:\\xampp\\php\\php.exe"
},
]
}
保存して閉じます。設定は以上です。
動作確認
なんでもいいのでphpのファイルを開きます。

- 上画像矢印のように行数字の左横をクリックして適当にブレークポイントを作っておきます。
- デバッグタブを開きます。
- 実行ボタンを押します。その際に横のプルダウンメニューは「Listen currently open script」にしておきます。

こんな感じで先ほど設定したブレークポイントで止まり,デバッグタブの変数が表示されていればOKです。
その他参考にしたサイト

コメント