WordPress でプラグイン開発をするときにデバッグする方法についてです。
第2回目は、PHP での Web アプリケーション開発でよく利用される Xdebug というデバッガーでデバッグする方法です。
Xdebug でデバッグする場合は、Xdebug に対応した統合開発環境を利用するのが一般的です。この記事では、統合開発環境として NetBeans を利用することにします。また、実行環境も統合開発環境が動作しているコンピューター上である方が設定が簡単なので、実行環境もコンピューター上にインストールします。また、実行環境のインストールを簡単にするため、実行環境として MAMP を使用します。
目次
- MAMP インストール
- WordPress インストール
- NetBeans インストール
- Xdebug 設定
- 例：Hello Dolly プラグインのデバッグ
1. MAMP インストール
MAMP の Web サイトにアクセスし、MAMP をダウンロードしてください。ダウンロードが完了したら、ディスクイメージをマウントし、パッケージファイルを実行してください。あとは、インストールウィザードに従うだけで、インストールが完了します。
追記（2012年9月18日）：
この記事で使用している MAMP は、バージョン2.0.5です。同じバージョンを使用する場合は、下記の URL からダウンロードしてください。
http://www.mamp.info/downloads/releases/MAMP_MAMP_PRO_2.0.5.zip
同時にインストールされる MAMP PRO は使用しないので、アンインストールしてもかまいません。
インストール完了後、MAMP を起動すると、下記のようなウィンドウが表示されます。このウィンドウから、サーバーの起動や停止、環境設定を行うことができます。
MAMP ウィンドウ
起動後少し時間をおいて、下記のような MAMP のスタートページがデフォルト Web ブラウザで開かれます。このスタートページから各種管理ツールにアクセスできます。今回は、phpinfo と phpMyAdmin を使用します。
MAMP スタートページ
また、MAMP には PHP 5.2 系と PHP 5.3 系の両方が含まれています。MAMP 環境設定から選択することができます。この記事では、PHP 5.3 系を利用します。
MAMP 環境設定
2. WordPress インストール
WordPress の Web サイトにアクセスし、WordPress をダウンロードしてください。WordPress のダウンロードが完了したら、MAMP ディレクトリの htdocs に下記のように展開してください。
MAMP htdocs ディレクトリ
次に、WordPress 用のデータベースを作成します。MAMP のスタートページから phpMyAdmin にアクセスしてください。phpMyAdmin のトップページで、wordpress という名前のデータベースを作成します。
phpMyAdmin: WordPress 用データベースの作成
phpMyAdmin: WordPress 用データベースの作成
そして、wordpress データベースを操作する wordpress という名前のユーザーを作成します。
phpMyAdmin: WordPress 用ユーザーの作成
phpMyAdmin: WordPress 用ユーザーの作成
phpMyAdmin: WordPress 用ユーザーの作成
phpMyAdmin: WordPress 用ユーザーの作成
データベースの作成完了後、Web ブラウザで WordPress にアクセスします。手順通りに実行していれば、下記のアドレスでアクセスできるはずです。
http://localhost:8888/wordpress/
アクセスすると、wp-config.php がないため、下記のようなエラーページが表示されます。
WordPress › Error
Create a Configuration File ボタンをクリックし、ウィザードに従って wp-config.php を作成します。
WordPress › Setup Configuration File
下記の画面では、phpMyAdmin で作成したデータベースへの接続情報を入力してください。
WordPress › Setup Configuration File
wp-config.php ファイルができれば、あとは通常のインストール作業と変わりません。
コンピューター上の開発環境ということもあって、簡単にインストールできる方法でやっています。運用のためにインストールする場合は、Amazon EC2 に WordPress をインストールを参考にしてみてください。
WordPress › Installation
WordPress › Installation
WordPress › Installation
これで、WordPress のインストールは完了です。通常の WordPress と同様に操作できます。URL が http://localhost:8888/wordpress/ になることに注意してください。
3. NetBeans インストール
NetBeans の Web サイトにアクセスし、PHP をサポートする NetBeans をダウンロードしてください。ダウンロードが完了したら、ディスクイメージをマウントし、パッケージファイルを実行してください。あとは、インストールウィザードに従うだけで、インストールが完了します。
WordPress のソースを編集できるようにプロジェクトを作成します。
まず、NetBeans のメニューバーで、ファイル > 新規プロジェクトをクリックします。新規プロジェクトのウィザードが表示されるので、プロジェクトで「既存のソースを使用する PHP アプリケーション」を選択し、「次へ」をクリックしてください。
NetBeans: 新規プロジェクトウィザード
ソースフォルダは、 /Applications/MAMP/htdocs/wordpress を参照します。PHP のバージョンは、PHP 5.3 を選択し、「次へ」をクリックしてください。
NetBeans: 新規既存のソースを使用する PHP プロジェクトウィザード
プロジェクト URL を MAMP に合わせて http://localhost:8888/wordpress/ に変更し、「完了」をクリックしてください。
NetBeans: 新規既存のソースを使用する PHP プロジェクトウィザード
今回は WordPress のプロジェクトを MAMP の htdocs ディレクトリで管理していますが、ホームディレクトリの NetBeansProjects ディレクトリで管理することも可能です。WordPress を NetBeansProjects ディレクトリに展開し、新規プロジェクトのウィザードで同様にプロジェクトを作成してください。ウィザードの最後で、「ファイルをソースフォルダから別の場所にコピー」を有効にし、 /Applications/MAMP/htdocs/wordpress にコピーするように設定してください。これによって、NetBeans から実行する場合は、WordPress のソースファイルがコピーされてから実行されることになります。
この記事で WordPress のプロジェクトを MAMP の htdocs ディレクトリで管理しているのは、ファイルを保存するだけですぐにブラウザで確認できるようにするためです。NetBeansProjects ディレクトリで管理していると、NetBeans で実行して htdocs ディレクトリにファイルをコピーする必要があり、すぐにブラウザで確認できないからです。
どちらも一長一短なところがあるので、プロジェクト管理の好みに合わせて好きな方を選んでください。
4. Xdebug 設定
Xdebug の設定を行います。MAMP には、Xdebug 拡張モジュールが含まれているので、下記のパスにある php.ini ファイルを編集することで有効にできます。（下記のパスは、MAMP のバージョンによって変わるため、環境によって変更が必要になる可能性があります。）
/Applications/MAMP/bin/php/php5.3.6/conf/php.ini
NetBeans で、ファイル > ファイルを開くをクリックし、ダイアログから php.ini ファイルを開き、下記のように設定ファイル末尾を変更してください。もちろん、ほかのテキストエディタで編集しても問題ありません。（zend_extension パラメータのパスは、MAMP のバージョンによって変わるため、環境によって変更が必要になる可能性があります。xdebug.so ファイルが存在していることを必ず確認してください。）
[xdebug] zend_extension="/Applications/MAMP/bin/php/php5.3.6/lib/php/extensions/no-debug-non-zts-20090626/xdebug.so" xdebug.remote_enable = On
これで設定完了です。設定を反映させるために、MAMP ウィンドウで「サーバを停止」をクリックし、サーバー停止後に「サーバを起動」をクリックし、サーバーを再起動させてください。
サーバーが起動したら、MAMP ウィンドウで「スタートページを開く」をクリックし、MAMP のスタートページで phpinfo をクリックし、Xdebug が有効になっていることを確認してください。
phpinfo: xdebug
また、xdebug.remote_enable が On になっていることも確認してください。
phpinfo: xdebug
これで、Xdebug の設定が完了しました。
5. 例：Hello Dolly プラグインのデバッグ
WordPress に付属している Hello Dolly プラグインを Xdebug でデバッグしてみましょう。
まず、WordPress の管理画面で Hello Dolly プラグインを有効にします。
Plugins ‹ Plugin Development Environment — WordPress
次に、plugins ディレクトリの hello.php を開き、hello_dolly 関数の1行目にブレークポイントを行の左側（赤枠）をクリックして設定します。そして、「プロジェクトをデバッグ」ボタン（青枠）をクリックしてデバッグを開始します。
NetBeans: デバッグ
何も表示されていないブラウザウィンドウが立ち上がると思います。これは、デバッガが PHP の実行を最初の行で停止するためです。「続行」ボタン（赤枠）をクリックすることで、画面が表示されます。（複数回クリックが必要です。）また、「デバッガセッションを終了」ボタン（青枠）をクリックすることでデバッグを終了できます。
NetBeans: デバッグ
最初の行で停止する機能が不要な場合は、環境設定から PHP の「デバッガ」タブを選択し、「最初の行で停止」のチェックを外してください。
NetBeans: デバッグ設定
Hello Dolly プラグインを有効にした状態で、管理画面にログインすると、下記のような状態で停止するかと思います。（「最初の行で停止」のチェックを入れたままの場合は、何度か続行をクリックするとこの状態になります。）
NetBeans: デバッグ
行左側の緑色矢印（赤枠）は、現在実行が停止している行を示します。ブレークポイントを設定したため、ブレークポイントの行で実行が止まっていることがわかると思います。
下部のウィンドウグループには、タブ（青枠）が追加されます。「変数」タブでは、現在停止している行で参照できる変数の値を見ることができます。「呼び出しスタック」タブでは、現在の関数がどの関数から呼び出されているかをたどることができます。「ブレークポイント」タブでは、設定しているブレークポイントを編集することができます。
ツールバーには、ステップ実行ボタン（緑枠）が追加されます。「ステップオーバー」ボタンは、現在の行を実行し、次の行で停止します。「ステップイン」ボタンは、現在の行を実行し、その行に関数が含まれている場合、その関数内の1行目で停止します。「ステップアウト」ボタンは、現在の関数を抜けるまで実行し、その関数を呼び出している行の次の行で停止します。
あとは実際に、ステップ実行したり、変数の内容を見たり、ブレークポイントを追加したりすることで、Xdebug の便利さが体感できると思うので、いろいろと試してみて理解してもらえればいいかなと思います。
さて、今回は Xdebug を使用した WordPress のデバッグについて記事を書きました。プラグイン開発やテーマ開発で導入するととても便利だと思うので、ぜひ使ってみてください。