Console APIについて

# 概要
フロントエンドエンジニアなら必ず `console.log()` メソッドを使用したことがあると思います。

https://developer.mozilla.org/en-US/docs/Web/API/Console/log

console APIにlogの他にもいくつかデバッグを助けるAPIがあるので紹介します。


## Tables
`console.table()` はオブジェクトや配列を表形式で表示してくれます。

```js
console.table({
  'Time Stamp': new Date().getTime(),
  'OS': navigator['platform'],
  'Browser': navigator['appCodeName'],
  'Language': navigator['language'],
});
```

![スクリーンショット 2022-12-06 19.19.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154845/5cd57c06-eab9-109d-e25c-ff195c457e4b.png)

```js
console.table(["hoge","fugo","piyo"])
```

![スクリーンショット 2022-12-06 19.20.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154845/36a1f411-340b-be80-bee0-7aea20a9606a.png)


## Groups
`console.group()`を使用すると、コンソールログを折りたたみ可能な表示でグループ化できます。
`console.groupCollapsed`を使用すると、コンソールログをデフォルトで折りたたまれた形で出力します。

```js
console.group('URL Info');
  console.log('Protocol', window.location.protocol);
  console.log('Host', window.origin);
  console.log('Path', window.location.pathname);
  console.groupCollapsed('Meta Info');
    console.log('Date Fetched', new Date().getTime());
    console.log('OS', navigator['platform']);
    console.log('Browser', navigator['appCodeName']);
    console.log('Language', navigator['language']);
  console.groupEnd();
console.groupEnd();
```

![スクリーンショット 2022-12-06 19.33.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154845/6df01317-8ac0-3c45-f8e2-50eb53a5e600.png)


## Styled Logs
colorやfont, backgroundなどのcssが `console.log()` 中で使用することができます。

```js
console.log("%c🐯", "background: #1cce69; font-size:5rem; border-radius: 5px; padding: 100px; ")
```

![スクリーンショット 2022-12-06 19.38.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154845/b6d2c01e-9a31-d5c4-e9f6-b0eae8b8e15d.png)


## Time
実行時間の計測も可能です。
`console.time()`でラベルを渡しタイマーをスタートさせ、 `console.timeEnd()`に同じラベルを渡すことでタイマーを終了させることでその間の時間を計測することができます。

```js
console.time("concatenation");
let output = "";
for (var i = 1; i <= 1e6; i++) {
  output += i;
}
console.timeEnd("concatenation");
```

![スクリーンショット 2022-12-06 19.44.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154845/98a57f17-9c58-3935-f3cd-b2b28066bf79.png)

## Assert
`console.assert()`は、エラーが発生した時や、特定の条件下のみコンソールにログを出す場合に有効です。
第一引数の条件がtrueである場合は、ログが表示されません。

```js
const errorMsg = 'the # is not even';
for (let num = 2; num <= 5; num++) {
  console.log(`the # is ${num}`);
  console.assert(num % 2 === 0, { num }, errorMsg);
}
```

![スクリーンショット 2022-12-06 19.51.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154845/884ced3a-c63a-0567-f37c-9a8bb40c991b.png)

## Count
`console.count()`を使用することで、同じログメッセージの出力回数をカウントすることができます。
引数に何も指定しない場合は、`default: {count}`と出力されます。

`console.countReset()`でカウントをリセットすることができます。

```js
const numbers = [1, 2, 3, 30, 69, 120, 240, 420];
numbers.forEach((name) => {
  console.count("hoge");
});
```

![スクリーンショット 2022-12-06 19.54.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154845/e78c70b5-bdaf-3167-aca3-3809779fe8b3.png)


## Trace
`console.trace()`を使用すれば、スタックトレースが出力され、特定のタイミングでどのメソッドがコールされたかがわかります。
ネストされたメソッドのデバッグ等に有効です。

```js
function foo() {
  function bar() {
    console.trace();
  }
  bar();
}

foo();
```

![スクリーンショット 2022-12-06 19.56.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154845/e71342b2-2639-3c0b-a709-cfdb20b613ab.png)


## Dir
`console.dir()`は深くネストしたオブジェクトをデバッグする際に有効です。展開可能なツリー表示フォーマットしてくれます。

```js
const hoge = {
  'Time Stamp': new Date().getTime(),
  'OS': navigator['platform'],
  'Browser': navigator['appCodeName'],
  'Language': navigator['language'],
}
console.dir(hoge)
```


# 参考
https://dev.to/lissy93/fun-with-consolelog-3i59