Eclipse にデバッガー（Xdebug）を導入

下のページで Eclipse （エクリプス）を導入し、Eclipse からワードプレスを起動してウェブページを表示するまでの手順を解説しました。

ワードプレスのテーマ開発環境にEclipseを導入

このページでは、さらにこの Eclipse でデバッガーの Xdebug を動作させてデバッグを行うための手順について解説します。

デバッガーを動作させることで、ワードプレスを好きなタイミングで停止させ、１行ずつプログラムを実行することが可能です。

これにより自分のワードプレス（ワードプレスのテーマ）がどのように動作しているかを簡単に確認することが可能です。

環境

まずこのページで解説する手順は下記の環境を想定して説明しています。

• OS環境：Mac OS X（Mojave 10.14.5）
• PHP・WebServer動作環境：MAMP 5.3
• Eclipse：2019-03 (4.11)

想定しているのはこの環境ですが、解説の内容自体はどの環境でも参考にはなると思います。

デバッガー（Xdebug）の有効化

実は MAMP では、インストール時には Xdebug が無効化されています。ですので、まずは Xdebug を自分で有効化する必要があります。

スポンサーリンク

Xdebug 有効化における注意点

まず前提として、MAMP はインストールすると、同時に複数のバージョンの PHP がインストールされます（Xdebug も同時にインストールされます）。

そして、MAMP はその中の一つのバージョンの PHP を動作させます。どのバージョンの PHP を動作させるかは MAMP の設定で変更可能です。

Xdebug 有効化において重要なのは、MAMP で動作するバージョンの PHP に対して、Xdebug の有効化の設定を行うことです。MAMP で動作しないバージョンの PHP に対して Xdebug の有効化をしても意味がありません。

厄介なのは、全てのバージョンの PHP に対して Xdebug がインストールされるとは限らないことです。おそらく MAMP のバージョンにも依ると思うのですが、PHP のバージョンによっては、そのバージョンに対応する Xdebug がインストールされない場合があります。

実際私も最新の PHP に対応する Xdebug がインストールされていないので苦労しました…。

この場合、Xdebug がインストールされていない PHP に対して Xdebug の有効化を行っても、Xdebug は動作してくれません。

ですので「Xdebug の有効化は Xdebug がインストールされているバージョンの PHP に対して行い、さらにそのバージョンの PHP を MAMP で動作させるように設定する」必要があります。

以上を踏まえ、次の手順で Xdebug の有効化を行います。

1. Xdebug がインストールされている PHP のバージョンを確認する
2. そのバージョンの PHP を設定して Xdebug を有効化する
3. MAMP を設定してそのバージョンの PHP を動作させるようにする
4. 設定を反映するためにウェブサーバーを再起動する

一つ一つ手順を解説していきたいと思います。

PHP のバージョンの確認

まずは Xdebug を使用できる PHP のバージョンを確認します。

Mac OS X の場合、ターミナルから find コマンドを実行して確認するのが楽です。

ターミナルは「アプリケーション」フォルダの「ユーティリティ」内に存在します。

ターミナルを立ち上げ、次のコマンドを実行してください。

find /Applications/MAMP -name "xdebug.so"

このコマンドは、/Applications/MAMP フォルダから xdebug.so（Xdebugのファイル名）という名前のファイルを検索するコマンドになります。

アプリケーションフォルダに MAMP をインストールしていることが前提のコマンドになっていますので、違うフォルダに MAMP をインストールしている場合は、”Applications”の部分を MAMP をインストールしているフォルダに変更してください（今後もこの前提で説明しますので、必要に応じてフォルダ名は置き換えてください）。

コマンドを実行すると、xdebug.so へのパスが全て表示されます。

phpX.Y.ZZ の部分の X.Y.ZZ がバージョン番号になり、ここで表示されているバージョンの PHP は全て Xdebug がインストールされていることになります。

つまり、このバージョンの PHP であれば全て Xdebug を使用することが可能です。この中で一番最新の PHP のバージョンをメモしておきましょう。

上の結果だと”7.2.14″が Xdebug がインストールされている PHP の最新のバージョンになります。

PHP の設定

続いて PHP の設定をして Xdebug を有効化します。この有効化は php.ini ファイルを編集して行います。

編集すべき php.ini ファイルは下記の場所に設置されています。

/Applications/MAMP/bin/php/php[バージョン]/conf/php.ini

この php.ini をテキストエディタ等で開きます。おそらくファイルの一番後ろに下記のような記述が行われていると思います（バージョンによって数字の部分は異なります）。

[xdebug]
;zend_extension="/Applications/MAMP/bin/php/php7.0.33/lib/php/extensions/no-debug-non-zts-20151012/xdebug.so"

この部分を下記のように書き換えてください。

• :zend_extention=・・・・の行の最初の”;”を削除する
• 次の行に「xdebug.remote_enable=1」を追記する
• その次の行に「xdebug.remote_host=localhost」を追記する
• さらに、その次の行に「xdebug.remote_port=9000」を追記する

編集後は下記のような感じになります。

[xdebug]
zend_extension="/Applications/MAMP/bin/php/php7.0.33/lib/php/extensions/no-debug-non-zts-20151012/xdebug.so"
xdebug.remote_enable=1
xdebug.remote_host=localhost
xdebug.remote_port=9000

要は２行目の ” ” 内に xdebug.so へのファイルパスを記入されており、３行目以降に上記で解説した「xdebug.remote_enable・xdebug.remote_host・xdebug.remote_port」の設定が記入されていれば良いです。

２行目は使用する Xdebug のパスを指定し、３行目は Xdebug の実行を有効化する記述になります。

４行目と５行目は Xdebug が接続するホスト名とポート番号になります。

以上で PHP の設定は完了です。

スポンサーリンク

MAMP の設定

続いて MAMP で Xdebug を有効化したバージョンの PHP を動作させるように MAMP の設定を行います。

まず MAMP を起動し、「Preference」で設定画面を開き、さらに「PHP」タグを開きます。

ここで PHP のバージョンが設定できますので、バージョンをPHP のバージョンの確認で確認したバージョンに設定します。

MAMP の設定はこれだけで完了です。

サーバーの再起動

ここまで行ってきた設定を反映するためにサーバーの再起動を行います。

まず MAMP の実行画面で「Stop Servers」をクリックしてください（すでにサーバーが停止している場合は次に進んでください）。

さらにサーバー停止後に「Start Servers」をクリックします。

これによりサーバーが再起動し、ここまで設定した内容が反映されます。

Xdebug 有効化の確認

まずは Eclipse をインストールし、ワードプレスフォルダをインポートしてください。このやり方は下のインストール編で解説していますので是非読んでいただければと思います。

ワードプレスのテーマ開発環境にEclipseを導入

続いてプロジェクトエクスプローラーから、トップフォルダにある index.php を開き、下のように phpinfo(); を追記します。

phpinfo() とは、現在動作している PHP のバージョン等の情報を表示する関数です。

続いてプログラムを実行し、ページを表示してください（実行方法もインストール編に記載しています）。そうすると下のようが画面が表示されるはずです。

確認してほしいの下記の３点です。

１つ目はバージョンが、デバッガー（Xdebug）の有効化で Xdebug を有効化した PHP のバージョンになっていることです。

２つ目は、「Loaded Configuration File」がデバッガー（Xdebug）の有効化で編集した php.ini のファイルパスに設定されていることです。

３つ目は、xdebug の情報が表示されていることです。

この３つが確認できれば Xdebug の有効化されていると言えます。

確認が終われば、先ほど追加した index.php の phpinfo(); の部分は削除して元に戻しておいてください（phpinfo() があると、ページを表示するたびに PHP の情報が表示されてしまいます）。

スポンサーリンク

デバッグ構成の設定

続いてデバッガーである Xdebug を起動してデバッグ（ステップ実行など）を行う手順について説明します。まずはデバッグの設定を行います。

デバッガー関連の設定以外はワードプレスのテーマ開発環境にEclipseを導入で解説した実行構成の設定と同じです。まずこちらを読んでいただけると設定しやすくなると思いますので、こちらも是非参考にして下さい。

まずメニューの「実行」から「デバッグの構成」をクリックします。

すると次のような画面が表示されますので、「PHP Web アプリケーション」をクリックして選択肢、続けて「新規作成ボタン」をクリックします。

下のような画面が表示されますので、好きな名前（デバッグと分かる名前が良いと思います）を記入し、「PHP サーバー」に「Default PHP Web Server」を選択肢、さらに「構成ボタン」をクリックします。

サーバーの編集画面が表示されますので「ベースURL」にMAMPで動作させるワードプレスのページのURLを記入します。MAMPインストール時に設定を変更指定なければ「http://localhost:8888」で良いと思います。

この画面でデバッガータブをクリックすると、デバッガーの設定が行えます。

ここでは使用するデバッガーの設定が行えますので、まずは「デバッガー」に「Xdebug」を選択します。この設定により、このデバッグ構成を用いた実行時に Xdebug が起動するようになります。

「ポート」は php.ini で「xdebug.remote_port」に設定した「9000」を設定してください（ポートに関してはデフォルトが9000になっていると思います）。

設定が完了したら「完了ボタン」をクリックします。

クリックすると、またデバッグ構成の画面に戻りますので、「ファイル」にワードプレスが最初に起動する index.php のパスを記入してください。続いて「URL」の「自動生成」のチェックは外してください。さらに表示するページのURLを記入します。

これらの記入が完了すれば、次はデバッガータブを開いてください。

下のような画面が表示されますので、「最初の行でブレーク」のチェックを外します。

続いて共通タブを開いてください。この画面では「お気に入りのメニューに表示」の「デバッグ」にチェックをつけてください。

最後に「適用ボタン」をクリックして今まで設定した内容を保存します。これでデバッグ構成の設定は完了です。

デバッグの実行

それではいよいよ Xdebug を用いたデバッグの実行を行います。

ブレークポイントの設定

まず行うのはブレークポイントの設定です。ブレークポイントとは、ソースコード上のプログラムを停止するポイントです。プログラム動作時に、ブレークポイントを設定した行を通過する時にプログラムが停止します。

まずはプロジェクト・エクスプローラから ワードプレスをインストールしたフォルダの index.php をダブルクリックしてソースコードを表示してください。

続いてブレークポイントを設定したい行の行番号の左側をダブルクリックします。下の図のように、その行に対して丸マークがつけたブレークポイントの設定の成功です。

スポンサーリンク

デバッガーによるステップ実行

ブレークポイントを設定したら、次はデバッガーを起動してデバッグを開始します。

画面上部のデバッグ実行ボタン（虫のようなボタン）の右側の▼をクリックし、先ほど作成したデバッグの構成の名前をクリックしてください。

クリックするとデバッガーが起動し、プログラムが動き出します。そして、先ほど設定したブレークポイントでプログラムが停止するはずです。

この状態で、メニューの「実行」から「ステップ・イン」をクリックすれば、その停止している行で実行される関数の中にプログラムを進めることができます。

「ステップ・オーバー」をクリックすれば、関数の中には入らずに次の行までプログラムを進めることができます。「ステップ・リターン」をクリックすれば、現在実行されている関数を最後まで実行して呼び出し元に戻るまでプログラムを進めることができます。

この「ステップ・イン」「ステップ・オーバー」「ステップ・リターン」を使ってプログラムの動作を確認することが可能です。いろんな場所にブレークポイントを設定し、プログラムを少しずつ進めてワードプレスがどのように動いているかを追ってみると楽しめると思います。

ブレークポイントは複数設定可能です。次のブレークポイントまで進めるときは「再開」を、プログラムを終了させるときは「終了」を押せばオーケーです。

これらの操作は画面上部のボタンから実行することも可能です。

デバッガーによる変数の中身の表示

ステップ実行中は変数の中身を確認することが可能です。右側にある「変数」ウィンドウに変数と変数の中身（値や文字列）が表示されます。

プログラムを進めると、この変数の値がどんどん変化していきます（前回の実行から差分がある行は黄色で表示されます）。変数の値の変化を見ることで、作成したプログラム（ワードプレスのテーマなど）が意図した通りに動いているかを確認することができます。

よくあるエラーの解決方法

最後にデバッガーの実行時によく発生するエラーとその解決方法について解説します。

スポンサーリンク

Web 起動はすでに実行中

エラーの内容

デバッガー起動時に発生するエラーです。前回デバッガーで実行したページ表示の処理がまだ行われている場合に発生します。

デバッガー起動時にプログラムを終了させる「終了」ですが、プログラムは確かに停止するのですが、ページ表示は停止しないようです（少なくとも私が使用しているバージョンの Eclipse は）。

解決方法

解決方法は２つあります。

１つ目は「終了ボタン」を２回押すことです。１回目でプログラムが終了し、２回目でページ表示の処理が終了します。２回押した後にデバッガーを実行すると上手く起動すると思います。

２つ目は画面下にあるコンソールの画面から「終了ボタン」を押すことです。

こちらの「終了ボタン」ではプログラムとページ表示両方を終了させることができるようです。この終了ボタンを押してからデバッガーを起動してやれば、うまく起動できるはずです。

The request timed out

エラーの内容

デバッガーでステップ実行などしていると表示されるエラーです。

これはおそらくページ表示をするブラウザ側がタイムアウトした為に発生するエラーだと思います。

Eclipse だとデフォルトではウェブページ表示するPHPプログラム実行時には Eclipse 内部のブラウザにページを表示するようになっています。

プログラムを途中で止めてステップ実行すると、そのブラウザはページ表示の要求をしたのにサーバーから応答が全く返って来ない状態になりますので、その状態が続くと応答待ちのタイムアウトが発生してこのエラー画面が表示されるようです。

実際に計測してみましたが、プログラム停止して６０秒でこのエラーが発生するようでした。

解決方法

デバッグ時に使用するブラウザを外部ブラウザに設定すれば解決すると思います（私が試したのは Google Chrome ですが、少なくとも６０秒という短い時間ではタイムアウトしませんでした）。

ブラウザの設定方法はインストール編のウェブブラウザの設定で紹介していますので、こちらでウェブブラウザを変更してみてください。

まとめ

このページではデバッガー Xdebug の有効化の方法およびデバッグ構成の設定とデバッガーの実行方法について解説しました。

デバッガーを利用することでプログラムの動きを追うのが非常に楽になります。自分が作成したテーマがどう動くのか？ワードプレス自体がどのように動くのか？など、いろいろな動きを確認することができますので、是非活用していってください！