LoginSignup
7
9

More than 3 years have passed since last update.

超簡単Local by Flywheel で Visual Studio Code + xdebug 環境を add-on で作る

Posted at

TL;DR (too long, don't read)

あまりにも簡単になって感動。タイトルの通り

  1. Local by Flywheel(以下、LxF) で Add-on で VS Code + xdebug をインストール、有効化
  2. LxF で WordPress を作成
  3. Utilitys で 有効化(再起動)
  4. Visual Studio Code で公開フォルダを開く
  5. デバッグテスト(完了)

環境は以下の通り。

  • Local by Flywheel ver 5.7.5+4909(多分、5.6.1以上が必要)
  • xDebug + VS Code Add-on ver 1.0.4
  • VS Code 1.49.2
  • Mac環境
  • WordPress (Customで作成 重要

背景

本職のプログラマではなく、時々、仕方なくプログラムを書くので、環境設定は忘れてしまう。特に、xdebug の設定は、ややこしい。phpStorm はドキュメントのリンクを行ったり来たりして、設定に四苦八苦。やり方をメモするも、次回やってみると、ブレークポイントをスルーされる。

クッキー?セッション?ポート番号指定で開始?など、いつも不安定。とにかく、さくっと簡単なコードを、大したテストはしないけど、動作をしっかりチェックしてリリースたいだけなのに、その前の作業が大変で本末転倒。

・・・

Local by Flywheelのおかげで、WordPress環境の立ち上げはものすごく簡単に。さらに、phpStormのAdd-onのおかげで、デバッグ環境もかなり簡単になりました。

しかし、たまにしか開発しないし、大それたコードも書かないのに、phpStormはもったいない。情報も少ないので、vs code に鞍替え したのですが、デバッグ環境を作るのに苦労してました。

それが、Add-on がリリースされて一発解決です。

スクリーンショット

Add-ons から Xdebug + VS Code をインストール。Enable Launch をしないと使えません。
スクリーンショット 2020-10-08 4.39.42.png

WordPress環境は念のため「カスタム」で作成。確か、Customでないとデバッグ環境が作れないとか、書いていた気がする(試してません)
スクリーンショット 2020-10-08 5.03.47.png

ADD RUN CONFIGURATION TO VS CODE を実行する
スクリーンショット 2020-10-08 4.41.27.png

VS Codeで「Local Sites > name > app > public」を開いて、デバッグモード。適当なところにブレークポイントをつけてテストしてみる
スクリーンショット 2020-10-08 4.45.28.png

7
9
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
7
9