console.log()系メソッドまとめ

# 概要
フロントエンド開発をする際のデバッグによく使う consoleAPIのメソッドまとめ
参考：[公式ドキュメント](https://developer.mozilla.org/ja/docs/Web/API/console)

# メソッド一覧
独断と偏見で抜粋しています

## console.log()
標準のログ出力を行います
<img width="589" alt="スクリーンショット 2018-10-24 15.35.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/192773/f0ebcfef-1b19-1fe8-29e2-63984daee4af.png">

## console.debug()
Verboseレベルでログを出力します
青枠をクリックするとVerboseレベルのログのみ表示されます
<img width="627" alt="スクリーンショット 2018-10-24 16.07.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/192773/83453339-6a06-9213-6060-b71c07042ea2.png">

↓
<img width="626" alt="スクリーンショット 2018-10-24 16.08.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/192773/e10f5b59-8462-3162-2e07-c4ec46f6dfac.png">



## console.warn()
Warningレベルでログを出力します
<img width="628" alt="スクリーンショット 2018-10-24 15.57.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/192773/456b4e73-3527-f137-f335-fa4eba3765a1.png">

## console.error()
Errorレベルでログを出力します
<img width="628" alt="スクリーンショット 2018-10-24 15.59.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/192773/979ccaf2-4efa-1e62-3392-5c93ae24caa5.png">

## console.assert()
第1引数の条件が`false`であればエラーレベルでログを出力します
<img width="628" alt="スクリーンショット 2018-10-24 15.41.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/192773/187f8821-f502-5881-d1dd-e72b6801d505.png">

<img width="628" alt="スクリーンショット 2018-10-24 15.45.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/192773/b2ef579e-9902-14c9-0b4d-98c1063b7566.png">

## console.clear()
consoleをクリアします
![console.mov.gif](https://qiita-image-store.s3.amazonaws.com/0/192773/bac92cda-603a-6d8f-3aec-82d071ae626d.gif)


## console.count()
呼び出された回数をカウントします（渡す引数が変われば別のものとしてカウント）
<img width="628" alt="スクリーンショット 2018-10-24 16.13.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/192773/36d48683-f23b-bda7-8116-2648b9cec0a2.png">

## console.table()
オブジェクトを表にして出力します
<img width="628" alt="スクリーンショット 2018-10-24 16.18.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/192773/de74ee1a-b7d8-808d-ac88-c86007d27514.png">

指定したキーのみの表示も可能です
<img width="627" alt="スクリーンショット 2018-10-24 16.19.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/192773/b4319fd0-dfa6-4d9b-64cb-526556482ec5.png">

## console.group()
ログをグルーピングできます
`console.groupEnd()`でグルーピングを終了します
<img width="627" alt="スクリーンショット 2018-10-24 16.31.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/192773/02558216-42b5-4f5b-461c-abc5e4f7c0a1.png">

グルーピングはネストも可能です
<img width="628" alt="スクリーンショット 2018-10-24 16.32.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/192773/a4f38df0-3f98-5f4b-3268-fa57bf6ec20d.png">

## console.groupCollapsed()
`console.group()`の折りたたみ版
デフォルトで折りたたまれて表示されます
<img width="627" alt="スクリーンショット 2018-10-24 16.36.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/192773/3fcabfc7-c927-7f64-1fb7-077b54d0d974.png">

## console.time()
実行時間の計測をします
もっと詳細に計測してくれる`console.profile()`もありますが省略します
サイドバーでinfoレベルのログを表示しているので`console.debug()`の結果は表示されません
<img width="628" alt="スクリーンショット 2018-10-24 16.42.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/192773/b9da486b-12bf-0f88-e84d-5c917e4864b0.png">


## console.trace()
スタックトレースを表示します
どういうフローでそこに至ったかを確認できます
<img width="627" alt="スクリーンショット 2018-10-24 16.59.31.png" src="https://qiita-image-store.s3.amazonaws.com/0/192773/a313a341-8870-cf49-6d74-9a50c38bdd60.png">

# おまけ
consoleの左側のサイドバーでどのレベルのログを出力するかを選択できます

## Errorレベル
**console.error()**などを表示します
<img width="628" alt="スクリーンショット 2018-10-24 17.01.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/192773/12abb44d-3ef3-d9fd-2dc9-670335ce1fc5.png">

## Warningレベル
**console.warn()**などを表示します
<img width="627" alt="スクリーンショット 2018-10-24 17.01.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/192773/ff752b75-6648-c9d2-64dd-45bb4fb0adaf.png">

## Infoレベル
**console.log()**などを表示します
<img width="627" alt="スクリーンショット 2018-10-24 17.01.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/192773/242e2f98-99bd-f1ae-eb97-27d797b2d777.png">

## Verboseレベル
**console.debug()**などを表示します
<img width="627" alt="スクリーンショット 2018-10-24 17.01.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/192773/c2e929b8-8657-7a09-042f-93681737cb51.png">