15
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-01-28

この記事は、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を以下の手順でインストールします。

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

XDebug設定ファイルの作成

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

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

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

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

スクリーンショット 2020-01-28 22.55.05.png
launch.json
"pathMappings": {
    "/home/vagrant/code/プロジェクト名": "${workspaceRoot}"
}

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

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

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

  1. Xdebug helper にアクセス
  2. Chromeに追加ボタンをクリックしてインストール
スクリーンショット 2020-01-28 22.30.34.png

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

デバッグしてみる

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

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

ステップ実行操作

軽くですがステップ実行操作の説明です。画面上部にあるバーで操作します。
スクリーンショット 2020-01-28 23.09.15.png

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

参考

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

15
10
0

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
15
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?