Edited at

MAMP+PHPStorm+Xdebugで画面操作からデバッグする方法

MAMP+PHPStormを利用していて、ブレークポイントを張っておき、画面操作からデバッグが開始できるようにする方法を紹介します。

PHPをやろうと思って使い始めたPHPStormですが、ブラウザの画面上から操作をトリガーにして、ブレークポイントで止める方法がわからず、調べるのに少し苦労しました。また何回も調べ直すのは面倒なので、備忘録的に書いておきます。


動作確認環境

・macOS Mojave(ver 10.14)

・MAMP ver 5.2

・PHP5.6.23

・PhpStorm 2018.3.3

・Google Chrome


前提条件

MAMPを既にインストールされている方が対象です。

まだインストールされていない方はこちらを参照してください。

https://pc-karuma.net/mamp-settings-mac/)

PhpStormを既にインストールされている方が対象です。

まだインストールされていない方はこちらを参照してください。

http://www.jetbrains.com/phpstorm/)

PhpStormは日本語化されていることが前提です。

まだ日本語化をされていなくて、適用を検討の方はこちらを参照してください。

https://pleiades.io/pages/pleiades_jetbrains_manual.html)


PHP + MAMPの設定


PHPのバージョン確認

MAMPからphpinfoを選択すると、PHPのバージョンを確認することができます。

(図では、version 5.6.37)

また「Loaded Configuration File」の項目で、今現在起動の際に読み込まれているphp.iniファイルの場所も確認することができます。


Xdebugの有効化

ここではphp.iniファイルを編集し、Xdebugを有効化するように変更します。

phpinfoで場所を確認したphp.iniを開いたら、「xdebug」で検索し、下記の一文を確認します。

[xdebug]

;zend_extension="/Applications/MAMP/bin/php/php5.6.37/lib/php/extensions/no-debug-non-zts-20131226/

まずは上記の文の先頭にあるコメントを外し、下記のような項目を加えます。

[xdebug]

zend_extension="/Applications/MAMP/bin/php/php5.6.37/lib/php/extensions/no-debug-non-zts-20131226/
xdebug.remote_enable=on
xdebug.remote_handler=dbgp
xdebug.remote_mode=req
xdebug.remote_host=localhost
xdebug.remote_port=9000
xdebug.remote_autostart=1
xdebug.idekey=PHPSTORM
xdebug.profiler_enable=1
xdebug.profiler_output_dir="/Applications/MAMP/tmp"

上記の設定を追加したら、ファイルを保存してMAMPを再起動します。

Xdebugが有効化されているかを、phpinfoを使って確認しましょう。

下図のような表示があれば、有効化は完了です。


PhpStormの設定

ここからはPhpStormでXdebugを利用するための設定を行っていきます。


PHPのバージョンとPHP実行ファイルの設定

まずはPHPのバージョンをご自身が利用しているPHPのバージョンで設定します。

1.PhpStormの「環境設定」から「言語&フレームワーク」>>「PHP」と進みます。

2.「PHP言語レベル」にphpinfoで確認したバージョンを入力します。

3.「CLIインタープリター」は右のボタンをクリックし、下図のように設定します。


サーバー設定

デバッグ用でサーバの設定を行います。

1.PhpStormの「環境設定」から「言語&フレームワーク」>>「PHP」>>「サーバー」と進みます

2.左上の「+」ボタンをクリックします。

3.名前は任意ですが、「localhost」の入力で問題ありません

4.ホストにはローカル環境でやるのであれば、「localhost」で入力します。

5.ポート「80」、デバッガー「Xdebug」を設定します。

6.「OK」ボタンをクリックします。


Xdebug の受信ポート番号を確認

Xdebugで待ち受けをするポート番号を設定・確認します。

「環境設定」>>「言語&フレームワーク」>>「PHP」>>「デバッグ」をクリックします。

PhpStorm から Xdebug を利用する場合のポート番号を確認し xdebug.ini の remote_port と同じ値に設定します。既定は「9000」ですが、その設定のままで問題ないです。


リモートデバッグ設定

1.メニューバーの「実行」>>「構成の編集」をクリックします。

2.左上の「+」ボタンをクリックし、「PHP Remote Debug」を選択します。

3.名前を「Xdebug」と入力します。

4.サーバーを「localhost」、ideキーは「PHPSTORM」と入力します。

5.「OK」ボタンをクリックします。


デバッグ

ここからデバッグを動かすまでの手順を紹介していきます。

PhpStorm画面の右上にあるツールバーから、赤四角枠の部分を「Xdebug」に設定します。

次に赤丸枠の受話器のようなボタンを押します。ここを有効化することで、デバッガがトリガーの受信待ちとなり準備完了となります。

あとはブラウザ上で、デバッグしたいページのURLを指定します。

この時にURLの後ろに「?XDEBUG_SESSION_START=xdebug」を付与してください。

(本来はphp.iniでxdebug.remote_autostart=1を設定していれば、不要な操作なんですがキャッシュか何かの影響でパラメータを入力しないと動かないこともありますので念の為)

これで事前に処理を止めたいところにブレークポイントを張ってデバッグを開始すると、初回は下図のような画面が表示されることがあります。

「受諾」ボタンをクリックしてください。

ここまでの操作で問題がなければ、ブレークポイントで処理が止まってくれるはずです。変数の中身などができるようになります。


参考記事

参考にさせてもらった記事です。

ここまでの手順を実施すれば、目的は達成できると思いますが、もし上手くいかない、他にも方法が知りたいなどがあればこちらも参照してください。

https://www.karakaram.com/phpstorm-xdebug

https://qiita.com/y-ta/items/fc54af35026550eb5bc6