Visual Studio CodeでLaravelをデバッグする設定【Vagrant編】

4883 ワード
xdebug Laravel Vagrant VSCode デバッグ Vagrant テキストリンク

普段、Laravel書くのはPhpStormしか使ってないですが、VSCodeでのLaravelのリモートデバッグ設定をしてみました。

マシンスペック

  • Mac mini 2018
  • macOS Catalina（10.15.x）
  • Intel Core-i7 3.2GHz 6コア
  • メモリ 32GB
  • SSD 512GB

リモート環境

  • CentOS7.x
  • MySQL5.7.x
  • Nginx最新版
  • PHP7.1.x
  • Laravel5.6
  • Vagrant
  • Ansible

やること

  • VSCodeでLaravelをリモートデバッグする

前提

  • Visual Studio Codeはインストール済み
  • Visual Studio Codeを日本語化済み

リモート環境を準備

【コピペ】VirtualBox＋Vagrant＋AnsibleでLaravel開発環境を構築その弐

デバッグするコードの準備

コード書くのが面倒だったら↓コチラを使ってください

Reactを初めて使ってCRUDアプリを作ってみた記録#サーバーの準備

$ git clone https://github.com/bobtabo/laravel5.6.git laravel5

実行URL：http://laravel5.local/api/users

リモートデバッグする

拡張機能をインストール

  • 拡張機能を開きます
  • phpで検索します
  • PHP Debugをインストールします

デバッグ設定

  1. デバッグするLaravelプロジェクトを開きます
  2. 左メニューの好きな所を右クリックします
  3. 実行をクリックします
  4. launch.json ファイルを作成しますをクリックします
  5. PHPをクリックします
  6. Laravelプロジェクトに追加されます
  7. launch.jsonを編集します
  8. "port": 9000の後ろにカンマを入力します
  9. "pathMappings"を追記します
"port": 9000
↓
"port": 9000,
"pathMappings": {
    "/home/vagrant/laravel5": "${workspaceRoot}"
}

デバッグ

  1. 行番号の左側をクリックし、ブレークポイントを設定します
  2. 実行メニューのデバッグの開始をクリックします
  3. デバッグしたいWebページにアクセスします
  4. ブレークポイントを設定した行に止まります
  5. ステップオーバーなどは、画面上部のバー・実行メニュー・ファンクションキーで操作します

※参考
https://qiita.com/mgmgmogumi/items/4df4cc3cffde30ed9c94