More than 5 years have passed since last update.

PhpStormでXdebugを使えるようにしよう！

Last updated at 2018-05-21Posted at 2017-06-13

この記事でできること

PhpStormを使ってXdebugを使うことができる。
ところまで設定ができる。

所要時間はだいたい半日かければうまく設定できるはずと言われ、僕は1日かかりました…
なので、環境を整えるために時間に余裕がある時にやってみてください。

※この記事では使い方までは詳しく説明しません。

Xdebugとは？

Xdebugとは高機能なPHPのデバッグツールです。 PHPのデバッグでおなじみの「var_dump」を見やすくしてくれたり、ボトムネックになっている処理を見つけたり、ステップ実行できたりします。その他のデバッグツールとしてはZendDebuggerがあります。
Xdebugを使い倒す5つのTIPS | スマホサイト・アプリをつくろう。
より。

想定環境

vagrant -v
> Vagrant 1.8.6

php -v
> PHP 7.1.5 (cli) (built: May  9 2017 18:30:17) ( NTS )

nginx -V
> nginx version: nginx/1.10.2

PhpStorm　

やること

vagrant側での設定
設定の確認
PhpStormの設定

ではここから、設定を行っていきます。

vagrant環境内の設定

vagrantにアクセス

$ vagrant up
$ vagrant ssh

Xdebugのインストール
自分のvagrantにインストールされているPHPのバージョンと、インストール先のリポジトリに合わせるために、yumのパッケージを確認します。

自分の場合は、PHPのバージョン7.1で@remiからなので、--enablerepoオプションをつけて実行しました。

yum list installed #yumのインストールパッケージを確認できる
yum install --enablerepo=remi-php71 php-xdebug

Xdebugの設定ファイルを変更する
Xdebugの設定ファイルは、/etc/php.d のディレクトリ直下にあるので、ここを編集します。
（もしここにファイルが無ければ、yum install がコケているか、うまく行ってない可能性があるので再インストールをするか、/etc/php.iniファイルを編集しましょう。）

sudo vim /etc/php.d/15-xdebug.ini

設定項目は以下の通りです。ファイルが結構膨大なので、vim内で検索を上手に使ってください。

※vimは、/{word}でファイル内検索ができ、キーボードのNを押すと次の検索結果に遷移できます。

zend_extension=xdebug.so
xdebug.remote_enable=1
xdebug.remote_autostart=1
xdebug.remote_host=10.0.2.2 
xdebug.remote_port=9001 # 9000だとたまにエラーが出るようなので、9000番以外の設定がおすすめ
xdebug.remote_log=/tmp/xdebug.log

こんな感じで、必要最低限

zend_extension
Xdebugの拡張モジュールファイルです。これを指定してあげないと行けないので、もし動かなければこのファイルの存在確認を行いましょう。
xdebug.remote～
リモート実行用の設定。「xdebug.remote_host」で接続するホストを設定。今回はlocalhostなので127.0.0.1。
remote_hostとは、VBから見たmacのIPアドレスのことです。ここの設定が結構迷うところなんですが、上記のような設定で試してみてください。もし駄目ならip a ip rとかで調べてみてください。

以上設定が終わったら、php-fpmのリスタートをしましょう。念のため、nginxもリスタートさせると良いかもしれないです。

sudo systemctl restart php-fpm
sudo systemctl restart nginx #もし、読み込まれない場合

設定の確認

phpinfo();で確認

そもそも先程作成したiniファイルがちゃんと読み込まれいてるか確認しましょう。phpinfoとかを使ってうまく出力してください。
もし、ここにファイルが無ければ、php-fpmでリスタートさせましょう。

うまく読み込まれていると下の方にXdebugの設定内容が確認できます。
もし、うまくいかないときは、ここを確認してきちんと設定した項目が適応されているか、見ましょう。

PhpStormの設定

ここから、PhpStormの設定を行っていきます。まずは、PhpStorm側で実行するserverの環境を登録します。

Preferences ＞ Servers ＞

serversのところを選択すると、下のような設定画面が表示されるはずです。
設定項目は以下のように設定してください。

name : 特になければHost名と一緒で大丈夫です。
Host : アクセスするホスト名が入ります。
{ localhost }のように文字で設定しても、IPアドレスで指定しても大丈夫です。macでホスト名を変更していなければ、192.168.33.~になっているはずです。
もしわからなければ、vagrantfileの設定を確認してください。
パスマッピング
もし、vagrant上とローカル環境でフォルダをシンクさせている場合は、Use path ~ にチェックを入れて、パスマッピングをします。
debugの設定