edumpを使ってWordPress用のデバッグ環境をサクッと構築する方法

前回、手軽にWEBデバッグ環境を構築できる、無料ツールの「edump」を紹介しました。

僕はここ最近、PHPプログラムを書く機会が増えました。 以前はRubyをよく使っていたので、それと比較してしまうと、PHPのデ...

上記で紹介した方法も十分すぎるほど簡単ではありました。

けれど、Wordpressの場合は「デバッグ環境構築用のプラグイン」があらかじめ準備されているので、より簡単に初期設定することが可能です。

以下では、「edumpを用いたWordpressデバッグ環境の作り方」について順を追って紹介したいと思います。

スポンサーリンク
レクタングル(大)広告

主な手順

edumpでWordpressデバッグ環境を作る主な手順は以下です。

  1. edumpに無料登録する
  2. edump用のWordpressプラグインをインストールする
  3. プラグインの初期設定
  4. コードを書く

WordPressは、PHPとJavaScriptを利用するので、通常の手順だとPHP・JavaScriptそれぞれにデバッグコードを仕込む必要があります。

ただ、edumpプラグインを利用することで、PHP・JavaScript双方に対して手軽にデバッグ環境を作ることが可能です。

edumpに無料登録する

edumpに登録していない場合は、無料登録する必要があります。

まずは、edumpサイトに移動して新規登録ボタンを押してください。

edump_thumb

すると、メール入力欄が表示されるので、メールアドレスを入力します。

edump_thumb[8]

あとはメールアドレス宛に「ログイン情報」が送られてくるので、その情報をもとにログインすれば登録完了です。

無料登録に必要な情報は、メールアドレスだけとなっています。

メールで送られてくる簡易パスワードは後で変更しておくとよいかと思います。

edump用のWordpressプラグインをインストールする

次に、Wordpress管理画面から「プラグイン→新規追加」を選択して「edump」を検索し、プラグインをインストールしてください。

edumpプラグインのインストール

インストールが完了したら、「有効化」してください。

edumpプラグインの有効化

プラグインの初期設定

プラグインのインストールを終えたら、「設定→edump」を選択してください。

設定からedump項目の選択

すると、以下のような画面が表示されるので、「Message ID」取得用のURLをクリックします。

「Message ID」取得用のURLをクリック

すると、edumpサービスの「システム設定」画面が表示されるので、スクロールして下の方にある「Message ID」をコピーします。

登録情報の更新項目にあるメッセージID

コピーした「Message ID」を、プラグインの「Message ID入力欄」にペーストします。

プラグインのメッセージID入力欄にコピペ

あとは、以下のチェック項目を有効にして設定を保存します。

  • このWordPressでPHP版edumpの機能を有効にする
  • PHPの通知、警告、エラーを自動的に取得してedumpのビューワーで表示する
  • このWordPressでJavaScript版edumpの機能を有効にする

edump プラグイン for WordPressの設定画面

これで初期設定は完了です。

コードを書く

あとは、デバッグ用のコードを書くだけです。

PHPでデバッグ

例えば、single.phpページで以下のようなコードを書いたとします。

すると、以下のように変数内の値が見やすく表示されます。

グローバル変数の$postの中身を確認

もちろん、グローバル変数でない、ユーザー定義の変数や定数も出力可能です。

以下のように、Hello World!と変数に入れてWordpressページを読み込むと、

ハローワールドをedumpで出力

以下のように出力されます。

edumpでユーザー指定の変数のデバッグ

JavaScriptでデバッグ

JavaScriptでも以下のように書いたとします。

すると、以下のように問題なく表示されます。

edumpでJavaScript内の変数を出力

試しに以下のようにHTML要素を出力してみました。

すると以下のように表示されました。

JavaScriptのHTML要素を出力

全ての階層が表示されるわけではありませんが、ある程度は出力されるようです。

「デベロッパーツール&console.log()」ほど万能ではありませんが、ちょっとした変数参照ならedumpを用いたものの方が、console.log()よりは手軽そうです。

まとめ

このように、edumpのWordpressプラグインを用いると、PHPとJavaScriptのデバック環境を一度に設置可能です。

基本的に、「プラグインをインストールして、Message IDを入力するだけ」なので、手間はそれほどかからないと思います。

このように、ちょっとした設定しておくだけで、変数値を調べたいときに手軽に確認できるのはかなり重宝します。

サイト edump | Web開発効率化のための簡易デバッガー(無料)

サイト edump — WordPress プラグイン