【consoleオブジェクト完全版】ログ出力を極める！

# consoleオブジェクト

フロントの開発をしてる時、いつもお世話になる`console.log()`
先日、[console.logでフォーマット指定子を使う！](https://qiita.com/sa9ra4ma/items/e6d5079fa41a7bfe19bf)という記事を書きましたが、今回は`console.log()`以外の`console.XXX()`について、紹介したいと思います。


# 一覧

|関数名       |用途      |○：おすすめ<br>△：非推奨、<br>　非標準     |
|:-------------|:------------------|:------------------:|
|assert        |引数の妥当性チェック |     |
|clear         |コンソールをクリア   |     |
|count         |回数をカウント       |    |
|debug         |デバッグログ出力     |○    |
|dir           |オブジェクト出力     |     |
|dirxml        |オブジェクト出力<br>※XML形式   |     |
|error         |エラーログ出力       |     |
|exception     |errorの別名         |△   |
|group         |ログをグループ化     |     |
|groupCollapsed|ログをグループ化<br>※折りたたんだ状態で出力   |○    |
|groupEnd      |グループ化終了       |     |
|info          |出力ログに！マーク付与   |     |
|log           |通常のログ出力       |○    |
|profile       |プロファイル開始     |△   |
|profileEnd    |プロファイル停止     |△   |
|table         |表形式でログ出力     |○    |
|time          |処理時間計測         |     |
|timeEnd       |処理時間計測         |     |
|timeLog       |処理時間計測         |     |
|timeStamp     |タイムラインにマーカー追加   |△   |
|trace         |スタックトレース出力  |○    |
|warn          |警告ログ出力         |     |
(2020/05時点)
※MDN日本語版と英語版で情報に差異があるのですが、更新日が新しい英語版を基にしています。


# 動作確認

それでは、それぞれ動作を見ていきます。
ブラウザはChromeです。
一部Chromeでは対応しておらず、他のブラウザを使用している箇所は都度明記しています。


### console.assert()

第1引数を評価してfalseの場合、第2引数のメッセージを出力します。
trueの場合は、何も出力されません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638864/566ad298-a091-0a16-32da-85b7e2a91575.png)


### console.clear()

コンソールを初期化します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638864/f4abf146-a17e-ec75-fc80-33c4db14694d.png)


### console.count(), console.countReset()

第1引数の値をラベルとして、呼ばれた回数をカウントし出力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638864/6d50967b-b358-3aab-49dd-61a86c82113a.png)


### console.dir(), console.dirxml()

`console.dir()`はDOMをJSON形式で、
`console.dirxml()`はXML形式で、出力してくれます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638864/9fbf6932-fb73-330d-6271-bd500dcc5814.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638864/24705c91-5fe3-f5ee-8a4e-04307a269dd3.png)


### console.log(), console.info(), console.warn(), console.error(), console.debug()

標準的なログを出力します。
関数によって、それぞれログレベルが違います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638864/56639aaa-b341-2ada-2c49-c46391c06a8d.png)

Chromeでは、`console.log()`と`console.info()`が同じでしたので、Safariでも確認しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638864/c066653b-a211-7fd7-edcc-0b0383dc5172.png)


また、一部で「`console.debug()`はChromeで表示されない」との記事を見かけますが、おそらくログの出力レベルがDefaultになっているのだと思います。
`console.debug()`はレベルVerboseですが、DefaultではVerboseにチェックがついていないので注意が必要です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638864/f125df60-c2f7-9e08-db94-7b851d0dc262.png)

ログを`console.debug()`で出力して、フィルタをVerboseレベルでかければ、必要なログだけ抽出して確認できるので、おすすめです。

また、フォーマット指定子（置換文字列）を使用して、出力フォーマットを整形することもできます。
こちらの記事で紹介していますので、参考にしてみてください。
[console.logでフォーマット指定子を使う！](https://qiita.com/sa9ra4ma/items/e6d5079fa41a7bfe19bf)


### console.exception()

一応[MDN](https://developer.mozilla.org/ja/docs/Web/API/console)の一覧ページには載ってますが、個別のページは削除されているようです。
`console.error()`を使いましょう。


### console.group(), console.groupCollapsed(), console.groupEnd()

ログをグループ化して出力します。
`console.groupCollapsed()`だと初期表示の時に、折りたたまれた状態で出力されます。
（個人的にはgroupCollapsedのほうが好きです）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638864/9b561993-38eb-28c0-f3ac-ee1414610359.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638864/b1e28f8f-9edd-ca0a-944c-cd6447f5b4fb.png)


### console.profile(), console.profileEnd()

プロファイルを記録して、各関数の処理性能の計測などができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638864/09d521c9-580b-9992-2771-a5a79983c792.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638864/a179f6de-65ac-e374-966a-369288eda381.png)


### console.table()

配列やオブジェクトを表形式で出力できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638864/29663e24-fd6a-a027-2023-d2bd10b6623d.png)

見出しをクリックしたら、ソートすることもできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638864/881ad5a2-bc05-b1d6-eb92-7782d1df1492.png)

第2引数に値を設定すると、出力するプロパティを絞ることもできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638864/02aa2cd4-1917-b469-b85c-69278e21a7f9.png)


### console.time(), console.timeEnd(), console.timeLog()

処理時間を計測できます。
`console.time()`で計測を開始し、
`console.timeLog()`で途中経過を出力し、
`console.timeEnd()`で計測時間を出力し、計測を止めます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638864/346ea209-e54d-f803-320c-72bda693639c.png)


### console.timeStamp()

開発者ツールでPerformanceを計測している間だけ有効になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638864/e8f88a69-e6aa-f0e8-0e51-506fdad5f4a7.png)

何のために使うのかよくわかっていないです。

めちゃくちゃ小さく表示されるので、ずっと見つからず何も起こらない…と思って、何度もやり直しました。
この画面ショット撮るために2日かかりました…すみません、愚痴です。

そもそも古い記事だと開発者ツールのTimelineパネルにTimeStampが表示されるのですが、今はPerformanceパネルに集約されているようです。
下記の記事に出会わなければ、見つけられなかったです。
[進化を続けるChrome DevToolsの最新情報 2017](https://html5experts.jp/ryoyakawai/23548/)

### console.trace()

スタックトレースを出力し、処理の流れを確認できます。
「この処理どこから呼ばれているんだろう…」というときに使えます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638864/b606bef8-23d3-fda2-ff64-3352c6f09487.png)


# まとめ

これだけの`console.XXX()`を使いこなせれば、見づらいデバッグログ地獄からも脱却できますね！

と言いつつ、結局`console.log()`を打った方が楽だと思ってしまう自分もいますが…



# 参考
[MDN日本語版](https://developer.mozilla.org/ja/docs/Web/API/console)
[MDN英語版](https://developer.mozilla.org/en-US/docs/Web/API/Console)