anti scroll

ブラウザと小説の新しい関係を模索する

ChromeにおけるConsoleオブジェクトを使ったデバッグ覚書

今までオブジェクトのデバッグは単体行で書かなくちゃいけないかと思って、

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