XAMPPの設定
プログラムを書いてWEBサーバで表示する流れには、確認作業も必要です。
「ブラウザで見るとなんかエラー吐いてる。」ってのは良くある話。
このエラーが出ている場所を特定するのがデバッグ作業。
基本的にPHPのエラーは、XXってファイルの何行目に○○っていうエラーがあるよって教えてくれるけど、このエラーはあまりうのみにできなくて、調べてみると全然違う場所だったってことも結構ある話。
デバッグ作業ってのは、プログラムを書いて、問題なく実行するためにとても重要な作業なんです。
そのデバッグを行ってくれるのが、XdebugっていうPHPのデバッグツール。
XAMPPのPHPに含まれているエクステンションで、これを有効にするとVSCodeで利用できるようになる。
まずXAMPPのphpinfoでxdebugが有効になっているかどうか調べます。
XAMPPを立ち上げ、ブラウザに、http://localhost/dashboard/ と入力してダッシュボード画面を出し、上部メニューのPHPInfoをクリックします。
クリックすると次の画面が表示されます。ずっと下に下がって見出しにXdebugがあるかどうか調べます。アルファベット順に並んでいるので、探しやすいと思います。
見当たらない場合、Xdebugのインストールが必要になります
VSCodeでPHP Debugのインストール
まず、VSCodeでデバッグするために、VSCodeの拡張機能を有効化します。
VSCodeを立ち上げて、左メニューの一番下にある□のマークの拡張機能をクリックします。
上部のテキストボックスにPHPと入力すると出てくる「PHP Debug」をクリックします。
矢印の青いインストールと書かれたボタンをクリックします。
その後、下の説明文の詳細タブをクリックし、中ほどの説明文の青い文字「Xdebug installation wizard.」をクリックします。
するとサイトが開きます。
うまく開かない場合は、Xdebug: Support — Tailored Installation Instructions をクリックします。
Xdebugのダウンロード
このサイトのテキストボックスに、先ほどXAMPPで開いたPHPInfoのページを全部コピーして、貼り付けます。
キーボードの「Ctrl」＋「A」で、ページ全選択するので、それをさらに「Ctrl」＋「C」でコピーします。
このコピーしたものを、サイトのテキストボックスに「Ctrl」＋「V」で貼り付けます。終わったら、outputボタンを押します。
すると自分のPHP環境に応じたものを表示してくれますので、それをダウンロードします。
また、XAMPPの php.ini の設定方法も記述してあります。
ダウンロードしたdllをXAMPPフォルダにあるphpフォルダの中に配置します。
xampp\php\extフォルダの中に入れます。
そしてphp_xdebug-3.1.3-7.4-vc15-x86_64.dll をphp_xdebug.dll にリネームします。
php.ini の設定
xamppのコントロールパネルを開き、Apacheの横に並んでいるConfig ボタンを押します。
PHP（php.ini）という文字列があるので、これをクリックします。
すると php.ini がメモ帳が開きますので、一番下までスクロールして、次の項目を追加して保存します。
[XDEBUG]
zend_extension = xdebug
xdebug.mode = debug
xdebug.start_with_request = yes
xdebug.log_level = 0
xdebug.idekey = VSCODE
xdebug.client_port = 9003
xdebug.log = "D:\xampp\xdebug\log.txt"完成したphp.ini がこちら。dllに関してはリネームしたバージョンがわかるようコメントアウトしてあります。
この状態で、XAMPPを再起動し、エラーが無ければ、dll の追加は成功です。
XAMPPのphpInfoの確認をします。
PHPInfoの中にXdebugの項目が増えています。さらに、いろいろな設定項目の状態もわかるようになっています。
VSCodeのPHP Debugの設定
VSCodeの左のメニューアイコンで▶のものをクリックします。
デバッグするには、launch.json の設定が必要だといわれるので、青字のファイルを作成しますのリンクをクリックします。
こんな感じの画面が表示されるので、内容を確認し、上のタブのlaunch.json の✖ボタンを押します。
何も書かれてないって場合は、以下のコードをコピーして貼り付けてください。
{
"version": "0.2.0",
"configurations": [
{
"name": "Listen for Xdebug",
"type": "php",
"request": "launch",
"port": 9003
},
]
}
左の上にある実行とデバックから、Listen for Xdebug を選択します。
ブラウザを開き、URLでファイルにアクセスします。
今回はtestというフォルダにindex.phpを作成してあります。
http://localhost/test/index.php にアクセスします。
まだデバッグしていないので、そのまま、変数Sの答え、2が表示されています。
ブラウザを閉じて、ここでデバッグを動かしてみます。
エディターの数字の横をクリックするとブレイクポイントを作ることができます。
5行目でテストしてみます。
下のバーが青からオレンジに代わり、さらに、5行目には矢印も出て、ここで止まってますよ的なアピールを感じます。
ブラウザを立ち上げます。
http://localhost/test/index.php
ブラウザのタイトルが出る部分に、待機中のアニメーションが出ています。
VSCodeは、こんな感じで表示されれば完璧です。
ブレークポイントで止まってます。ここで、右上にある青い▶マーク（F5を押してもOK）を押すと次の行に進みます。その次のマークはステップオーバー（F10と同じ）で次の動作に進みます。
左側のブロックで変数の中身を見ることや、ブレークポイントの設定が可能です。
細かな設定は、左メニュー一番下の管理→設定→機能→デバッグで行えます。
使いこなすと、作業の効率が格段に上がるので、ぜひ覚えてほしい操作です。