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

console.log以外にもデバッグに役立つ便利なメソッドが色々あるのですが、意外と知られていないように感じたのでまとめました。

## console.time / console.timeEnd

console.timeが呼び出されてから、console.timeEndが呼び出されるまでに経過した時間を計測する。
いちいちDateとか使わなくても良いので手軽に使えるし、timerを入れ子にしたりできるので非常に便利。

console.timeの引数に文字列を与えることで、timerに名前を付けて区別することが可能。

### サンプル

```js
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](https://qiita-image-store.s3.amazonaws.com/0/34021/a019d9c8-aa87-3c8c-6442-d8aa851fc218.jpeg "console-time.jpg")

## console.profile / console.profileEnd

console.profileが呼び出されてから、console.profileEndが呼び出されるまでに呼び出された関数の実行時間等を解析する。

### サンプル

```js
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](https://qiita-image-store.s3.amazonaws.com/0/34021/93b5eb02-3b83-e54f-9935-21fee111c37e.jpeg "console-profile.jpg")

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

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

### サンプル

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

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

### 出力
![console-assert.jpg](https://qiita-image-store.s3.amazonaws.com/0/34021/08ab8adb-a32e-397e-69da-a0de92e85745.jpeg "console-assert.jpg")

## console.count
呼び出された回数を標準出力に出力するメソッド。
その場所を何回通ったか分かるので、これも結構便利。

### サンプル

```js
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](https://qiita-image-store.s3.amazonaws.com/0/34021/34b4cf47-158e-bde1-474f-ab15abcf880c.jpeg "console-count.jpg")

## console.group / console.groupCollapsed / console.groupEnd
console.groupが呼び出されてから、console.groupEndが呼び出されるまでのログ出力をグループ化する。
console.groupは表示時に開かれた状態で表示されるが、とconsole.groupCollapsedは閉じた状態で表示されるという違いがある。

### サンプル

```js
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](https://qiita-image-store.s3.amazonaws.com/0/34021/decec8bf-4859-868e-9ea1-31ef704d53df.jpeg "console-group.jpg")

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

### サンプル

```js
function a() {
  b();
}

function b() {
  c();
}

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

a();
```

### 出力
![console-trace.jpg](https://qiita-image-store.s3.amazonaws.com/0/34021/10f7b55a-60a8-d014-6017-bc726a161d92.jpeg "console-trace.jpg")

## console.info / console.error / console.debug / console.warn
console.logと同様にメッセージを出力するだけだが、それぞれブラウザコンソール上での見た目が異なる。
console.logで大量にログ吐くと何がなんだか分からなくなるが、これらのメソッドを使い分けておくと見やすくなる。

### サンプル

```js
console.log('log');
console.debug('debug');
console.info('info');
console.warn('warn');
console.error('error');
```

### 出力
![console-log.jpg](https://qiita-image-store.s3.amazonaws.com/0/34021/5d34a4ea-48f1-30f1-8c6f-505ba03bd01e.jpeg "console-log.jpg")

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

```
log
info
warn
error
dir
time
timeEnd
trace
assert
```