Visual Studio CodeでWSL上のPHPをデバッグ

前書き

Sublime Text 3を愛用しているんですが、だんだん他のエディタが追いついて、追い抜いて来たような感じがします。
Sublime Textは更新が止まってしまっているので、まあしょうがないでしょうね。有料だからある程度稼いだら終わりなのかな。
他のエディタはElectronで動いているので動作的にもっさりなのですが、Sublime Textはネイティブアプリだから速いだけが取り柄のようになってきました。

さて、本題です（笑)

だんだんBash on Ubuntu on Windows（BoW）が使えるヤツになってきました。
すっかりubuntuのデスクトップを使わなくなってしまってます。
ですので、PHPをBoW上でデバッグ出来るようにしましょう！
Apache2、PHPはインストール済みとします。（apt installだけですからね）

Apache2の常駐などは
「Bash on ubuntu on Windowsでapacheなどを常駐させる」
もご覧ください。

Xdebugのインストール

sudo apt install php-xdebug

これだけで入ります。

Xdebugの設定

zend_extension=xdebug.so

この一行しかありませんが、この下に足します。

zend_extension=xdebug.so

xdebug.remote_enable = 1
xdebug.remote_autostart = 1
xdebug.remote_port = 9000
xdebug.remote_host = 127.0.0.1

その後、xdebugを有効にして、サーバーを再起動します。

sudo phpenmod xdebug
sudo service apache2 restart

Visual Studio Codeにプラグインをインストール

PHP Debugというプラグインをインストールします。

PHP Debugを設定

デバッグしたいプロジェクトのあるフォルダをVSCodeで開きます。
そして、サイドバーのデバッグボタンを押します。

上記のキャプチャのように、歯車アイコンをクリックします。
「環境の選択」をするように指示がありますので、「PHP」を選びます。
そうすると、設定ファイルが開きますので、下記のように書き換えます。

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for XDebug",
            "type": "php",
            "request": "launch",
            "port": 9000,
			"pathMappings": {
				"ターゲットとなるサーバー内のパス": "${workspaceRoot}"
			}
            // サーバー内のパスの例　"/var/www/html/MarkDownDiagram"
        }
    ]
}

デバッグする

プロジェクトのソースファイルにブレイクポイントを設定します。

F5キーを押すとデバッグが始まります。

上のようなツールバーが出たら、ブラウザでテストしたいアプリケーションを開きます。

http：//127.0.0.1/XXXXX

正常に稼働していると、ブレイクポイントを置いた部分に差し掛かると、

上記のように、黄色いマーカーが付き、行がハイライトしてストップしますので、ツールバーでステップ実行が可能です。

これでデバッグ出来るようになりました！
活用していきたいと思います。