XDebug

PHPで開発する際にデバッグ作業は必須で、ステップ実行によるデバッグは欠かせないものです。 Visual Studio Codeの「PHP Debug」というプラグイン（拡張機能）を使えばVSCode上でPHPをステップ実行できます。 当記事ではWindowsにXamppを入れた環境を前提としております。 https://programism.net/xampp-install/ Xdebugをインストールする サーバー側にXdebugをインストールします。 Xampp環境の適当な場所にPHPファイルを作成し次のように「phpinfo()」が実行されるようにします。 &lt;?php phpinfo(); 例では「C:\xampp\htdocs\test.php」を作成しています。 作成したtest.phpをブラウザ上で呼び出します。 このとき表示されているものを全選択してコピーします。 次のURLにアクセスしてテキストエリアにコピーした内容を貼り付けます。 https://xdebug.org/wizard 貼り付けたら「Analyse my phpinfo() output」を押します。 するとInstructionsでXdebugのDLLファイルがダウンロードできるようになるのでリンクからダウンロードします。 何やら警告が出ますが気にせず保存します。 ダウンロードしたファイルをphpのextフォルダに移動させます（コピーでもいいです） ※XamppをC:\xamppにインストールした場合はフォルダは「C:\xampp\php\ext」になります。 続いてphp.iniファイルを編集しますのでエディタで開きます。 ※XamppをC:\xamppにインストールした場合は「C:\xampp\php\php.ini」 php.iniの最後に次の2行を追加します。 [XDebug] zend_extension = "C:\xampp\php\ext\php_xdebug-3.1.5-8.0-vs16-x86_64.dll" DLLのファイル名はダウンロードしたファイルを指定します。 php_xdebug.dllとかにファイル名を変更しても大丈夫です。 XDebugのインストールはこれで完了です。 PHP Debug をインストールする Visual Studio CodeにPHP Debugをインストールします。 左下の歯車アイコンを選んで「拡張機能」を選びます。 検索ボックスに「php debug」と入力すると下に候補が出てきますので「Xdebug」のものをインストールします。 左側の虫と三角のアイコンを選びます。 VSCodeでフォルダを開いていない場合は「フォルダーを開いた」のリンクを選択します。 （フォルダを開いている場合はここは飛ばしてください） ソースが置いてある対象のフォルダを開きます。 「launch.jsonファイルを作成します」のリンクをクリックします。 上からびろ～んとなるので「PHP」を選びます。 launch.jsonが作成されます。 launch.jsonを次のようにします。 { "version": "0.2.0", "configurations": [ { "name": "Listen for Xdebug", "type": "php", "request": "launch", "port": 9003 }, { "name": "Launch currently open script", "type": "php", "request": "launch", "program": "${file}", "cwd": "${fileDirname}", "port": 9003, }, ] } https://marketplace.visualstudio.com/items?itemName=xdebug.php-debug ↑このページの「3.Enable remote debugging in your php.ini」に記載されているものをphp.iniに追記します。 今回ダウンロードしたものはバージョン3ですのでそれをコピーします。 php.iniの一番下、[XDebug]のところに追記します。 PHP Debugのインストールは完了です。 実際にステップ実行してみる 実際に動かしてみます。 左側の虫と三角のアイコンを選んで小さい三角のアイコンを押してPHP Debugを起動します。 適当にPHPファイルを作成します。 （例ではさきほどのtest.phpをいじりました） 止めたい場所の行番号の左側をクリックすると赤丸の印がつきます。 この状態でブラウザを再読み込みすると・・・ VSCode上で見事に止まりました。 変数にカーソルを合わせてみると変数が保持している値も確認できます。 （画像では小さくて見にくいですが・・・） これでステップ実行できるようになりました。 デバッグもやりやすくなるかと思います。

Visual Studio Code (VSCode)上でステップ実行してデバッグする