[VSCode+Xdebug]Webリクエストのリモートデバッグ

この記事は、VSCode + Xdebug + Laravel Homestead において、リモート環境においてステップ実行でWebリクエストのデバッグするやり方です。
すでにHomesteadの環境構築を行っている前提で説明します。

なんとなくだけど、Web系の人ってステップ実行するタイプのデバッグをやってる人少ない印象です。(自分の周りだけ？)
echoやdd関数等でデバッグすることも可能だけど、このやり方だと変数の値の遷移なども確認しやすくなるので便利です。
VSCodeとブラウザの拡張機能を設定するだけでできるので、開発効率爆速に上げて行きましょう〜💪

追記

[PHP] Xdebug のリモートデバッグ、理解していますか？ - Qiita
この記事の説明がめちゃくちゃわかりやすいので一度目を通すといいと思います。

環境

macOS Catalina 10.15.2
Laravel1 6.10.1
Xdebug 2.7.1
Homestead 8.3.1
VSCode 1.41.1

設定

リモートサーバのXdebugの設定

Xdebugのモジュールが入っているか

$ php -m

...
[Zend Modules]
Xdebug

または

$ php --version

...
with Xdebug v2.2.4, Copyright (c) 2002-2014, by Derick Rethans

phpinfo();を出力、またはphp.iniでxdebugの確認をします。
以下のようになっていればOKです。

xdebug.remote_enable = 1
xdebug.remote_autostart = 1
xdebug.remote_connect_back = 1

php.iniのファイルの場所は以下で確認できます。

$ local php.ini

または

$ php -i | grep "Loaded Configuration File"

Loaded Configuration File => /etc/php.ini

参考：VisualStudioCodeのデバッグでどうしてもブレークで止まらない場合 (PHP Xdebug) - Qiita

VSCode拡張機能のインストール

VSCodeの拡張機能であるPHP Debugを以下の手順でインストールします。

1. 左側の四角いアイコンを押して拡張機能のメニューを開く
2. 左上の検索バーでPHP Debugを検索
3. Installボタンをクリック

XDebug設定ファイルの作成

次にXDebugの設定ファイルを以下の手順で作成します。

1. デバッグしたいプロジェクトファイルを開く
2. fn+F5キー（デバッグ実行のショートカットキー）を押す（もしくは左側のデバッグアイコン > [create a launch.json file.]というリンクをクリック）
3. 実行環境を選択するバーが現れるので、PHPをクリック

これで、.vscode/launch.jsonというファイルがプロジェクトに作成されます。

4.launch.jsonファイルの中にpathMappingという項目を追加

launch.json

"pathMappings": {
    "/home/vagrant/code/プロジェクト名": "${workspaceRoot}"
}

左側はHomestead内のプロジェクトパス、右側はローカルのプロジェクトパスを記載してマッピングします。
これでXDebugのファイル設定は完了です。

ブラウザ拡張機能のインストール

Homesteadで構築している場合は、リモートデバッグを有効にするためにブラウザに拡張機能をインストールする必要があります。
ここではChromeの拡張機能である Xdebug helper を利用したいと思います。

1. Xdebug helper にアクセス
2. Chromeに追加ボタンをクリックしてインストール

メニューバーにデバッガのアイコンが追加されたら完了です。

デバッグしてみる

1. 実行を止めたい行(数字の左側)をクリックしてブレークポイントをおきます。
2. fn+F5キーを押す
3. デバッグしたいWebページにアクセスまたはアクション（ボタンクリックなど）

するとこのように止まります。
画面左側のメニューで変数の中身やコールスタックなどを確認できます。

ステップ実行操作

軽くですがステップ実行操作の説明です。画面上部にあるバーで操作します。

スタート：次のブレークポイントまで実行
ステップオーバー：次の行にジャンプ
ステップイン；関数呼び出し先へのファイルへジャンプ
ステップアウト：関数呼び出し元のファイルへジャンプ
リスタート：デバッグを最初からやり直し
ストップ：デバッグ実行を停止

参考

Xdebug: Documentation
XdebugによるWebリクエストのデバッグ | Laravel Homestead 6.x Laravel
Laravel Homestead + Visual Studio Code + Xdebugでデバッグ環境構築 - Qiita
How to Set Up Xdebug on Laravel Homestead and VSCode