Vagrant + PhpStormでブレークポイントを使用したデバッグをしたい

PHP

大規模な開発や、オブジェクトを扱うような開発だと、いくらPHPでもエディタでの開発/デバッグ作業に限界を感じる時があります。
そこで、最近、PhpStormを使用することになりました。

今回はPhpStormでデバッグモードを実行するまでの手法を残しておこうと思います。

スポンサーリンク

前置き

参考

Vagrantを使用せず、Windowsns内にすべて開発環境をそろえている方は以下記事が参考になります。

概要

やることはざっくり以下4ステップ。
1) Xdebugが利用できるかチェック
2) Xdebugダウンロード
3) phpiniの設定
4) PhpStormの設定

実行環境

以下、私の実行環境の前置きとなります。

CentOS 7
Apache 2.4
PHP 7.2

※ Vagrantでsynced_folderを設定
 =>ローカルWindows上のファイルを仮想環境(CentOS7)と同期させている。
※仮想環境でLAMP環境が整っていること + PhpStormがインストールされてること。

Xdebugを利用できるかチェック

まずphpinfoをブラウザに表示しましょう。
ここでDebug Buildが「no」になっている非デバッグ版のPHPであればXdebugを利用できます。

Xdebug導入

インストール

Xdebugをインストールします。

$ yum -y install --enablerepo=remi-php72 php-xdebug

ちなみにPHPはRemiレポジトリから7.2をインストールしてます。
そのため適宜、ver箇所は差し替えてください。

確認

ダウンロードができたか確認してみましょう。
php.dフォルダに追加されているはずです。

$ ls -l /etc/php.d
[root@localhost php.d]# ls -l /etc/php.d
total 188
-rw-r--r--. 1 root root 37848 Oct 31 14:05 15-xdebug.ini // !!これ!!
-rw-r--r--. 1 root root    50 Oct 22 09:19 20-bcmath.ini
-rw-r--r--. 1 root root    44 Oct 22 09:19 20-bz2.ini
-rw-r--r--. 1 root root    54 Oct 22 09:19 20-calendar.ini
-rw-r--r--. 1 root root    48 Oct 22 09:19 20-ctype.ini
-rw-r--r--. 1 root root    46 Oct 22 09:19 20-curl.ini
-rw-r--r--. 1 root root    44 Oct 22 09:19 20-dom.ini
-rw-r--r--. 1 root root    46 Oct 22 09:19 20-exif.ini
-rw-r--r--. 1 root root    54 Oct 22 09:19 20-fileinfo.ini
-rw-r--r--. 1 root root    44 Oct 22 09:19 20-ftp.ini
-rw-r--r--. 1 root root    42 Oct 22 09:19 20-gd.ini
-rw-r--r--. 1 root root    52 Oct 22 09:19 20-gettext.ini
-rw-r--r--. 1 root root    48 Oct 22 09:19 20-iconv.ini
-rw-r--r--. 1 root root    46 Oct 22 09:19 20-json.ini
-rw-r--r--. 1 root root    54 Oct 22 09:19 20-mbstring.ini
-rw-r--r--. 1 root root    52 Oct 22 09:19 20-mysqlnd.ini
-rw-r--r--. 1 root root    44 Oct 22 09:19 20-pdo.ini
-rw-r--r--. 1 root root    46 Oct 22 09:19 20-phar.ini
-rw-r--r--. 1 root root    48 Oct 22 09:19 20-posix.ini
-rw-r--r--. 1 root root    48 Oct 22 09:19 20-shmop.ini
-rw-r--r--. 1 root root    56 Oct 22 09:19 20-simplexml.ini
-rw-r--r--. 1 root root    52 Oct 22 09:19 20-sockets.ini
-rw-r--r--. 1 root root    52 Oct 22 09:19 20-sqlite3.ini
-rw-r--r--. 1 root root    52 Oct 22 09:19 20-sysvmsg.ini
-rw-r--r--. 1 root root    52 Oct 22 09:19 20-sysvsem.ini
-rw-r--r--. 1 root root    52 Oct 22 09:19 20-sysvshm.ini
-rw-r--r--. 1 root root    46 Oct 22 09:19 20-tidy.ini
-rw-r--r--. 1 root root    56 Oct 22 09:19 20-tokenizer.ini
-rw-r--r--. 1 root root    44 Oct 22 09:19 20-xml.ini
-rw-r--r--. 1 root root    56 Oct 22 09:19 20-xmlwriter.ini
-rw-r--r--. 1 root root    44 Oct 22 09:19 20-xsl.ini
-rw-r--r--. 1 root root    50 Oct 22 09:19 30-mysqli.ini
-rw-r--r--. 1 root root    56 Oct 22 09:19 30-pdo_mysql.ini
-rw-r--r--. 1 root root    58 Oct 22 09:19 30-pdo_sqlite.ini
-rw-r--r--. 1 root root    46 Oct 22 09:19 30-wddx.ini
-rw-r--r--. 1 root root    56 Oct 22 09:19 30-xmlreader.ini
-rw-r--r--. 1 root root    47 Sep  9 12:10 40-zip.ini
-rw-r--r--. 1 root root   614 Oct 31 08:21 50-phalcon.ini

「15-xdebug.ini」が追加されていればOKです!

iniファイルの編集

追加された15-xdebug.iniを編集します。

最終行に以下を追記してください。

[XDebug]
xdebug.dump_undefined = 1
xdebug.remote_enable = 1
xdebug.remote_host=localhost
xdebug.remote_port=9000
xdebug.remote_handler=dbgp
xdebug.remote_mode=req
xdebug.remote_autostart = 1
xdebug.remote_connect_back=1

iniを編集したのでapacheを再起動して設定を反映させます。

$ systemctl restart httpd

PhpStormの設定

構成の作成

PhpStormを開くとまっさらな状態の場合、以下のようになってると思います。
「Add Configuration」を押下して実行形式を作成します。

実行形式を新規追加します。左上のプラスボタンを押下してください。

A)「PHP Web Page」を選択してください。
B) Serverはホストを指定します。※設定値に合わせ適宜変更してください。
C) 実行時のURLを指定します。とりあえずドキュメントルートに指定します。

最後にOKで設定を適用しましょう。

パスのマッピング

止めたい箇所にブレークポイントをはります。

※このサンプルでは、Phalconエントリーポイントのindex.phpにブレークポイント張ってます。
(私はPHPフレームワークのPhalconを使用しております)

受話器みたいなアイコンを押下してデバッグモードをONにします。
デバッグモードのON/OFFはここで切り替えます。

虫のようなアイコンをクリックします。

PHP Web Pageで設定したWEBページが開きます。
以下ポップアップが表示されたら「Accept」を押下しましょう。

ブレークポイント箇所のソースコードが実行されると、デバッグスペースに以下メッセージが表示されると思います。

ここでは「Cannot find local copy or the file on server /var/www/html/devblog/public/inde.php」と、いわれています。

次画面でローカルパスと仮想環境上にあるソースをマッピングします。
「Click to set op path mappings」リンクを選択しましょう。

まず、「Use path mappings(select if the server is remote or symlinks are used)」にチェックをいれます。

そうすると、以下画像のようにプロジェクトディレクトリが表示されるので、そこから仮想環境上のindex.phpのパスを「Absolute path on the server」に指定しましょう。

これでマッピングは完成です。
と、同時に、ブレークポイントでちゃんと止まっているはず。

ちなみに、パスマッピングの設定は、
PhpStormのヘッダメニュー「File」 => 「Setting」 => 「Languages & Frameworks」 => 「PHP」 => 「Debug」 => 「Servers」
からも設定できます。

使いかた

あっさりになりますが、デバッグモードの使い方についてです。

A) 次にあるブレークポイントまで処理を進めます。
B) デバッグモードを終了します。
C) 一行進みます
D) 処理(メソッド等)に階層があれば階層内に進みます。
E) このスペースに変数やオブジェクトの中身が表示されます。


以上、これでかなり開発がはかどりますね!

トラブルシューティング

Xdebugのバージョンについて

■2021/03/02更新
本記事のXdebugの想定バージョンはXdebug2となります。
※ 記事を書いた当時のXdebugのバージョンは2でした。

実行タイミングによってXdebug3が導入される可能性があります。
Xdebug3とXdebug2では設定値は異なります。(iniの記述方法が異なります)
うまく動作しなかったら、導入されているXdebugのバージョンを確認してみてください。

Xdebug3の設定については以下を参考にしてください。

タイトルとURLをコピーしました