開発環境

開発環境を整えてみよう! ~デバッグ編~

2013.12.09(月) WordPress
このエントリーをはてなブックマークに追加

前回、ローカル環境でWordPressを動かすところまではできました。ここからは、いよいよデバッグ環境の作成です。プラグインやテーマなどをPHP+JavaScriptで開発しますが、それをデバッグできるようにします。


Step1. Xdebugをインストールしよう

PHPのデバッグには、Xdebugというモジュールを利用します。XDebugはこちらからダウンロードできますが、自分の環境のPHPのバージョンとスレッドセーフ版かどうかを確認して、該当するものをダウンロードします。今回の場合は、「PHP 5.3 VC9 TS (32 bit)」をダウンロードします。

利用するためには、

  • ダウンロードしたファイル「php_xdebug-2.2.3-5.3-vc9.dll」を、実行ファイル「php-cgi.exe」と同じ場所におきます。
  • php.iniに、以下の設定を追加します。おそらく追加場所はどこでもいいのですが、ボクの場合は、「extension=」の最後のあたりに定義を追加しました。
zend_extension="C:\php\5.3.27\php_xdebug-2.2.3-5.3-vc9.dll"
xdebug.remote_enable=1
xdebug.remote_handler=dbgp
xdebug.remote_mode=req
xdebug.remote_host=localhost
xdebug.remote_port=9000
xdebug.profiler_output_dir="C:\php\5.3.27\tmp"

設定がうまくいっているかどうか、前回も使ったphpinfo関数で確認します。以下のようにXdebugのバージョンなどが出ていれば成功です。

 

Step2. NetBeansをインストールしよう

さて、いよいよ開発ツールであるNetBeansをインストールします。インストールはインストーラーに従ってそのままでいいかと思います。設定もはっきりいってなにもいじる必要はありません。Zendなどのフレームワークを使っている方なんかはちょっとありそうですけど、あいにく使ってませんので、基本なにも必要ありませんでした。
WodPressのプロジェクトをデバッグするには、以下のようにプロジェクトを作成します。

  • PHPを選択

 

  • フォルダ名にWordPressフォルダを指定する


 

プロジェクトができたら、以下のように実行します。

  • 実行時のブラウザを選択

 

  • ブックマーク指定して実行

 

  • ブックマークで止まります

 

これで変数の値も参照できるし、変更して実行もできるので、開発効率アップ間違いなしですね。

Step3. JavaScriptをデバッグしよう

NetBeanでデバッグできるのはPHPだけで、JavaScriptについては、できそうで出来ません。おそらくPHPのプロジェクトではなく、HTML5のプロジェクトだったらできるのかもしれないですけどね。。。ただ、JavaScriptについては、ほとんどのブラウザでデバッグできますので、それと組み合わせて開発しましょう。

  • Chrome

「ツール-デベロッパーツール」で、デバッグできます。

 

  • IE10以上

「F12 開発者ツール」で、デバッグできます。

 

その他、FireFoxのFireBugはあまりに有名ですし、IE6~9あたりは、IETesterなどでできます。

終わりに

開発環境ですが、すべて無料で揃うっていうのは、すごくいいですよね(ITに携わる者としてはある意味恐怖ですが)。開発環境を揃えると、新たにやる気がでてきましたので、またプラグインか新しいテーマでも作成しようかな。

 

コメントをどうぞ