TRY AND ERROR

気になったこと、勉強したこと、その他雑記など色々メモしていきます。。Sometimes these posts will be written in English.,

これ知らなかったなあ(´・ω・`)

数年前にjavasriptを初めて触ったとき、変数の中身をみるのは常にalert()だった。
それからconsole.log()を覚え現在に至る。。

ブラウザでデバッグできたりもするけど、
今でもやっぱりconsole.log()で確認するのがしっくりきます。


consoleに出力する方法がいろいろあることを最近知ったのでカキコ(´・ω・`)

1.いままで使ってたやつ
console.log()

f:id:tamago-engineer:20150819224604p:plain


2.実行回数をcount up
for (var i = 0; i < 5; i++) {
    console.count("label");
}

f:id:tamago-engineer:20150819224653p:plain


3.メソッドスタックトレースが見れる
function test1(){
	console.trace();
}
function test2(){
	test1();
}
test2();

f:id:tamago-engineer:20150819224711p:plain


4.時間をはかる

これはさすがに知ってた。。

console.time("hoge");
console.timeEnd("hoge");

f:id:tamago-engineer:20150819224720p:plain



5.オブジェクトを表でみれる

リッチな感じですが、「添字」って何か違和感あるなあww

console.table(test);

f:id:tamago-engineer:20150819224731p:plain


6.オブジェクトの構造がみれる

ブラウザの開発者ツールでいい気がするけど。。

console.dir(test);

f:id:tamago-engineer:20150819224743p:plain



7.グループ化

firefox標準のコンソール(Gecko)では未サポートのようでうまく動かなかったのでchromeでcap)

console.groupCollapsed("part1");
console.log("a");
console.log("b");
console.log("c");
console.groupEnd();

console.groupCollapsed("part2");
console.log("d");
console.log("e");
console.groupEnd();

f:id:tamago-engineer:20150819224753p:plain


8.使いどころがいまいちわからんけど、分かりやすくできるみたい
console.error(test);
console.info(test);
console.warn(test);

f:id:tamago-engineer:20150819224804p:plain



consoleオブジェクトには他にもメソッドがあるみたいですが、
今回は割と使えそうなものをチョイスしました!