Posted at

Check! Visual Studio Code で PHP をデバッグ実行 (Xdebug)

More than 3 years have passed since last update.

こんにちは、オークファンの @dz_ こと大平かづみです。


Prologue - はじめに

プライベートでも使っている Visual Studio Code で PHP デバッグができるように、 PHP Debug の拡張機能を導入してみました!

20160621_vscode_006.png


Visual Studio Code とは?

さて、 Visual Studio Code は、Microsoft 製のオープンソースのエディタです。

Javascript をはじめ、 PHP もある程度補完してくれ、シンプルながら使いやすいエディタです。Windows はもちろん、Mac, Linux でも利用できるので、両刀遣いとしても重宝します。

Visual Studio Code > Debuggers > PHP Debug


前提


  • 接続先のサーバーに xdebug がインストールされていること


おおまかな流れ


  • 接続先サーバーの xdebug を設定する

  • Visual Studio Code の拡張機能をインストールする

  • Visual Studio Code デバッグ設定をする


手順


接続先サーバーの xdebug を設定する

接続先サーバーの xdebug の設定が以下のようになってることを確認してください。

xdebug.remote_enable=1

xdebug.remote_autostart=1


Visual Studio Code の拡張機能をインストールする

Visual Studio Code のコマンドパレットを開き、「ext install」と入力して、「Extensions: Install Extension」をクリックします。

20160621_vscode_002.png

PHP Debug をクリックし、インストールします。

20160621_vscode_005.png


Visual Studio Code のデバッグ設定をする

Visual Studio Code で、デバッグするコードを含むディレクトリを開きます。

デバッグ画面を開き、歯車のマークをクリックし、環境設定を開きます。

20160621_vscode_001.png

launch.json が開かれるので、以下のように設定します。


.vscode/launch.json

{

"version": "0.2.0",
"configurations": [
//-- ここから
{
"name": "Custom Xdebug setting",
"type": "php",
"request": "launch",
"port": 9000,
"serverSourceRoot": "/var/www/html",
"localSourceRoot": "${workspaceRoot}"
}
//-- ここまで
]
}

項目
内容

name
設定の名前 (任意の文字列)

type
php

request
launch

port
xdebug のポート (デフォルトでは 9000

serverSourceRoot
接続先サーバー上のドキュメントルート

localSourceRoot
ローカルマシン上のソースコードのディレクトリ ( ${workspaceRoot} は Visual Studio Code で開いているディレクトリ)


Epilogue - おわりに

しばらく使ってますが、とくに不便なく利用しています。ぜひ使ってみてください!