console.log()だけじゃない！consoleオブジェクトの使い方

## はじめに

今回は、console.log()以外のconsoleオブジェクトの使い方について解説します。

一般的には、`console.log()` がよく使われますが、他にも様々なメソッドが用意されています。

今回は、そのなかで有用なものを重点的に紹介します。

## info / warn / error

ログレベルを変更して出力することができます。

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

![スクリーンショット 2024-12-23 3.04.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2778030/294ae2e9-329e-7826-fe1c-a1e41cf96e2d.png)

## dir

オブジェクトを見やすく表示することができます。

```js
const obj = { a: 1, b: 2, c: 3 };
console.dir(obj);
```

![スクリーンショット 2024-12-23 3.23.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2778030/96f65da1-75dc-a815-8128-5b43f26e4356.png)

## table

オブジェクトをテーブル形式で表示することができます。
配列とオブジェクトでそれぞれ表示が異なります。

```js
const arr = [
  { a: 1, b: 2, c: 3 },
  { a: 4, b: 5, c: 6 },
  { a: 7, b: 8, c: 9 },
];
console.table(arr);

const user = { name: 'John', age: 20, country: 'USA' };
console.table(user);
```

![スクリーンショット 2024-12-23 3.24.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2778030/be9cf4e5-1c21-b160-3620-356f0b96a778.png)

![スクリーンショット 2024-12-23 3.26.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2778030/3b8ecb02-5663-f10e-64e0-6e265122a901.png)


## assert

第１引数の条件式が `false` の場合にエラーメッセージを出力します。

```js
console.assert(1 === 2, '不正解です');
console.assert(1 === 1, '不正解です');
```
![スクリーンショット 2024-12-23 3.29.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2778030/af7721ca-92f2-7f5a-707e-a3ab451aaad3.png)

第１引数の条件式が`true`のときは実行がスキップされます。

![スクリーンショット 2024-12-23 3.29.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2778030/4a1a8248-55eb-4ea0-b425-1007553fb8c9.png)

## group/groupEnd

グループ化して表示することができます。
console.groupでグループを開始し、console.groupEndでグループを終了します。

```js
console.group('グループ１');
console.log('ログ１');
console.log('ログ２');
console.groupEnd();

console.group('グループ２');
console.log('ログ３');
console.log('ログ４');
console.groupEnd();
```
![スクリーンショット 2024-12-23 3.33.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2778030/308610ea-895a-ed39-cbb8-fcfcfc20ae0d.png)

## groupCollapsed

上記のgroupと同様の動きですが、グループを閉じた状態で表示します。

```js
console.groupCollapsed('グループ１');
console.log('ログ１');
console.log('ログ２');
console.groupEnd();
```

![スクリーンショット 2024-12-23 3.35.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2778030/c6320e6a-7f4d-269c-12f2-f99afe74f99d.png)

## clear

コンソール画面をクリアします。

```js
console.clear();
```

## time / timeEnd / timeLog

処理時間を計測することができます。
timeLogは、timeEndと同じように処理時間を表示しますが、タイマーはリセットされません。

```js
console.time('タイマー');
for (let i = 0; i < 1000000; i++) {
  // 処理
}
console.timeEnd('タイマー');
```
![スクリーンショット 2024-12-23 3.42.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2778030/ea56fce6-f2d9-8411-3347-0eb2a369849b.png)

```js
console.time('タイマー');
for (let i = 0; i < 10000000; i++) {
  if (i % 5000000 === 0) {
    console.timeLog('タイマー');
  }
}
console.timeEnd('タイマー');
```
![スクリーンショット 2024-12-23 3.42.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2778030/c00826a0-ba6d-a901-78d9-05141ace422c.png)

## そのほかのメソッド

- trace: スタックトレースを表示
- count: ログが何回出力されたかを表示
- countReset: countのカウントをリセットする
- dirxml: XML/HTML要素を表示

他にもあるようですが、これ以外は非推奨なようなので掲載は控えます。

## おわりに

今回は、`console`オブジェクトにある`console.log()` 以外のメソッドについて解説しました。

デバッグ時には、これらのメソッドを使い分けることで、より効率的にデバッグを行うことができると思うので、ぜひ活用してみてください！

最後まで読んでいただき、ありがとうございました！