JS Inspect - 技術日記＠kiwanami

JavaScriptでユニットテスト的なプログラムを書いていたのだけど、テスト結果の表示が面倒なので結果を配列やオブジェクトに詰めてFirebugのコンソールに表示していた。書く分にはテストを入れ子にしたり、自由に組み合わせて便利だったのだけども、テストの数が多くなり始めたらいい加減見づらくなってきた。これが分かりやすくレイアウトされるだけで、JUnit的な「グリーンのバーがどうの〜」という感じになるのではないかと考えた。

また、JSONを見やすくレイアウトして眺めたいとか、JSONのドキュメントを書くのにJSONを綺麗に可視化したいという欲求もあったので、例によって長い移動時間でRubyのinspectみたいな物を作ってみようと考えた。

以下ソース例。

$(function() {
    var simple1 = [ 11, 22, 33, 44 ];

    var simple2 = {
        name: "Ozawa Fukuda",
        address: "Tokyo, Osaka",
        nullNode: null,
        comments: "Comment Comment Comment Comment"
    };

    var test = {
        name: "Koizumi Tanaka",
        address: "Fukuoka, Kagoshima",
        reference: simple1,
        memo: {A:12, B:false, C:true, D: new Date(), ref2: simple2},
        tel: ["012-234-1234","098-765-4321","1-23-4-556-2","1234.1234.243"],
        komment: "Comment Comment <html>alert(\"HTML!\");</html>Comment Comment"
    };
    test["circular"] = test; // 循環参照
    test.memo.largeNode = [];
    for(var i=0;i<30;i++) {// 大量
        test.memo.largeNode.push("random : "+Math.floor(Math.random()*500));
    }

    JSInspect.show($("#simple"),test);       // ECMAオブジェクト
    JSInspect.show($("#document"),document); // documentオブジェクト
    JSInspect.show($("#window"),window);     // windowオブジェクト
});

その結果。

循環参照とかDOMのような巨大なオブジェクトも何とか見やすくしようと試みた。また、深い入れ子もなるべくストレス無く表示できるように、クリックして展開するようにしてみた。いきなり展開したHTMLを表示するとどこに表示されたのか分からなくなったので、jQueryのエフェクトやinterface.jsのスクロールなんかも少し使ってみた。展開を解除したときに、どこに居たのか分からなくなるのは多分気のせい。

なかなか面白い。普段あまり見ないDOMオブジェクトの階層とか、FirefoxとIEとのオブジェクトの違いなどが良く分かる。

JSONを表示するには入力フィールドが必要だということでつけてみた。また、シェルっぽく使いたくなってきたので、入力フィールドや簡単な補完なども入れてみた。

ということで、現状のJS Inspect Console。IEのfixedは時々居なくなったりして素敵。

高機能なAlertみたいに使ったり、普通にJavaScriptの練習用とか、JSONのドキュメント用の挿絵とか、同じサイトに置いてBookmarkletで開いてIEのコンソールとして使ったり、いろいろ出来そうだなと考えているうちに疲れて来て終了。作りかけの機能が多少散在している。

結局、ツールを作って満足してしまうパターン。