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