普段開発をしている中で console.log() や console.error() は比較的頻繁に使用しますが、それ以外はあまり使った経験がありませんでした。
そこで今回は種類や使い方をまとめました。
メソッドと説明
| No. | メソッド | 説明 |
|---|---|---|
| 1 | console.assert() |
第一引数が false の場合、エラーメッセージを出力する。 |
| 2 | console.clear() |
出力されたコンソールをクリアする。 |
| 3 | console.count() |
指定されたラベルでこの行が呼び出された回数をログに出力する。 |
| 4 | console.countReset() |
指定されたラベルのカウント数をリセットする。 |
| 5 | console.debug() |
デバッグログレベルでログを出力する。 |
| 6 | console.dir() |
オブジェクトをJSON型で出力する。 階層構造で表示される。 |
| 7 | console.dirxml() |
ブジェクトをXML形式で出力する。 階層構造で表示される。 |
| 8 | console.error() |
エラーログレベルでログを出力する。 |
| 9 | console.group() |
グループ化してログを出力する。 |
| 10 | console.groupCollapsed() |
グループ化して折り畳んだ状態でログを出力する。 |
| 11 | console.groupEnd() |
現在のグループから抜けることができる。 |
| 12 | console.info() |
情報ログレベルでログを出力する。 |
| 13 | console.log() |
ログを出力する。 |
| 14 | console.profile() |
プロファイリングを開始する。 |
| 15 | console.profileEnd() |
プロファイリングを終了する。 |
| 16 | console.table() |
テーブル形式でログを出力する。 |
| 17 | console.time() |
時間の計測を開始する。 |
| 18 | console.timeStamp() |
時間の計測を終了する。 |
| 19 | console.trace() |
スタックとレースを出力する。 |
| 20 | console.warn() |
警告ログレベルでログを出力する。 |
使い方
1. console.assert()
第一引数が true の場合はコンソールに出力されません。
2. console.clear()
実行すると出力されていたログがすべてクリアされます。
3. console.count()
同じラベルが指定されたメソッドは同じカウンターとしてカウントされます。
4. console.countReset()
console.countReset() を使用すると、
ラベルに指定したカウンターをリセットします。
5. console.debug()
フィルターで Verbose を選択すると表示されます。
デフォルトでは表示されません。
6. console.dir()
console.dir() を使用すると、
オブジェクトなどをJSON形式の階層構造で表示することができます。
7. console.dirxml()
console.dirxml() を使用すると、
オブジェクトなどをXML形式の階層構造で表示することができます。
8. console.error()
エラーログレベルで出力されます。
console.log() と異なるスタイルで表示されるため、
発生した場所や原因を特定しやすいです。
9. console.group()
ログをグループ化して出力することができます。
10. console.groupCollapsed()
console.groupCollapsed() を使用すると、
グループ化したログを折り畳んで出力することができます。
11. console.groupEnd()
console.groupEnd() を使用することで、
console.group() または console.groupCollapsed() が呼び出されてから
出力されたログをグループ化することができます。
12. console.info()
ログをインフォレベルで出力することができます。
13. console.log()
皆さんお馴染み console.log()。
ログをコンソールに出力します。
14. console.profile() / console.profileEnd()
実行はできましたが、
Chromeで確認できるところを見つけられませんでした。
15. console.table()
表形式でコンソールに出力することができます。
16. console.time() / console.timeEnd()
console.time() を呼び出すと時間の計測が開始され、console.timeEnd() が呼び出されると計測が開始してから終了までの経過時間が出力されます。
17. console.timeStamp()
MDNにこちらは非標準であると記載があり、
コンソールに入力はできるものの出力はできませんでした。
18. console.trace()
console.trace() が呼ばれた場所までの経路を表示することができます。
19. console.warn()
警告レベルでログを出力することができます。
終わりに
いつもオブジェクトを出力する際は、
console.log(JSON.stringify(obj)); を使用していたので、
今度からは console.dir(); も使用してみようと思います。
他にも console.table() もどこかのタイミングで使用してみたいです。
色々な種類を知れて勉強になりました。
参考文献