consoleオブジェクト
フロントの開発をしてる時、いつもお世話になるconsole.log()
先日、console.logでフォーマット指定子を使う！という記事を書きましたが、今回はconsole.log()以外のconsole.XXX()について、紹介したいと思います。
一覧
| 関数名 | 用途 | ○：おすすめ △：非推奨、 非標準 |
|---|---|---|
| assert | 引数の妥当性チェック | |
| clear | コンソールをクリア | |
| count | 回数をカウント | |
| debug | デバッグログ出力 | ○ |
| dir | オブジェクト出力 | |
| dirxml | オブジェクト出力 ※XML形式 |
|
| error | エラーログ出力 | |
| exception | errorの別名 | △ |
| group | ログをグループ化 | |
| groupCollapsed | ログをグループ化 ※折りたたんだ状態で出力 |
○ |
| groupEnd | グループ化終了 | |
| info | 出力ログに！マーク付与 | |
| log | 通常のログ出力 | ○ |
| profile | プロファイル開始 | △ |
| profileEnd | プロファイル停止 | △ |
| table | 表形式でログ出力 | ○ |
| time | 処理時間計測 | |
| timeEnd | 処理時間計測 | |
| timeLog | 処理時間計測 | |
| timeStamp | タイムラインにマーカー追加 | △ |
| trace | スタックトレース出力 | ○ |
| warn | 警告ログ出力 | |
| (2020/05時点) | ||
| ※MDN日本語版と英語版で情報に差異があるのですが、更新日が新しい英語版を基にしています。 |
動作確認
それでは、それぞれ動作を見ていきます。
ブラウザはChromeです。
一部Chromeでは対応しておらず、他のブラウザを使用している箇所は都度明記しています。
console.assert()
第1引数を評価してfalseの場合、第2引数のメッセージを出力します。
trueの場合は、何も出力されません。
console.clear()
コンソールを初期化します。
console.count(), console.countReset()
第1引数の値をラベルとして、呼ばれた回数をカウントし出力します。
console.dir(), console.dirxml()
console.dir()はDOMをJSON形式で、
console.dirxml()はXML形式で、出力してくれます。
console.log(), console.info(), console.warn(), console.error(), console.debug()
標準的なログを出力します。
関数によって、それぞれログレベルが違います。
Chromeでは、console.log()とconsole.info()が同じでしたので、Safariでも確認しました。
また、一部で「console.debug()はChromeで表示されない」との記事を見かけますが、おそらくログの出力レベルがDefaultになっているのだと思います。
console.debug()はレベルVerboseですが、DefaultではVerboseにチェックがついていないので注意が必要です。
ログをconsole.debug()で出力して、フィルタをVerboseレベルでかければ、必要なログだけ抽出して確認できるので、おすすめです。
また、フォーマット指定子（置換文字列）を使用して、出力フォーマットを整形することもできます。
こちらの記事で紹介していますので、参考にしてみてください。
console.logでフォーマット指定子を使う！
console.exception()
一応MDNの一覧ページには載ってますが、個別のページは削除されているようです。
console.error()を使いましょう。
console.group(), console.groupCollapsed(), console.groupEnd()
ログをグループ化して出力します。
console.groupCollapsed()だと初期表示の時に、折りたたまれた状態で出力されます。
（個人的にはgroupCollapsedのほうが好きです）
console.profile(), console.profileEnd()
プロファイルを記録して、各関数の処理性能の計測などができます。
console.table()
配列やオブジェクトを表形式で出力できます。
見出しをクリックしたら、ソートすることもできます。
第2引数に値を設定すると、出力するプロパティを絞ることもできます。
console.time(), console.timeEnd(), console.timeLog()
処理時間を計測できます。
console.time()で計測を開始し、
console.timeLog()で途中経過を出力し、
console.timeEnd()で計測時間を出力し、計測を止めます。
console.timeStamp()
開発者ツールでPerformanceを計測している間だけ有効になります。
何のために使うのかよくわかっていないです。
めちゃくちゃ小さく表示されるので、ずっと見つからず何も起こらない…と思って、何度もやり直しました。
この画面ショット撮るために2日かかりました…すみません、愚痴です。
そもそも古い記事だと開発者ツールのTimelineパネルにTimeStampが表示されるのですが、今はPerformanceパネルに集約されているようです。
下記の記事に出会わなければ、見つけられなかったです。
進化を続けるChrome DevToolsの最新情報 2017
console.trace()
スタックトレースを出力し、処理の流れを確認できます。
「この処理どこから呼ばれているんだろう…」というときに使えます。
まとめ
これだけのconsole.XXX()を使いこなせれば、見づらいデバッグログ地獄からも脱却できますね！
と言いつつ、結局console.log()を打った方が楽だと思ってしまう自分もいますが…