[2020年版] PhpStorm＋Xdebugでステップ実行する方法 [これで100%できる]
PhpStormでWebサイトのソースコードをステップ実行する方法を解説します。
意外とググっても的確な情報が出てこなかったり、出てきても古過ぎて微妙に条件が違ってたりするなーと思ったので、改めて整理しておきます。
この記事のとおりにやれば誰でもすぐにステップ実行でデバッグができるようになると思いますので、参考にしてみてください👍
この記事の動作環境
一応僕の環境を書いておきますが、多少環境が違っても基本的に同じ手順で大丈夫なはずです。
- PhpStorm
2020.1 - PHP
7.3.14 - Xdebug
2.9.2 - Google Chrome
81.0.4044.113 (Official Build) (64ビット)
Xdebugのバージョンは
phpversion('xdebug');で確認
具体的なやり方
1. Xdebugのリモートデバッグ有効化する
PhpStormでのステップ実行は、Xdebugのリモートデバッグ機能を使って行われます。なので、あらかじめXdebugを適切に設定しておくことが必要です。
リモートデバッグ機能については こちら の記事が詳しいです。
と言っても、Xdebugに追加で設定する必要があるのは
xdebug.remote_enable=1
これだけです👌
$ php -i | grep xdebug
の出力を見て、ちゃんとXdebugが有効になっていて xdebug.remote_enable がOnになっていることを確認しておきましょう。
xdebug support => enabled
:
xdebug.remote_enable => On => On
:
2. PhpStormのXdebug連携の設定内容を確認する
次に、PhpStormでXdebugのリモートデバッグ機能が正しく使えるように、設定内容を確認します。
Preference > Languages & Frameworks > PHP > Debug を開いて、 Xdebug の箇所を確認してください。
下図のように、 Debug port: が 9000 になっていて、 Can accept external connections にチェックが入っていればOKです。
なお、 9000 というのはXdebugの設定値 xdebug.remote_port のデフォルト値です。
もしXdebugの設定を変更している場合は、PhpStormのここの設定もそれに合わせて変える必要があります。
$ php -i | grep xdebug.remote_port
xdebug.remote_port => 9000 => 9000
でXdebugに設定されているポート番号を調べてください✋
3. ブラウザにXdebugを利用するための拡張を入れる
次に、ブラウザからXdebugを利用できるようにする必要があります。
詳しくは こちらのヘルプページ をご参照ください。
Chromeの場合なら、こちらの拡張機能 をインストールすればOKです。
他のブラウザで利用したい場合は、上記ヘルプページのリンクから対応する拡張機能をインストールするか、こちらのページ でXdebug用の Start debugger Stop debugger 2つのブックマークレットを取得して、ブックマークに登録しておけばOKです。
4. 実際にステップ実行してみる
以上で準備は完了です。実際にステップ実行してみましょう。
適当なサイトのソースコードをPhpStormで開いたら、画面右上あたりにある受話器のようなアイコンをクリックして、デバッガーからの接続のリスニングを開始します。
Run > Start Listening for PHP Debug Connections からでも実行できます。
下図のように受話器がリスニング中っぽいアイコンに変わったら接続待ち状態です。
ステップ実行を行うために、適当な行にブレークポイントを張っておきましょう。
では次に、ブラウザから接続を開始します。
先ほどインストールしたブラウザの拡張機能で、デバッガーを開始させてください。Chrome拡張の場合は下図のとおり Debug ボタンをクリックします。
デバッガーが開始すると、虫が緑色になります。
これで接続完了です。
サイトを読み込んでみましょう。
リロードした瞬間にPhpStormにフォーカスが移って、
こんな感じの確認画面が表示されました。Acceptするとそのままブレークポイントで処理が止まって、そこからステップ実行ができる状態になりました。
Acceptしたことによって Preference > Languages & Frameworks > PHP > Servers に以下のような設定が自動で追加されています。
これが追加されたので、2回目以降は確認画面なしでいきなりデバッグが始まります。
5. 使い終わったらブラウザのデバッガーとPhpStormのリスニング状態を止める
用が済んだら、忘れずにブラウザのデバッガーを止めてPhpStormのリスニング状態を解除しておきましょう。
Chrome拡張なら、 Disable をクリックして止めます。
PhpStorm側は、受話器のアイコンをこの状態に戻します。
まとめ
PhpStorm＋Xdebugでステップ実行する方法を丁寧に解説してみました。参考になれば幸いです。
Discussion