今までオブジェクトのデバッグは単体行で書かなくちゃいけないかと思って、
var obj = {name:"taro", age:10}; console.log("taro is"); console.log(obj);
とか書いてた……けど、なんか違うんだろうなあと思って調べたらこんな風に書けるらしく。
var obj = {name:"taro", age:10}; console.log("taro is %O", obj);
ちなみに「%O
」だとjavascriptのオブジェクトを表示で「%o
」だとDOM Elementが表示できるらしく。
console.log("first child: %o", document.body.firstElementChild);
しかも、console.dir
関数を使ったり、あるいはDOM Elementを「%O
」としてキャプチャすると、DOM Elementをjavascriptオブジェクトに変換して表示してもくれちゃうという。
// DOMをJavascriptオブジェクトとして表示 console.dir(document.body.firstElementChild); // %O で表示することも出来る console.log("first child: %O", document.body.firstElementChild);
他にも「console.timeStamp("start A")
」みたいにすることで、デバッガのTimelineに特定の処理の実行タイミングをマークさせることが出来たり……
やっぱり不精せずに基本的なドキュメントは見ておかないといけないなあと思いました。
参考リンク:
Using the Console - Chrome Developer Tools — Google Developers