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

ローカル環境でVSCode を使った PHP 開発でのデバッグ時、ブレークポイント を有効化する方法を説明します。

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. ブレークポイントの設定とデバッグの実行

PHPファイルにブレークポイントを貼ってみる。
その後、”Launch built-in server and debug”を選択して、デバッグ実行する。

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

動作確認、クライアントからアクセスする

全ての手順を終えた後で、動作確認をしてみる。
ローカルPCでChromeを立ち上げて、”localhost:8000″にアクセスしてみる。
（通常、 index.htmlや index.phpにアクセスすることになる）

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

この状態になれば、観察したい変数をウォッチ式で見ることが出来る。
また、ステップオーバーやステップインで１行ずつコード実行させる等、デバッグを効率的に進めることが出来る。