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