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

この記事は、[VSCode](https://azure.microsoft.com/ja-jp/products/visual-studio-code/) + [Xdebug](https://xdebug.org/) + [Laravel Homestead](https://readouble.com/laravel/6.x/ja/homestead.html) において、**リモート環境においてステップ実行でWebリクエストのデバッグ**するやり方です。
すでにHomesteadの環境構築を行っている前提で説明します。

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

##### 追記
[[PHP] Xdebug のリモートデバッグ、理解していますか？ - Qiita](https://qiita.com/castaneai/items/d5fdf577a348012ed8af)
この記事の説明がめちゃくちゃわかりやすいので一度目を通すといいと思います。

# 環境
macOS Catalina 10.15.2
Laravel1 6.10.1
Xdebug 2.7.1
Homestead 8.3.1
VSCode 1.41.1

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

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

```bash
$ php -m

...
[Zend Modules]
Xdebug
```

または

```
$ php --version

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


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

```config
xdebug.remote_enable = 1
xdebug.remote_autostart = 1
xdebug.remote_connect_back = 1
```

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

```bash
$ local php.ini
```

または

```
$ php -i | grep "Loaded Configuration File"

Loaded Configuration File => /etc/php.ini
```

参考：[VisualStudioCodeのデバッグでどうしてもブレークで止まらない場合 (PHP Xdebug) - Qiita](https://qiita.com/rrryutaro/items/c08f667f20de6abf482f)

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

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

<img width="1440" alt="スクリーンショット 2020-01-28 21.43.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140953/e0d1fbf1-52d3-721d-ea42-179a4192b01b.png">

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

## XDebug設定ファイルの作成

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

<img width="1440" alt="スクリーンショット 2020-01-28 22.23.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140953/96a3b337-6068-e7e7-75df-a57502c7da15.png">


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

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


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

<img width="1440" alt="スクリーンショット 2020-01-28 22.55.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140953/d055f87b-a9ee-baa7-7d9d-f36f745d48e3.png">

```launch.json
"pathMappings": {
    "/home/vagrant/code/プロジェクト名": "${workspaceRoot}"
}
```
左側は**Homestead**内のプロジェクトパス、右側は**ローカル**のプロジェクトパスを記載してマッピングします。
これでXDebugのファイル設定は完了です。

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

Homesteadで構築している場合は、**リモートデバッグ**を有効にするためにブラウザに拡張機能をインストールする必要があります。
ここではChromeの拡張機能である [Xdebug helper](https://chrome.google.com/webstore/detail/xdebug-helper/eadndfjplgieldjbigjakmdgkmoaaaoc/) を利用したいと思います。

1. [Xdebug helper](https://chrome.google.com/webstore/detail/xdebug-helper/eadndfjplgieldjbigjakmdgkmoaaaoc/) にアクセス
2. **Chromeに追加ボタン**をクリックしてインストール

<img width="1440" alt="スクリーンショット 2020-01-28 22.30.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140953/0ff12858-5de4-13df-e03a-042fd3e1b3a9.png">

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

# デバッグしてみる

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

<img width="1440" alt="スクリーンショット 2020-01-28 23.09.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140953/7167baa0-8bb6-4bdd-7956-a77c6d7df050.png">

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

## ステップ実行操作
軽くですがステップ実行操作の説明です。画面上部にあるバーで操作します。
<img width="214" alt="スクリーンショット 2020-01-28 23.09.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140953/7fe66dc7-73c6-c776-38da-e41ea22c1911.png">

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

# 参考
[Xdebug: Documentation](https://xdebug.org/docs/)
[XdebugによるWebリクエストのデバッグ | Laravel Homestead 6.x Laravel](https://readouble.com/laravel/6.x/ja/homestead.html?header=Xdebug%25E3%2581%25AB%25E3%2582%2588%25E3%2582%258BWeb%25E3%2583%25AA%25E3%2582%25AF%25E3%2582%25A8%25E3%2582%25B9%25E3%2583%2588%25E3%2581%25AE%25E3%2583%2587%25E3%2583%2590%25E3%2583%2583%25E3%2582%25B0)
[Laravel Homestead + Visual Studio Code + Xdebugでデバッグ環境構築 - Qiita](https://qiita.com/itigoore01/items/c0e8ef5756503ef588d1)
[How to Set Up Xdebug on Laravel Homestead and VSCode](https://www.patrickstephan.me/post/how-to-set-up-xdebug-on-laravel-homestead-and-vscode.html)