LoginSignup
62
55

More than 5 years have passed since last update.

Javascriptのデバッグを効率的にする便利なconsole系メソッド

Last updated at Posted at 2016-02-18

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-time.jpg

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');

出力

console-profile.jpg

profileの引数に渡した文字列がprofileのタイトルになる。

console.assert

第一引数がfalseの時、第二引数の内容を標準エラーに出力するメソッド。
テストで使ったり、デバッグで使ったりと色々用途のあるメソッド。

サンプル

function isEven(num) {
  return num % 2 == 0;
}

console.assert(isEven(2), '偶数だよ');
console.assert(isEven(1), '奇数だよ');

出力

console-assert.jpg

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-count.jpg

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-group.jpg

console.trace

呼び出し時のスタックトレースを出力する。
ブラウザならブレークポイント張ってスタックトレース見る方が楽な気がするが、nodeとかだとブレーク貼るのめんどくさかったりするので、意外と使う。

サンプル

function a() {
  b();
}

function b() {
  c();
}

function c() {
  console.trace();
}

a();

出力

console-trace.jpg

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');

出力

console-log.jpg

実装状況

ブラウザ固有っぽいメソッドもあるので、nodeだと使えなさそうなのもあるなーと思ったら、案の定実装されていないものが多かった。
node(v4.1.1)では、consoleオブジェクトは以下のメソッドしか持っていない。

log
info
warn
error
dir
time
timeEnd
trace
assert
62
55
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
62
55