経験知ロゴ

PhpStorm と Local by Flywheel で Xdebug でのデバッグ環境を構築する方法

local by flywheel xdebug

PhpstormとLocal by flywheelの環境でXdebugでデバッグを行えるようにするメモ。

Local by flywheelの準備

Local by flywheelとPhpStormを連携させるにはLocal by flywheelが「Custom」でインストールされていないと連携できない。

「サイト」→「OVERVIE」→「Local Enviroment」が「Custom」になっていればOK。
custom

「Preferred」になっていたらXdebugとPhpStormに接続するためのプラグインの実行をクリックできない。

「Preferred」なら、新しくWordPress環境を構築し直さなければならない。

新しく環境を追加する画面で「Custom」を選択して環境を構築する。
環境構築

Customで環境が構築できたら、左の「プラグインマーク」→「Xdebug + PhpStorm」をクリック。
Xdebug phpstormをクリック

「INSTALL」をクリック。
インストールをクリック

左メニューの「ウィンドウマーク」→「サイト」→「UTILITIES」→「CONFIGURE PHPSTORM AND INTELLIJ IDES」をクリック。(FlywheelをPreferredで構築したらここがクリックできない)
Xdebugを有効

クリックしても何も起こらないが、Local by Flywheelで作った環境の中の「app/public」フォルダ内に「.idea」というフォルダが作成される。不可視ファイルなので通常は見えないが、
command + Shift + .で表示非表示を切り替えられる。
.idea

なお、Local by Flywheelで作ったサイトのローカルドメインを変更した場合、PhpStormでXdebugを実行すると以前のURLにアクセスしてしまい詰むが、この「.idea」を一旦削除して「CONFIGURE PHPSTORM AND INTELLIJ IDES」をクリックして再び作成すれば新しいドメインでアクセスできるようになる。

PhpStormでのXdebugを実行

PhpStormでLocal by Flywheelで構築したWordPressのプロジェクトを作成し、右上の緑色の虫マークをクリック。
デバッグを実行

ブラウザが立ち上がってサイトが表示されればOK。

PhpStormに戻ると画面下にデバッグウィンドウが表示されている。
デバッグ画面

緑色の虫マークをクリックした後、ブラウザが表示されて何も表示されず、PhpStormに「Waiting for incoming connection with ide key 〜」と表示されていたらポートが開いていないのが理由かも。
waitting

使っているファイヤーウォールやセキュリティーソフトでローカルポートの「9000」を開ければ実行できるようになった。

ポート番号を変える

ポート番号を変えることで実行できるようになるという話もあるし、9000番以外の番号に指定するために、Xdebugで使うポート番号の変更方法も紹介。

Local by Flywheelの環境が入っているフォルダの「conf/php/使っているバージョン/php.ini」を開く。
php.iniを編集

下の方にXdebugの設定項目があるので、「sdebug.remote_port」を9000から9001にするなど、番号を変更して保存。
Xdebugのポート番号を変更

設定を反映させるためにLocal by Flywheelでサイトを再起動すればOK。

おわりに

PhpStorm と Local by Flywheel で Xdebug でのデバッグ環境を構築する方法を紹介しました。

FlywheelをCustomで構築していなかったので一から作り直すことになり、再構築にかなり手間取りました。

ようやく完成しても、新しいドメインが反映されなかったりポートが開いていないことでページが表示されないなど、構築にめっちゃ時間がかかりました…。

役に立ったらこの記事のシェアをお願いします

ブログのフォロー・RSS購読は下記ボタンから