javascript dumper bookmarklet

Post to Twitter

PerlにはPerl::Dumperという心強いデバッグの友がいる。
それを真似て、JavaScriptでオブジェクトの中身を見るブックマークレットを作ってみた。

ソース。

alert(
  (function(p,n,s,i){
    var t = p ? p[n] : eval(n);
    for(var j=0; j<i; j++) s += '\t';
    s += n + ' : ';
    s += ('' + t ).replace(/\n[\t ]*/g, ' ');
    if(typeof(t)=='object' || typeof(t)=='function')
      for(var k in t)
        s += '\n' + arguments.callee(t, k, '', i+1);
    return s;
})(null,window.prompt('object name to dump'),'',0));

book marklet

javascript:alert((function(p,n,s,i){var%20t=p?p[n]:eval(n);for(var%20j=0;j<i;j++)s+='\t';s+=n+'%20:%20';s+=(''+t).replace(/\n[\t%20]*/g,'%20');if(typeof(t)=='object'||typeof(t)=='function')for(var%20k%20in%20t)s+='\n'+arguments.callee(t,k,'',i+1);return%20s;})(null,window.prompt('object%20name%20to%20dump'),'',0));

使用例

        function classA(){
            this.prop1 = 10;
            this.prop2 = 20;
        }

        function classB(){
            this.prop1 = 100;
        }

        classB.prototype = new classA();

こうなってるときに、classBについて調べると、こうなる。(FireFox3.6.24)
(FireFox8および9で試すと、prototypeプロパティが表示されなくて混乱したが、DontEnum属性というのが関係しているのではないかと思われる。)

classB

classB : function classB() { this.prop1 = 100; }
	prototype : [object Object]
		prop1 : 10
		prop2 : 20

objectおよびfunctionのプロパティについては、python風にインデントして、再帰的に全部表示する。
まぁ、タイトルにダンパーと付けた割に、ダンプした内容から元のオブジェクトを復元したりはできないんですが。詐欺してごめんなさい。

個人的に学習およびデバッグ用に使います。

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="">