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

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

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

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

p 変数 #簡易版
pp 変数 #詳細版(要require 'pp')

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

echo $変数; #簡易版
var_dump($変数); #詳細版

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

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

_v($変数); #詳細版

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

edumpで$postを出力

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

global $post;
_v($post);

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

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

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

edumpとは

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

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

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

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

$value = 136 * 25 + (35465 + 5357);
_v($value);

$arr              = array();
$arr["greetings"] = "Hello world!";
$arr["T or F"]    = true;
$arr["check_val"] = null;
$arr["empty"]     = "";
$arr["number"]    = 100;
_v($arr);

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

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関数はより詳細にメッセージをビューワーに送信出来ます

// (この関数の機能を詳細に有効にするには
// https://www.edump.net/test/admin/config_user.php
// で"メッセージラベルに詳細情報を表示する"が有効になっている必要があります)

// 第一引数 = ビューワー送信したい変数
// 第二引数 = メッセージラベルに表示するオリジナルのテキスト。
// 第三引数 = メッセージラベルに設定されるタグ。同様のタグを設定して再度命令を呼び出すと、同じタグ間での
//            処理経過時間がビューワー上に表示されます。指定ポイントでの処理速度の計測等で使用出来ます。
//            (処理速度経過時間の確認にはビューワーをリロードしてください。測定結果がタグ部分に表示されます)
// 第四引数 = メッセージラベルに指定の色を着ける時に16進数6桁でカラーコードを指定してください。

_edump($arr2, "label", "sample tag", "33ff00");
_edump("二回目のsample tag", "label", "sample tag", "33ff00");
// --------------------------------------------------------------

// 下記ではedumpのコードストップ機能を呼び出しています。下記の_eを実行すると「END-OF-EXECUTE」のメッセージ出力と共に
// プログラムの実行をストップします。標準のexit関数と同様の働きをしますが、「END-OF-EXECUTE」をedumpビューワーに
// 出力しますので、コードがストップしたタイミングが分かりやすくなっています。
_e();

// 下記では任意のタイミングでedumpビューワーのログをクリアします。
_c();

// 下記では任意のタイミングでedumpビューワーのログをリロードします。ブラウザの再読込と同様の機能をビューワーウィンドウに対して
// 実行します。リロードが完了するまでは_vやその他の関数を呼び出す事は出来ません。
_r();

_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」を紹介しました。上記で紹介した方法も十分すぎる...

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

  1. 名前:通りすがり 投稿日:2018/01/18(木) 10:47:31 ID:ccebf8bc0

    昔からあるdBugに比べてどういいのか分からない。
    登録する手間が増えるだけではと考えてしまう。

    1.デバッグ環境だけ、Sessionに見たいデータ詰めるロジックを用意しておく
    2.Sessionの対象をdBugで表示するテンプレ1枚用意
    3.好きなタイミングで開いて確認

    開発環境では、サンプルデータが非公開データだったりすることも多いので、
    外部環境にデータをポストするツールを使うのはあんまりお勧めできない。

  2. アバター画像 名前:わいひら 投稿日:2018/01/19(金) 18:29:11 ID:46ce9000e

    とりあえず、何でも上げるとすれば、導入のしやすさ(登録よりファイルを組み込むのが面倒と感じる人)と、タイピングする文字列の少なさ(これは関数をつくればいいけど)でしょうか。
    ただ、ここまで機能のあるデバッグをする人だったら、これらのことは大して苦にならないと思うので、そこまで利点はないと思います。
    慣れている人には、使い慣れたものの方が良いと思います。

    ちょっとデバック内容をしっかりとみたい初級者~初級者半向けのものだと個人的には思います。
    上で書かれた手順は、初級者の方にはおいそれとできるものではないですし。

    開発環境では、サンプルデータが非公開データだったりすることも多いので、
    外部環境にデータをポストするツールを使うのはあんまりお勧めできない。

    これについては、本文内の「気になる点」でも触れています。
    僕も、公開したくないプロジェクトで利用するのを勧めているわけではないです。

  3. 名前:あや 投稿日:2019/02/07(木) 19:12:58 ID:cae08d2c4

    ここの記事を拝見してとても便利そうだったので、edumpをFirefoxに導入してみたのですが、機能しません。
    edumpマイページからテストメッセージを送信するとちゃんとツールの画面にテストメッセージが送信されてきました。
    ですが、WordPressのPHPファイルに「_v(“テスト送信”);」を記入してブラウザ上で実行させても、ツールにデータが送信されてきません。
    [function.php]には初期化処理用のコードをコピペしてあります。

    公式サイトを確認してみましたが、他に必要な設定はなさそうでした。
    現在ローカル環境にWordPressを構築してデバッグ中なのですが、ローカル環境では使用できないのでしょうか?

    それともなにか必要な設定があるのでしょうか?

    アドバイス頂ければ幸いです。よろしくお願い致します。

  4. 名前:あや 投稿日:2019/02/07(木) 19:31:59 ID:cae08d2c4

    先ほどメッセージした者です。
    [function.php]の先頭部分に直接設定コードを張り付けて実行してみたら、今度は表示されました。

    できれば、このedumpの設定コードを[edump.php]に分離させて、[function.php]から読み込む形にした方が管理がしやすいのですが、どのようにすればよいでしょうか?

    locate_template( ‘lib/edump.php’, true ); //デバッグツール読み込み

    としても読み込まれませんでした。

    アドバイスお待ちしております。

  5. アバター画像 名前:わいひら 投稿日:2019/02/07(木) 20:11:54 ID:2047e855b

    とりあえず、もっと手軽に利用するのであれば、以下のプラグインを利用した方法が最も簡単かと思います。
    https://nelog.jp/edump-wordpress-plugin

    あえて、コードをそのように別ファイルに貼り付けるのでしたら、require_once関数を利用して呼び出すと良いかと思います。

  6. 名前:あや 投稿日:2019/02/08(金) 09:53:51 ID:a2563d90f

    コメントありがとうございます!

    [require_once]で読み込んだら上手くいきました!

    プラグインの利用も検討してみたのですが、WordPress以外でも使用することを考えると単独での使用が便利かなと思いまして・・・。

    お忙しいところ、ご回答本当にありがとうございました。

  7. アバター画像 名前:わいひら 投稿日:2019/02/08(金) 21:33:11 ID:9f69b7474

    確かに、Wordpress以外の環境で利用するとしたらそうするしかないかもしれませんね。
    とりあえず、うまくいったようでよかったです^^