【フロント開発効率化】ConsoleAPIメソッドまとめ

【フロント開発効率化】ConsoleAPIメソッドまとめ:

概要

フロントエンド開発をする際のデバッグによく使う consoleAPIのメソッドまとめ

参考：公式ドキュメント

メソッド一覧

独断と偏見で抜粋しています

console.log()

標準のログ出力を行います

console.debug()

Verboseレベルでログを出力します

青枠をクリックするとVerboseレベルのログのみ表示されます

↓

console.warn()

Warningレベルでログを出力します

console.error()

Errorレベルでログを出力します

console.assert()

第1引数の条件がfalseであればエラーレベルでログを出力します

console.clear()

consoleをクリアします

console.count()

呼び出された回数をカウントします（渡す引数が変われば別のものとしてカウント）

console.table()

オブジェクトを表にして出力します

指定したキーのみの表示も可能です

console.group()

ログをグルーピングできます
console.groupEnd()でグルーピングを終了します

グルーピングはネストも可能です

console.groupCollapsed()

console.group()の折りたたみ版

デフォルトで折りたたまれて表示されます

console.time()

実行時間の計測をします

もっと詳細に計測してくれるconsole.profile()もありますが省略します

サイドバーでinfoレベルのログを表示しているのでconsole.debug()の結果は表示されません

console.trace()

スタックトレースを表示します

どういうフローでそこに至ったかを確認できます

おまけ

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

Errorレベル

console.error()などを表示します

Warningレベル

console.warn()などを表示します

Infoレベル

console.log()などを表示します

Verboseレベル

console.debug()などを表示します