console.log以外にもデバッグに役立つ便利なメソッドが色々あるのですが、意外と知られていないように感じたのでまとめました。
console.time / console.timeEnd
console.timeが呼び出されてから、console.timeEndが呼び出されるまでに経過した時間を計測する。
いちいちDateとか使わなくても良いので手軽に使えるし、timerを入れ子にしたりできるので非常に便利。
console.timeの引数に文字列を与えることで、timerに名前を付けて区別することが可能。
サンプル
function heavyLoop() {
for (var i = 0; i < 1000000; ++i) var obj = new Object();
}
function lightLoop() {
for (var i = 0; i < 100000; ++i) var obj = new Object();
}
console.time('all');
console.time('heavy loop');
heavyLoop();
console.timeEnd('heavy loop');
console.time('light loop');
lightLoop();
console.timeEnd('light loop');
console.timeEnd('all');
出力
console.profile / console.profileEnd
console.profileが呼び出されてから、console.profileEndが呼び出されるまでに呼び出された関数の実行時間等を解析する。
サンプル
function heavyLoop() {
for (var i = 0; i < 1000000; ++i) var obj = new Object();
}
function lightLoop() {
for (var i = 0; i < 100000; ++i) var obj = new Object();
}
console.profile('profile test');
heavyLoop();
lightLoop();
console.profileEnd('profile test');
出力
profileの引数に渡した文字列がprofileのタイトルになる。
console.assert
第一引数がfalseの時、第二引数の内容を標準エラーに出力するメソッド。
テストで使ったり、デバッグで使ったりと色々用途のあるメソッド。
サンプル
function isEven(num) {
return num % 2 == 0;
}
console.assert(isEven(2), '偶数だよ');
console.assert(isEven(1), '奇数だよ');
出力
console.count
呼び出された回数を標準出力に出力するメソッド。
その場所を何回通ったか分かるので、これも結構便利。
サンプル
function isEven(num) {
return num % 2 == 0;
}
function countEven(num) {
for (var i = 1; i < num; ++i) {
if (isEven(i)) {
console.count('even');
}
}
}
countEven(11);
出力
console.group / console.groupCollapsed / console.groupEnd
console.groupが呼び出されてから、console.groupEndが呼び出されるまでのログ出力をグループ化する。
console.groupは表示時に開かれた状態で表示されるが、とconsole.groupCollapsedは閉じた状態で表示されるという違いがある。
サンプル
console.group('group');
for (var i = 0; i < 10; i++) {
console.log(i);
}
console.groupEnd();
console.groupCollapsed('groupCollapsed');
for (var i = 0; i < 10; i++) {
console.log(i);
}
console.groupEnd();
出力
console.trace
呼び出し時のスタックトレースを出力する。
ブラウザならブレークポイント張ってスタックトレース見る方が楽な気がするが、nodeとかだとブレーク貼るのめんどくさかったりするので、意外と使う。
サンプル
function a() {
b();
}
function b() {
c();
}
function c() {
console.trace();
}
a();
出力
console.info / console.error / console.debug / console.warn
console.logと同様にメッセージを出力するだけだが、それぞれブラウザコンソール上での見た目が異なる。
console.logで大量にログ吐くと何がなんだか分からなくなるが、これらのメソッドを使い分けておくと見やすくなる。
サンプル
console.log('log');
console.debug('debug');
console.info('info');
console.warn('warn');
console.error('error');
出力
実装状況
ブラウザ固有っぽいメソッドもあるので、nodeだと使えなさそうなのもあるなーと思ったら、案の定実装されていないものが多かった。
node(v4.1.1)では、consoleオブジェクトは以下のメソッドしか持っていない。
log
info
warn
error
dir
time
timeEnd
trace
assert