VSCodeでPHPのデバッグとブレークポイントを有効化する方法

ローカル環境でVSCodeを使って開発中のphpファイルに対して、下記の様にブレークポイントを貼り、有効化させるのに３時間ぐらいかかった。

	アプリ
クライアント	Chrome	1. Chromeで、localhost にアクセスする（portも正しく指定すること）
サーバー	VSCode	2. すると、VSCodeで設定したブレークポイントにヒットした場合に、そこでファイルの読み込みが一時停止する。

ここでは、何をしたらこのような設定が出来たのか、書いておく。

開発環境： Windows10 + VSCode + XAMPP Version 8.2.12 + PHP 8.2.12

1.拡張機能のインストール

VSCodeの拡張機能、PHP Debugをインストールする。同じ名前がいくつかあるが、Xdebugを選ぶ。

2.PHP.iniファイルの編集

PHP.iniファイルを編集して、下記、xdebugに関する設定を下記のようにする。

[PHP]
...
zend_extension = xdebug
xdebug.mode = debug
xdebug.start_with_request = yes

　自分の環境では、下記の箇所を修正した。

3. launch.jsonファイルの編集

　VSCodeのデバッグメニューから、歯車をクリックすると launch.jsonファイルが開く。　

“Launch built-in server and debug”

　ファイルの”configurations”に、”Launch built-in server and debug”が設定されていることを確認する。特に、”runtimeArgs”の”-S”の値が重要。
　自分の環境では、”localhost:8000″と設定していることを確認した。

{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch built-in server and debug",
            "type": "php",
            "request": "launch",
            "runtimeArgs": [
                "-S",
                "localhost:8000",
                "-t",
                "."
            ],
            "port": 9003,
            "serverReadyAction": {
                "action": "openExternally"
            }
        },

4. PHP Pathの確認

　設定で、PHP Server configurationのうち、PHP Pathを確認し、php.exeへのPathが設定されているか確認する。
（$PATHに設定がされている場合、空欄で良いらしい）

5. ブレークポイントの設定とデバッグの実行

　ファイルにブレークポイントを貼り、”Launch built-in server and debug”を選択したうえで、デバッグを実行する。

　三角マークをクリックすると実行となり、VSCodeの画面に下記、デバッグメニューが表示される。

6. クライアントからアクセスする

　ローカルPCでChromeを立ち上げ、”localhost:8000″にアクセスする。（通常、 index.htmlや index.phpにアクセスすることになる）

結果：index.phpファイルに設定したブレークポイントにヒットして、一時停止になる。

この状態になれば、観察したい変数をウォッチ式で見たり、ステップオーバーやステップインで１行ずつパスの確認をする等して、デバッグを進めることが出来る。