前回、手軽にWEBデバッグ環境を構築できる、無料ツールの「edump」を紹介しました。
上記で紹介した方法も十分すぎるほど簡単ではありました。
けれど、Wordpressの場合は「デバッグ環境構築用のプラグイン」があらかじめ準備されているので、より簡単に初期設定することが可能です。
以下では、「edumpを用いたWordpressデバッグ環境の作り方」について順を追って紹介したいと思います。
目次
主な手順
edumpでWordpressデバッグ環境を作る主な手順は以下です。
- edumpに無料登録する
- edump用のWordpressプラグインをインストールする
- プラグインの初期設定
- コードを書く
WordPressは、PHPとJavaScriptを利用するので、通常の手順だとPHP・JavaScriptそれぞれにデバッグコードを仕込む必要があります。
ただ、edumpプラグインを利用することで、PHP・JavaScript双方に対して手軽にデバッグ環境を作ることが可能です。
edumpに無料登録する
edumpに登録していない場合は、無料登録する必要があります。
まずは、edumpサイトに移動して新規登録ボタンを押してください。
すると、メール入力欄が表示されるので、メールアドレスを入力します。
![edump_thumb[8]](https://nelog.jp/wp-content/uploads/2017/11/edump_thumb8.png "edump_thumb[8]")
あとはメールアドレス宛に「ログイン情報」が送られてくるので、その情報をもとにログインすれば登録完了です。
無料登録に必要な情報は、メールアドレスだけとなっています。
edump用のWordpressプラグインをインストールする
次に、Wordpress管理画面から「プラグイン→新規追加」を選択して「edump」を検索し、プラグインをインストールしてください。
インストールが完了したら、「有効化」してください。
プラグインの初期設定
プラグインのインストールを終えたら、「設定→edump」を選択してください。
すると、以下のような画面が表示されるので、「Message ID」取得用のURLをクリックします。
すると、edumpサービスの「システム設定」画面が表示されるので、スクロールして下の方にある「Message ID」をコピーします。
コピーした「Message ID」を、プラグインの「Message ID入力欄」にペーストします。
あとは、以下のチェック項目を有効にして設定を保存します。
- このWordPressでPHP版edumpの機能を有効にする
- PHPの通知、警告、エラーを自動的に取得してedumpのビューワーで表示する
- このWordPressでJavaScript版edumpの機能を有効にする
これで初期設定は完了です。
コードを書く
あとは、デバッグ用のコードを書くだけです。
PHPでデバッグ
例えば、single.phpページで以下のようなコードを書いたとします。
global $post; _v($post);
すると、以下のように変数内の値が見やすく表示されます。
もちろん、グローバル変数でない、ユーザー定義の変数や定数も出力可能です。
以下のように、Hello World!と変数に入れてWordpressページを読み込むと、
以下のように出力されます。
JavaScriptでデバッグ
JavaScriptでも以下のように書いたとします。
var arr = { key1: 'value1' , key2: 'value2' };
_v(arr);
var v = 47745+34345*25-25667/3565;
_v(v);すると、以下のように問題なく表示されます。
試しに以下のようにHTML要素を出力してみました。
_v($('.entry-title'));すると以下のように表示されました。
全ての階層が表示されるわけではありませんが、ある程度は出力されるようです。
「デベロッパーツール＆console.log()」ほど万能ではありませんが、ちょっとした変数参照ならedumpを用いたものの方が、console.log()よりは手軽そうです。
まとめ
このように、edumpのWordpressプラグインを用いると、PHPとJavaScriptのデバッグ環境を一度に設置可能です。
基本的に、「プラグインをインストールして、Message IDを入力するだけ」なので、手間はそれほどかからないと思います。
このように、ちょっとした設定をしておくだけで、変数値を調べたいときに手軽に確認できるのはかなり重宝します。
