JavaScript のデバッグ時にオブジェクトを調べるのに console.dir を使うと便利

今までデバッグの際はウノウラボ by Zynga Japan: JavaScriptのバグを退治する3つの手法で公開されている以下のスクリプトを使ってオブジェクトの内容を調べていました。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script type="text/javascript"><!--
function print_r(obj) {
var count_obj = 0;
    function _output(str) {
       document.writeln(str + "<br/>");
    }
    function _print_r(obj, name, level) {
    	var s = "";
        if (obj == undefined || level > 4) return;
        for (var i = 0; i < level; i++) { s += " | "; }
        s += " - " + name + ":" + typeof(obj) + "=" + obj;
        _output(s);
        if (name == "document" || typeof(obj) != "object") return;
        for ( key in obj ) {
        if (count_obj++ > 150) return;
        	_print_r(obj[key], key, level + 1);
        }
    }
  	_print_r(obj, "*", 0);
}
//-->
</script>

しかし Firefox の firebug や Google Chrome の Developer Tools とか IE の何かで console.dir を使えば、渡したオブジェクトのプロパティとその値をすべて表示してくれますので是非皆さんもご活用ください。

1
console.dir(document)

windowのほかにも、documentやdocument.bodyなど、console.dirで解析すればすべてのプロパティ・メソッドを一覧できます。この情報は非常に有用で、初めて見るようなメソッドが色々見つかると思います。それらが解決の糸口になるかもしれません。

JavaScriptのデバッグTips – 0xFF

コメント

コメントは受け付けていません。