レンタルサーバー選びの迷いを解決!全力サポートします

Google or AdMax Promotion (srv)

【PHPへ xdebug導入】は簡単。実はEclipseで動かす設定が環境依存で若干ややっこい

EclipseでPHPのデバッグをしながらプログラムを書く。
当たり前の環境のようで、それでも未だによく分からないからと、
var_dump、print_r、echoを使っているなら、xdebugに切り替えたらいかがでしょう。
実際に設定して動かすまでの手順をご紹介します。

ローカル環境のApacheを勢いで2.2から2.4へアップしたついでに、
せっかくなのでPHPのデバッグ環境xdebugのインストールも行いました。

「xdebugを導入をしたものの動かない」といった経験をされている方も、
意外と多いのではないかと思います。

インストール自体は他のWebで紹介されている方法で、ほぼ同じです。
そうなんです、紹介されている方法は間違っていない。んだ、これが。

ただ、自分の環境にあった設定の読み替えが、
非常にわかりにくいのが、デバッグ環境構築の敷居の高さなんですね。

というのも、私もこれまでPHPのデバッグ環境が欲しくて、
何度となくチャレンジしてきましたが、かれこれ5年以上放置・挫折してきた者です。

今回、うまく構築できたからと言って、次もできるとは限らない。
はい。未来の自分への備忘録として書き残しておくのが目的なんです^^;

 

PHPへxdebugの導入と動作確認

xdebugをインストールするには、
まずxdebugのモジュールをダウンロードする必要があります。

Xdebug: Downloads

自分のPHPのバージョンとApache環境にあったものをダウンロードします。

ダウンロードするファイルの選定

今回PHPは以下から、
php-5.6.36-Win32-VC11-x64.zip」をダウンロードしてインストールしました。
参考:PHP For Windows: Binaries and sources Releases

またApacheは以下から、
httpd-2.4.33-x64-vc11-r2.zip」をダウンロードしてインストールしました。
参考:Apache Haus Downloads

バージョンは皆さまの環境で異なることでしょうけどもここでは以下でご紹介します。

  • PHP:5.6(64bit)
  • Apache:2.4(64bit)

分かりにくいのがスレッドセーフ、ノンスレッドセーフという違いです。

厳密には違うのかもしれませんが、

  • Apacheならスレッドセーフ(TS)
  • IISならノンスレッドセーフ(NTS)

そう考えておいて問題ないようですので、今回はTSを選択する事になります。

PHP5.6と書かれていて、64bit(x64)で、スレッドセーフ(TS)に対応した、
xdebugをダウンロードします。

以下の太字がそれに該当します。

Xdebug 2.5.5

Release date: 2017-06-21

(引用)Xdebug: Downloads

 

PHP 5.6 VC11 TS (64 bit) は
「https://xdebug.org/files/php_xdebug-2.5.5-5.6-vc11-x86_64.dll」となっていますので、

「php_xdebug-2.5.5-5.6-vc11-x86_64.dll」を使う事になります。

PHP拡張ディレクトリへのインストール

インストール先はphp.iniの設定の拡張ライブラリフォルダに指定した場所へ入れます。

「c:\php\ext」などが一般的かと思いますが、
私はPHPを「C:\php-5.6.36-Win32-VC11-x64」というフォルダへ
インストールしていますので、拡張ライブラリのフォルダ設定も以下になっています。

extension_dir = "C:\php-5.6.36-Win32-VC11-x64\ext"

この「ext」フォルダに、
ダウンロードした「php_xdebug-2.5.5-5.6-vc11-x86_64.dll」を入れます。

 

次に、php.iniをエディタで開き、以下のように追記します。
2行目で「php_xdebug-2.5.5-5.6-vc11-x86_64.dll」を指定しています。

 

尚、私の環境では「localhost」としてサイトにアクセスする予定はありませんが、
ドメイン環境であってもここはEclipse側のデバッグ設定で指定しますのでそのままで構いません。

以上でインストールは完了です。
Apacheを再起動してから確認します。

xdebugインストールをphpinfoで確認

xdebugインストール前のphpinfoでは以下の表示で、
「xdebug」で検索しても何も見当たりません。

This program makes use of the Zend Scripting Language Engine:
Zend Engine v2.6.0, Copyright (c) 1998-2016 Zend Technologies

wp-whiteout-settingmiss-mysqllib_st06

phpinfoは表示できる・WordPressインストールが真っ白

 

xdebugを有効化した後は、以下のようになります。

This program makes use of the Zend Scripting Language Engine:
Zend Engine v2.6.0, Copyright (c) 1998-2016 Zend Technologies
with Xdebug v2.5.5, Copyright (c) 2002-2017, by Derick Rethans

install-xdebug-on-eclipse_st02

xdebugインストール後phpinfo・Eclipseでxdebug環境構築

 

また「xdebug」の項目も表示されるようになります。

install-xdebug-on-eclipse_st03

xdebug項目の表示・Eclipseでxdebug環境構築

 

インストールはこれで完了です。
後は、Eclipse側でxdebugを利用します。

 

プロモーション

Google or AdMax Promotion (srvpos)

Eclipse側のデバッグ設定

たぶん、ここまでは一度は誰もがやってみたことがある所で、
いざEclipseで実行しようと思うとうまく動かず挫折するパターンなのではないかと思います。
というか私がそれでした。

というのも「環境がひとそれぞれ」だという事が問題なのだと思います。

Webサーバーに対しても、
http://127.0.0.1/でアクセスしている場合もあれば、
http://localhost/かもしれない、
http://192.168.0.2/かもしれない・・・
はたまた、http://domain.local/かもしれない。

公開ディレクトリが「C:\Apache\htdocs」かもしれないし、
「H:\hogehoge\workspace\htdocs」かもしれない。

説明が1つで定まらないことが、うまく伝わらないのだと思うのです。

私で言えば「http://aaa.hogehoge.local(例)」と、
ドメイン環境を利用して居たりするのでまた厄介だったりもします。

環境説明

実行環境のApacheやPHPのバージョンについては以下を利用しています。
これは以下の記事でご紹介してきた環境を利用しています。

  • Apache2.4(x64)
  • PHP:5.6(x64)
  • OS:Windows8 Pro(x64)

 

httpd.confは以下の設定が行われている環境で検証しています。
これは初期状態のものにPHPの設定を追加したものです。

この段階でWeb表示は以下の状態で行えています。

install-xdebug-on-eclipse_st04

Web環境の表示例・Eclipseでxdebug環境構築

 

ここにWordPressをインストールします。
※WordPressのデバッグ環境を構築する事を目的としています。

例として検証用URLは「127.0.0.1」にてWordPressを構成します。
以後、WordPressへのアクセスは「127.0.0.1」を採用します。
またWordPressは「wordpress」というフォルダに展開しています。
※例「C:\Apache2464\htdocs\wordpress

WordPressをドキュメントルートアクセスに変更

※この手順は一般的なWordPressサイト構成を作る為だけのもので特に必須ではありません。

WordPressの「設定」-「一般」から、
「サイトアドレス (URL)」をドメインルートに変更します。

  • 変更前: http://127.0.0.1/wordpress
  • 変更後: http://127.0.0.1/

 

install-xdebug-on-eclipse_st07

WordPressサイトアドレス変更・Eclipseでxdebug環境構築

 

WordPressインストールディレクトリ内にある
「.htaccess」ファイルをドキュメントルートに移動します。
※無い場合は、パーマリンク設定を空保存(変更せず保存)すると作成されるはずです。

次にWordPressインストールディレクトリ内にある
「index.php」ファイルをドキュメントルートにコピーします。

index.phpをエディタで開き以下の変更を行います。
※「wordpress」はwordpressの配置を行ったフォルダ名。

  • 変更前: require( dirname( __FILE__ ) . ‘/wp-blog-header.php’ );
  • 変更後: require( dirname( __FILE__ ) . ‘/wordpress/wp-blog-header.php’ );

 

最後に、初期状態である「index.html」を「index_.html」などにリネームして潰します。

これでWordPressに対して「http://127.0.0.1/」にて、
アクセスできる環境が構築されました。

install-xdebug-on-eclipse_st29

WordPressサイトアドレス変更後・Eclipseでxdebug環境構築

 

これでWordPress側の準備ができ、
後は子テーマを作成して変えるなり、function.phpを編集するなりしていく形になります。

Eclipse側のデバッグ設定

WordPressの環境の構築と説明が完了しましたので、
実際にEclipse側に「デバッグ構成」を行っていきます。

その前に、EclipseにWordPressの公開ディレクトリをプロジェクトとしてインポートしておき、
PHPエクスプローラに表示されている状態にしておきます。

ドキュメントルートに「index.php」コピーする前に、
既にプロジェクトとしてインポート済みの場合はリフレッシュしておき、
index.phpが一覧に表示されている状態にしておきます。

install-xdebug-on-eclipse_st11

ドキュメントルートのindex.phpの反映・Eclipseでxdebug環境構築

 

パースペクティブをPHPにした状態から「虫(デバッグ)」アイコンの、
「▼」をクリックしてメニューを表示し、
「デバッグの構成(B)…」を選択します。

install-xdebug-on-eclipse_st08

Eclipseデバッグ構成・Eclipseでxdebug環境構築

 

デバッグの構成ウィンドウが開きますので、
「PHP Webアプリケーション」で右クリックし、メニューから「新規」を選択します。

install-xdebug-on-eclipse_st09

Webアプリケーション構成の新規作成・Eclipseでxdebug環境構築

 

「新規構成」が作成され、右側に設定を行っていく形です。

右側のPHPサーバー部分の「新規」をクリックしてサーバーを設定を構成します。

install-xdebug-on-eclipse_st10

新規構成・Eclipseでxdebug環境構築

 

PHPサーバーの作成ウィンドウが開きます。
今回の検証環境の場合は以下のように設定します。

  • 名前(分かりやすいもの): server_127.0.0.1
  • ベースURL(WordPressのサイトアドレス): http://127.0.0.1
  • Local Web Root(ドキュメントルート): C:\Apache2464\htdocs

入力が完了したら「次へ」をクリックします。

install-xdebug-on-eclipse_st12

PHPサーバー構成の入力・Eclipseでxdebug環境構築

 

サーバーパスマッピングの構成が開きます。
ここは必須ではありませんが、URLとローカルのファイルパスで、
個別に紐づける必要があるような場合に個別に設定ができるようになっています。

「追加」をクリックして設定を追加していくことができます。

install-xdebug-on-eclipse_st13

サーバーパスマッピングの追加(任意)・Eclipseでxdebug環境構築

 

今回はサーバーの設定で行ったドキュメントルートを指定していますが、
サーバー設定と重複した内容ですので、別に不要です。

「OK」をクリックして設定を終了します。

install-xdebug-on-eclipse_st14

URLとファイルパスの紐づけ・Eclipseでxdebug環境構築

 

サーバーが登録されプルダウン部分に表示されるようになりました。
次に「ファイル」部分の「参照」をクリックします。

install-xdebug-on-eclipse_st15

サーバーの表示とファイル参照・Eclipseでxdebug環境構築

 

ポップアップウィンドウからドキュメントルートの「index.php」を選択します。(画像左)
「OK」をクリックするとウィンドウが閉じます。

install-xdebug-on-eclipse_st16

index.php選択とURL構成・Eclipseでxdebug環境構築

 

ファイル部分にパスが反映されて入力されます。

「□URL自動生成」にチェックが入っていると、
下部のURLがうまく表示されていないはずですので、
チェックを外し、手動で修正を行います。

install-xdebug-on-eclipse_st30

URL設定の修正・Eclipseでxdebug環境構築

このURLの指定によってWordPressが利用するドキュメントルートのindex.phpが、
デバッガに正しくマッピングされてWordPress全体のデバッグができるようになります。

 

次に「デバッガ」タブを選択し、デバッガーのプルダウンで「xdebug」を選択します。
「□最初の行でブレーク」をチェックしておくと、
デバッグ開始時に最初のファイル(index.php)の最初の実行行で自動停止します。

「適用」をクリックすると設定が保存されます。

install-xdebug-on-eclipse_st17

デバッガ―タブのデバッガー変更・Eclipseでxdebug環境構築

 

デバッガの設定は以上です。
これでデバッグを開始する事ができます。

デバッグの確認

パースペクティブPHPを表示している状態で、
虫アイコン横の▼をクリックして、登録したデバッグ設定を選択します。

install-xdebug-on-eclipse_st18

デバッグから選択・Eclipseでxdebug環境構築

 

デバッグが開始され、パースペクティブが切り替わりデバッグ画面になります。
また最初の1行目で実行が停止した状態になります。
正しくデバッグが開始されています。

また右側には変数の値などが確認できます。

install-xdebug-on-eclipse_st19

最初の行でブレーク・Eclipseでxdebug環境構築

 

同時にブラウザが起動し、処理を待っている状態で止まっています。

install-xdebug-on-eclipse_st20

ブラウザも待機表示・Eclipseでxdebug環境構築

 

ステップオーバーや、ステップインをクリックしていくと、
順次実行されていきます。

ステップインしていくと呼び出した関数の中に入っていきますが、
ステップインだけでfunction.phpまでたどり着くのはかなりステップ数があります。

事前にfunctions.phpを開き、ブレークポイントを設定しておき、
再生マークアイコンの「再開」をクリックすると一気に次のブレークポイントまで進み便利です。

install-xdebug-on-eclipse_st21

ステップオーバー・Eclipseでxdebug環境構築

 

また多数のブレークポイントを既に設定していて、
再生マークアイコンの「再開」を押すたびにブレークポイント止まって不便な時には、
「すべてのブレークポイントをスキップ」をクリックしておくと、
一時的にブレークポイントを解除できます。

install-xdebug-on-eclipse_st22

すべてのブレークポイントをスキップ・Eclipseでxdebug環境構築

 

実行系のボタンがすべてグレーになったところで、
プログラムの処理はすべて完了している状態になります。

install-xdebug-on-eclipse_st23

実行ボタンがグレーで処理完了・Eclipseでxdebug環境構築

 

WordPress側も表示が完了しています。

install-xdebug-on-eclipse_st24

ブラウザ表示も完了・Eclipseでxdebug環境構築

 

最後にデバッグの終了をクリックしてデバッグを完了します。

install-xdebug-on-eclipse_st25

デバッグは都度終了・Eclipseでxdebug環境構築

 

デバッグを終了するとブラウザウィンドウがさらに一枚開き、
デバッグ終了画面が表示されます。
※本当はこれ消したいんですけど、今のところ消す方法が分からないです。

install-xdebug-on-eclipse_st26

デバッグ終了ブラウザ表示・Eclipseでxdebug環境構築

 

デバッグを終了したらパースペクティブをPHPに戻します。

install-xdebug-on-eclipse_st27

パースペクティブをPHPへ戻す・Eclipseでxdebug環境構築

 

またソースの修正を行って、またデバッグを繰り返す流れです。

install-xdebug-on-eclipse_st28

ソースの編集・Eclipseでxdebug環境構築

 

PHPがデバッグできるって素敵っ

というか、プログラムなんだから本来デバッグできて当然と思っているのですが、
これまでずっとこのEclipseを使いながらも、
デバッグの設定をしては動かず・・・を繰り返してきました。

今までのどこが間違っていたのか?と振り返ってみると、

恐らく、記憶の限りでは・・・

 

WordPressの処理はすべてのURLで、

ドキュメントルートのindex.phpが処理している

 

この事実をなんとなく理解できていなかったのかなと思います。

元々、index.phpをデバッグしたかったわけでもないですし、
function.phpで定義したショートコードをデバッグしたかったり、
別のブログラムをデバッグしたかったりと、

index.phpを起点にデバッグ設定をした覚えがないなと思うのです。

 

実は答えはすごく単純なことで、
設定がちゃんとできればデバッガは簡単に使えるようになる。

これでどんなプログラムも怖がる事無く手が出せる^^

 

もしまだvar_dumpやらprint_r、echoを使っているようなら、
デバッグできた方が遥かに効率的にPHPが使えるようになりますよ。

 

尚、本記事は以下のコンテンツの一部になります。


AdMax Promotion

公開日:

コンテンツナビ
すべて展開 | すべて省略

AdMax Promotion

カテゴリ
すべて展開 | すべて省略

QRコードからもこのURLを開けます。