LoginSignup
124

More than 5 years have passed since last update.

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

Posted at

こんにちは、オークファンの @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 - おわりに

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
124