consoleはlog()だけじゃない！　

## 環境
Chrome（バージョン: 119.0.6045.105）

## console.assert()
第１引数がfalseのときは第２引数のメッセージを出力する。

```jsx
const isEven = (number) => {
    if (number % 2 === 0) {
        return true;
    } else {
        return false;
    }
}

console.assert(isEven(3), '奇数です');
console.assert(isEven(2), '偶数です');
```
<img width="50%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3527059/c8962a70-5c3a-2379-9b1d-5355d33981e1.png">



## console.clear()

コンソールをクリアする

↓実行後
<img width="50%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3527059/5169b1bd-a039-c119-b1c0-4dae8d0f8552.png">

ちなみに、コンソールのこの部分をクリックすればコンソールをクリアできる
<img width="50%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3527059/0707af14-798b-1a7d-d6f7-b4d04a4e59fa.png">


## console.count()
指定された引数でこのメソッドが呼び出された回数をログ出力する。
引数が渡されない場合は'default'でカウントする。
```jsx
const count = () => {
    console.count();
}
count();
count();
```
<img width="50%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3527059/8f086307-b935-1867-6b60-415904e84ec9.png">

```jsx
const hoge = (name) => {
    console.count(name)
}

hoge('sato');   // sato: 1
hoge('suzuki'); // suzuki: 1
hoge('tanaka'); // tanaka: 1 
hoge('sato');   // sato: 2
hoge('sato');   // sato: 3
hoge('suzuki'); // suzuki: 2
```
<img width="50%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3527059/36a1a981-d615-44ed-d739-c3d88a1417cd.png">

## console.countReset()

console.count()の数値をリセットする。

```jsx
const hoge = (name) => {
    console.count(name)
}

hoge('sato');   // sato: 1
hoge('suzuki'); // suzuki: 1
hoge('tanaka'); // tanaka: 1 
hoge('sato');   // sato: 2
hoge('sato');   // sato: 3
hoge('suzuki'); // suzuki: 2

console.countReset('sato');
hoge('sato');   // sato: 1
```
<img width="50%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3527059/58b19fb0-0e3a-eb27-2c44-568fc50cb9b5.png">

## console.dir()
出力に違いはあるが正直メリットをあまり感じない。

```jsx
const object = {
    human: {
        id: 1,
        name: 'Bob',
        age: 20
    },
    personal: {
        heigh: 170,
        weight: 60,
    }
};
console.log(object);
console.dir(object);
```
<img width="50%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3527059/f522f3a1-78ef-b37a-3f2d-1b5c51c23195.png">


## console.error()
エラーとしてコンソールに出力される。
```jsx
console.error('test');
```
<img width="50%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3527059/acfffb23-db46-730c-e5c4-56a1a1f399d2.png">


## console.group() / console.groupEnd()

コンソールへの出力に階層をつけることができる。groupEnd()で一つ前の階層に戻る。

```jsx
console.log("level 1-1");
console.group();
console.log("Level 2-1");
console.log("level 2-2")
console.group();
console.log("Level 3-1");
console.warn("More of level 3");
console.log('level 3-2')
console.groupEnd();
console.log("level 2-3");
console.groupEnd();
console.log("level 1-2");
```
<img width="50%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3527059/161ef34a-6935-0966-3492-88445ce68d15.png">


## console.groupCollapsed()

groupが畳まれた状態でコンソールに出力される。クリックすれば開く。

```jsx
console.log("level 1-1");
console.groupCollapsed();
console.log("Level 2-1");
console.log("level 2-2")
console.groupCollapsed();
console.log("Level 3-1");
console.warn("More of level 3");
console.log('level 3-2')
console.groupEnd();
console.log("level 2-3");
console.groupEnd();
console.log("level 1-2");
```
<img width="50%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3527059/bf43cd36-db0f-613a-26e3-e854629ead6e.png">


## console.log()

いつもの。お世話になっております。

## console.profile() / console.profileEnd()

JavaScriptコードのパフォーマンスプロファイルを取得する。
正直これを使わなくても、開発者ツールのパフォーマンスで観れるし、下記のコマンドを実行するとパフォーマンスタブが開くようになっているっぽい。

```jsx
console.profile('test');
for (let i = 0; i <= 1000; i++) {
    if (i === 1000) {
        console.log('1000')
    }
}
console.profileEnd();
```
<img width="50%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3527059/a4cf6fe9-906e-364f-136f-37bbbf8c5131.png">


## console.table()

渡されたデータをテーブル形式でコンソールに表示する。

```jsx
let array1 = ["愛媛", "高知", "徳島", "香川"];
console.table(array1);
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3527059/8466d13e-1135-2867-e10a-790c9387a156.png)


```jsx
let array = [
    {
        id: 1,
        name: "aa"
    },
    {
        id: 2,
        name: "bb"
    }
];
console.table(array);
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3527059/3c2b483f-4f2f-b9dd-6518-c2b898828272.png)


## console.time() / console.timeEnd()
処理の実行時間を測る。

```jsx
console.time('test');
for (let i = 0; i <= 1000; i++) {
    if (i === 1000) {
        console.log('1000')
    }
}
console.timeEnd('test');
```
<img width="50%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3527059/de918491-09b8-f984-4dd3-85301b0dc4d6.png">


## console.timeLog()
前回 console.time() を呼び出すことで起動したタイマーの現在の値をコンソールに記録する。
```jsx
console.time("クリックまでの時間");
alert("OK？");
console.timeLog("クリックまでの時間"); // １回目のアラートクリックまでの時間
alert("OK?");
console.timeEnd("クリックまでの時間"); // ２回目のアラートクリックまでの時間（１回目との差ではない）
```
<img width="50%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3527059/50cfe820-56e5-0a14-65b8-b74eb4d78128.png">

## console.trace()

スタックトレースを出力する。
下記の例だと、trace()の直前で呼び出しているのはthree(), その前はtwo(), その前はone()というふうに出力される。

```jsx
function one () {
    two();
}
function two () {
    three();
}
function three () {
    console.trace();
}
one();
```
<img width="50%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3527059/eba435e6-7c22-8ea6-cade-13531e290ee5.png">


## console.warn()

警告メッセージを出力する

```jsx
console.warn('test');
```
<img width="50%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3527059/560f9b59-654d-d96f-d6f8-436ab15bce3f.png">


## 参考
https://developer.mozilla.org/ja/docs/Web/API/console#%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89