Eclipse にデバッガー(Xdebug)を導入

eclipseのデバッガー設定のアイキャッチ

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

eclipseインストールのアイキャッチワードプレスのテーマ開発環境にEclipseを導入

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

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

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

環境

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

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

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

デバッガー(Xdebug)の有効化

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

すでに Xdebug が有効化されている場合

MAMP ではなく XAMPP などを使用している場合は Xdebug が有効化されているかもしれません

その場合はこの章は読み飛ばしていただいてオーケーです

Xdebug 有効化における注意点

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

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

MAMPとPHPのバージョンの関係

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

設定を行うべきPHPのバージョン

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

PHPとXdebugの関係

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

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

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

Xdebug有効化の設定を行うべきPHPのバージョン

以上を踏まえ、次の手順で 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 へのパスが全て表示されます。

xdebug検索結果

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 のバージョンの確認でメモしたバージョンに置き換えてください。

この 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

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

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

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

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

MAMP の設定

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

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

MAMPのPHP設定画面

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

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

サーバーの再起動

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

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

サーバーの停止

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

サーバーの起動

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

スポンサーリンク

Xdebug 有効化の確認

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

eclipseインストールのアイキャッチワードプレスのテーマ開発環境にEclipseを導入

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

確認終了後

確認終了後はここで追加した index.php の phpinfo(); の部分は削除してください

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

phpinfoの実行方法

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

PHPの情報1

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

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

PHPバージョンの確認

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

php.iniのパスの確認

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

xdebugの情報の確認

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

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

デバッグ構成の設定

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

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

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

デバッグの構成の実行

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

デバッグ構成の新規作成画面

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

デバッグ構成の設定1

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

デバッグの構成設定2

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

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

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

デバッグの構成設定3

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

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

デバッグ構成設定4

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

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

デバッグの構成設定5

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

デバッグの構成設定6

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

デバッグの実行

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

ブレークポイントの設定

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

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

ブレークポイントの設定1

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

ブレークポイントの設定2

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

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

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

デバッグの実行1

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

デバッグの実行2

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

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

ステップ実行

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

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

ステップ実行の再開と終了

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

デバッガー操作ボタン

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

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

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

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

スポンサーリンク

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

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

Web 起動はすでに実行中

デバッガーのエラー画面1

エラーの内容

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

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

解決方法

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

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

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

コンソールの終了ボタン

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

The request timed out

デバッガーのエラー画面2

エラーの内容

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

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

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

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

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

解決方法

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

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

まとめ

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

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

2 COMMENTS

daeu

Stas さん

コメントありがとうございます!

Codelobster という IDE があるんですね。
見た感じ WordPress 開発にかなり良さそうでした(プラグインが有料なのが残念ですが…)。
無料期間もあるのでちょっと使ってみようと思ってインストールしてみましたが、
MySQL の設定がうまく出来なくて挫折中です…。
うまく出来そうであればまたインストール方法など説明ページ作ってみますね。

有益な情報大変ありがとうございます。

返信する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ワードプレスの処理時間は約 0.189 秒です