JavaScript デバッグツール

投稿者 nanki 2008-06-12 13:04:00 GMT

inspection

いろんなブラウザでチェックしているうちに、ちょくちょく使う機能をまとめてみた。

DebugTool.alertbox(msg)
  console.log の代わり。

DebugTool.report(target, filter)
  target内の関数呼び出しを監視。
  内部でprototype.js とかを使いまくってるので、DebugTool.report(Prototype)とかはやらないこと!

DebugTool.inspect(target)
  DOM ツリーを遡って、タグ名、id、class属性などを表示。

DebugTool.shell()
  シェルっぽいのがでてくる。未完成、おまけ。

などなど。

要 prototype.js, effect.js

debug.js

これを任意のページでロードするbookmarkletの話は、別エントリで書く。

reportの中身は結構面白いと思う。

  report: function(target, filter) {
    var func = function(name) {
      return (function(a){
        var result = a.apply((function() {return this}).apply(a), $A(arguments).slice(1));
        DebugTool.alertbox(name + '(' + $A(arguments).slice(1).inspect().gsub(/^\[|\]$/, '') + ') -> '+$A([result]).inspect()+'.');
        return result;
      });
    };

    for (key in target) {
      if (typeof target[key] == 'function' && (!filter || filter(key))) {
        target[key] = target[key].wrap(func(key));
      }
    }
  },

wait もおすすめ。

  wait: function(wait_for, callback) {
    var check = false;
    try{
      check = (typeof(wait_for) == 'function') ? wait_for() : eval(wait_for);
    }catch(e){
    }

    if(check){
      callback(check);
    } else {
      var wait = arguments.callee;
      setTimeout(function(){wait(wait_for, callback)}, 100);
    }
  },

This entry was posted on 2008-06-12 13:04:00 GMT and カテゴリ , . You can follow any response to this entry through the Atom feed. or a trackback from your own site.

タグ


トラックバック

トラックバックリンク:
http://blog.netswitch.jp/trackbacks?article_id=8623