コピペ一発で見やすいWEBデバッグ環境を作れる「edump」という無料ツールが便利

僕はここ最近、PHPプログラムを書く機会が増えました。

以前はRubyをよく使っていたので、それと比較してしまうと、PHPのデバッグにはちょっとした不満がありました。

というのもRubyだと、以下のようなデバッグコードで結構手軽に変数の内容を知ることができます。

これが、PHPだと以下のように書く必要があります。

ちゃんと変数の中身を見ようと思ったら、vat_dumpとキーボードを多く叩く必要があるのが地味に面倒くさいです。

そんなことを思いながら日々PHPを利用していたのですが、「変数の詳細参照」を以下のような手軽なコードでできる無料ツールを最近知りました。

しかも、以下のように「見やすく綺麗に変数値を表示」までしてくれるじゃないですか。

edumpで$postを出力

上記は、Wordpressのポスト情報を格納した$postを出力した例です。

単なるPHPのvar_dumpだと、ここまで見やすく表示出来ないと思います。

使った瞬間「これは便利!」と思ったので、しばらく使ってみました。

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

edumpとは

edump var_dumpに代わるデバッグツールが最高すぎる(無料)

edumpは、利用中のWEB開発環境に手軽にデバッグツールを構築できる無料ツールです。

デバッグ環境を作るのも非常に簡単で、edumpに無料登録してコードをプロジェクト(プログラムの初期化処理等の部分)に貼り付けるだけです。

デバッグ出力の例として、以下のようなコードでデバッグしたとします。

すると、以下のようにブラウザ上に見やすく自動的に表示してくれるツールです。

edumpで変数を見やすく出力

もちろん、PHPだけでなく主要なWEB向け言語なら利用可能です。

利用可能な言語

edumpで利用可能な言語

  • PHP
  • JavaScript
  • Ruby
  • Python

試験的に利用可能な言語

その他にも、以下の言語にも試験的に対応しています。

edumpで試験的に利用可能な言語

  • Java
  • Perl
  • C#.net
  • VBScript

これだけの言語が利用可能であれば、大抵のWEBプロジェクトで利用可能かと思います。

edumpの利用方法

edumpの利用方法は簡単です。

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

edumpページで新規登録ボタンを押す

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

edumpでメールアドレスの登録

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

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

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

PHPプログラム側での初期設定

ログインすると、以下のような画面が表示されます。

edumpのダッシュボード

今回、PHP(Wordpress環境)で利用するので、PHPマークをクリックします。

edumpでPHPマークをクリック

すると、以下のようなPHPコードが表示されるので、コピーします。

edumpでPHP用のコードをコピー

コピーしたPHPコードを「PHPプログラムの初期化処理部分」に貼り付けます。僕の場合は、Wordpressテーマなどで利用するので、functions.phpの先頭に貼り付けました。

edumpのコードをPHP初期化部分に貼り付ける

evalが使われていますが、edump曰く「※このevalを含む初期化コードは完全にサニタイジング対応された安全なコードです。」とのことです。

PHP5.3以上で利用できます。

edumpでデバッグウィンドウ(タブ)を開く

次に、デバッグ内容を確認するためのビューワーを開きます。

「システムツール」メニューから「新しいウィンドウでビューワーウィンドウを開く」ボタンを押してください。

新しいウィンドウでデバッグビューワーを開く

すると以下のようなデバッグ用のビューワーウィンドウが表示されます。

edumpのデバッグビューワーウィンドウ

このウィンドウは、そのまま開いた状態にしておいてください。

デバッグ用のコードを書く

ここまで準備ができたら、あとはPHPでデバッグコードを書くだけです。

例えば、先程も紹介しましたが以下のように書くと

edumpのデバッグコードデモ

以下のように表示されます。

edumpで変数を見やすく出力

その他にWordpressデフォルトで用意されているグローバル関数の$wpdbや$post内の値を確認するのにも重宝します。

こんな感じで書くと、

2017-11-08_12h31_05

以下のように見やすく確認できます。

edumpで$wpdbを確認

もちろんvar_dumpでも中身だけなら出力することはできます。けれど、環境によっては表示が崩れたり、値にHTMLが入っている場合は、ブラウザで表示されない(タグエスケープされていないので)なんてことがあります。

edumpの場合は、そういったこともなくなります。変数の値がHTMLだった場合でも、以下のように見やすく表示されます。

edumpでリンク出力テスト

これでわざわざ、preタグを用いてvar_dumpを設定して出力する必要もないかと思います。

PHP開発をしていてバグがあった時に変数の中身を確認したいなんて時があります。 そんなときは、var_dump関数を用いて、変...

加えて、こういったライブラリを利用するよりも手軽にできます。

先日、PHPのvar_dumpを用いて、HTML上にも変数内の値をわかりやすくする方法を紹介しました。 通常のデバッグならこれでも...

その他にも、PHP警告(WARNING)も該当箇所とともに出力してくれるのも地味に助かります。

PHP警告(WARNING)もedumpで出してくれる

上記のように表示されるので、修正箇所にすぐに気づくことができます。

その他のデバッグ用関数

edumpでは、_v()関数の他にも、以下のようなデバッグ用関数が用意されているので、用途によって使い分けることが可能です。

_edump()を用いれば、デバッグ出力をカスタマイズしたり、処理速度の計測も可能です。

ブラウザの拡張機能でデバッグも可能

また、edumpではブラウザ拡張をインストールすれば、デベロッパーツールからもデバッグ可能になります。

「デバッグ確認用のウインドウ(タブ)をいちいち開くのが面倒くさい」なんて場合は、ブラウザ拡張を利用すればより作業がはかどります。

Chrome拡張 edump

Chrome拡張 edumpを利用すると、デベロッパーツールで以下のように表示されます。

Chrome拡張edump

Firefoxアドオン edump

Firefoxアドオン edumpを利用すると、開発者ツールで以下のように表示されます。

Firefoxアドオン edump

これらを使うと、同画面で「動作確認」と「変数値の確認」を行うことも可能です。

edumpの気になる点

こんな感じで、edumpはとても簡単にWEBデバッグ環境を作成することが可能です。

ただ、僕も全てを把握しているわけではないのですが、気になる点は以下の3点。

  • evalを利用している
  • 一旦データがedumpサーバーに送られる
  • プラウザが重くなるケースもある

これらについて、ちょっと調べてみました。

evalを利用している

evalについては、コード取得時に以下のように書かれています。

※このevalを含む初期化コードは完全にサニタイジング対応された安全なコードです。

一般的にevalを利用する場合は、細心の注意を払う必要があります。

eval()

この関数は指定した文字列をPHPのコードとして評価します。
任意のPHPコードを実行できてしまうので非常に危険です。
使用する場合は細心の注意を払う必要があります。

PHPセキュリティー PHPで注意する関数 | WEPICKS!

こういった関数を利用しているということを踏まえた上で利用を検討する必要があるかと思います。

一旦データがedumpサーバーに送られる

後、デバッグコードは、一旦edump.net上に送られてからブラウザで表示されます。

edumpデバッグ内容が送られてから表示

なので、デバッグ内容はedump側が知ろうと思えば、知ることは可能だと思います。

ただ、プライバシーポリシーを読むと以下のようには書かれています。

2.個人情報の取得について
個人情報に関して、当サービスがご本人の同意なく無断で収集、利用することはいたしません。ご本人の同意を得る場合も、利用目的と範囲を事前に明確にし、同意を得た範囲でのみ使用致します。また、第三者から個人情報を含むデータを受け取る場合も、個人情報保護の適切な合意の下でのみ受領いたします。
3.個人情報の利用について
当サービスは、個人情報を取得した利用目的の範囲内で、業務の遂行上必要な限りにおいて、利用します。事前に通知されていない目的で個人情報を利用する場合は、予めご本人の同意を得た上で行います。

デバッグ情報が個人情報に含まれるのかまでは、ちょっとわからないですが、一応上記のように書かれています。

ただ、極秘プロジェクトとかで利用するのは避けたほうが無難かもしれません。

僕の場合は、「どうせ公開するコード」もしくは「テストコード」の開発で利用しているので特に気にしてはいません。

ブラウザが重くなるケースケースもある

上で書いたように、デバッグ情報はサーバに一旦送付されます。

なので、ループ内で大量にデバッグ出力したり、PHP警告があったりすると、ブラウザ上に大量に(何十、何百と)デバッグ情報が出力され、ブラウザの出力処理が追いつかず固まってしまう可能性もあります。

まとめ

ここしばらくedumpを使ってPHP開発をしているのですが、かなり重宝しています。

良い点をまとめるとこんな感じ。

  • デバッグのための入力コードを多少短くできる→_v()
  • 導入は基本的にコピペだけで簡単
  • デバッグ画面で配列やオブジェクトも綺麗に表示できる
  • デバッグ出力関数を消し忘れてもサイトなどには出力されない
  • PHP、JavaScript、Ruby、Python他と主な言語に対応
  • PHP警告メッセージも出力される

「デバッグ環境の構築」と言ったら、僕の中では結構面倒くさいイメージでしたがedumpは拍子抜けするほど簡単でした。

上でも書きましたが、一応気になる部分もまとめておきます。

  • evalを使用している(公式曰く完全にサニタイズ済み)
  • 一旦データがedumpサーバーに送られる(公式曰く個人情報は収集しないそう)
  • 大量にデバッグ出力するときには要注意

僕は、使ってみて便利だったのと、公開するつもりのコードでしか利用していないので、有用に利用させていただいています。

というわけで、「WEB言語のデバッグ出力を見やすく表示したい」とか「手軽にデバッグ環境を構築したい」なんて場合は、おすすめのツールです。

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

WordPressでデバッグ環境を構築するなら、こちらの方法の方が手軽です。

前回、手軽にWEBデバッグ環境を構築できる、無料ツールの「edump」を紹介しました。 上記で紹介した方法も十分すぎる...