彡(ﾟ)(ﾟ)「おっしVisualStudioCodeでデバッグ環境を作ってみるか」

ってことで、最近はVisualStudioCodeで作業をすることも多いので、ついでだからPHPのデバッグ環境も作っちゃおうかなーと思います。

VisualStudioCodeは最近のアップデートでついに待望のタブが実装されたようです！

これはホント便利ですね。というかこの機能がなくてむしろ不便だった！

最近のMSさんはほんといい仕事してますなぁ

なお、この記事を書いてる時点での私ですが、軽くいっぱいやっちまいました(´ω｀)

誤字脱字がありましたらご容赦のほどを

とりあえず環境準備

今回の環境は普段仕事でも使用しているVagrantを使います。

VM上につくる環境ですが以下の通りです。

・CentOS7

・Nginx

・PHP7 & PHP-FPM & Xdebug

環境はAnsibleで構築しようと思います。

打ったコマンドは

vagrant up

ansible-playbook -i hosts -vvv  site.yml

だけ。

playbookも既に資産として持っているとこういう時に地味に便利ですなぁ(´ω｀)。

そのプレイブックの内容はまた別途機会があれば・・・。

当然のことながらホストOSとゲストOSとでフォルダを共有して、そこにPHPを置く必要があります。

今回は/vagrantフォルダにPHPを置いていきます。

つまりNginxのDocumentRootも /vagrantということになります。

VisualStudioCodeの設定

vscodeに最低限必要なのはPHP DebugというExtensionになります。

vscode上で

F1, type
ext install
php-debug.

とやってください。

PHPDebugが候補に出てきたら躊躇なくインストールしましょう。

launch.jsonの設定

今回設定したlaunch.jsonの内容は以下の通りです。

{
"version": "0.2.0",
"configurations": [
{
"name": "Listen for XDebug",
"type": "php",
"request": "launch",
"serverSourceRoot": "/vagrant/",
"localSourceRoot": "${workspaceRoot}"

"port": 9000
},
{
"name": "Launch currently open script",
"type": "php",
"request": "launch",
"program": "${file}",
"cwd": "${fileDirname}",
"port": 9000
}
]
}

ポイントは

"serverSourceRoot": "/vagrant/",
"localSourceRoot": "${workspaceRoot}"

の箇所すね

ここまで設定できたら後は他のIDEと同じようにブレークポイントを設定するなりして、デバッグを開始すると、ブレークポイントで停止し、変数の中身などが見れるようになりますぞ(´ω｀)