この記事は現役ウェブディベロッパーがわかりやすさにこだわって作成しました
概要
Vagrant環境で作成したWORDPRESSのWEBサイトをJetBrains製IDEのPHPSTORMでデバッグする時に必要な設定を記載しています。VagrantはVirtualBoxですので、バーチャルマシンとのリモートデバッグの手順になります。
環境
- Vagrant
- WordPress
- PHPSTORM
※VirtualMachine側の設定としてXDebugが動作している必要があります。
XDEBUG設定
XDEBUGのインストール
ターゲットマシンにXDEBUGをインストールしてください。
PHP.INIの設定
PHPSTORMでターゲットマシンのPHPソースコードをデバッグするために、PHP.INIに以下の設定を追加します。
[Xdebug] zend_extension="C:\xampp\php\ext\php_xdebug.dll" xdebug.remote_enable=1 xdebug.remote_port="9001" xdebug.idekey = "PHPSTORM" xdebug.remote_autostart=1
![](https://blogdeoshiete.com/wp-content/uploads/cocoon-resources/blog-card-cache/d57fb91c218aefd716bc7498768bbb91.png)
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCUEhQJTVEJTIwWGRlYnVnJTIwJUUzJTgxJUFFJUUzJTgzJUFBJUUzJTgzJUEyJUUzJTgzJUJDJUUzJTgzJTg4JUUzJTgzJTg3JUUzJTgzJTkwJUUzJTgzJTgzJUUzJTgyJUIwJUUzJTgwJTgxJUU3JTkwJTg2JUU4JUE3JUEzJUUzJTgxJTk3JUUzJTgxJUE2JUUzJTgxJTg0JUUzJTgxJUJFJUUzJTgxJTk5JUUzJTgxJThCJUVGJUJDJTlGJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1kN2JlOTRlYjFiNDgwZmQ2ZWQ4OTIyMzdjZDhhYWNhMg&mark-x=142&mark-y=112&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwY2FzdGFuZWFpJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1mODQ2ODQ0OGEzYmY3MzVhNDYzMmY5YmNjNTAyNDllMw&blend-x=142&blend-y=491&blend-mode=normal&s=2e309f851cd9545c5bc93a5c38175b02)
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCUEhQJTVEJTIwWGRlYnVnJTIwJUUzJTgxJUFFJUUzJTgzJUFBJUUzJTgzJUEyJUUzJTgzJUJDJUUzJTgzJTg4JUUzJTgzJTg3JUUzJTgzJTkwJUUzJTgzJTgzJUUzJTgyJUIwJUUzJTgwJTgxJUU3JTkwJTg2JUU4JUE3JUEzJUUzJTgxJTk3JUUzJTgxJUE2JUUzJTgxJTg0JUUzJTgxJUJFJUUzJTgxJTk5JUUzJTgxJThCJUVGJUJDJTlGJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1kN2JlOTRlYjFiNDgwZmQ2ZWQ4OTIyMzdjZDhhYWNhMg&mark-x=142&mark-y=112&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwY2FzdGFuZWFpJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1mODQ2ODQ0OGEzYmY3MzVhNDYzMmY5YmNjNTAyNDllMw&blend-x=142&blend-y=491&blend-mode=normal&s=2e309f851cd9545c5bc93a5c38175b02)
PHPSTORMの設定
プロジェクト作成
- VirtualMachineのドキュメントルートと共有しているWordPressのソースコードの場所をPHPSTORMに設定します
- 起動直後の画面で、「Create New Project from Existing Files...」を選択するか、
メニューバーから「New Project from Existing Files...」を選択します。
- すでに共有化されているソースコードをしてするため、一番上の「Web server is installed locally...」を選択します。
プロジェクトファイルが存在するディレクトリを選択します。
デバッグ対象のリモートサーバーを設定します。
「新しいリモートサーバー」を選択します
ローカルにマウントされたフォルダ(ドキュメントルート)とサーバーのURLを指定します。
ドキュメントルートのディレクトリからデバッグ対象のフォルダを相対指定します。
デバッグ環境設定
PHPSTORMの設定メニューから、LANGUAGE&FRAMEWORKS→PHP→DEBUGを選択して、Xdebugを設定します
サーバーに設定したXdebugのポート番号を指定します(ここでは9001)
Configurationを選択してデバッグ条件の設定を行います。
プラスボタンで新規設定の一覧から、PHP Remote Debugを選択します
Filter Debug connection by IDE keyのチェックをONにします
サーバー情報の設定項目を新規に作成します
名前とホストURL、ポート番号を指定して、DEBUGERにはXDEBUGを選択します
USE PATH MAPPINGSにチェックを入れて、デバッグ対象のローカルのパスとサーバーのパスのマッピングを行います
IDE KEYにはXDEBUGで設定したIDを指定します
デバッグ個所にブレイクポイントを設定します。
受話器のアイコンをクリックして待機状態にします。
ブラウズからデバッグ対象のURLを入力して起動します
PHPSTORM上のブレイクポイントを設定した箇所でプログラミングが中断するのでデバッグコマンドを使用してデバッグしていきます。