Edited at

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


概要

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

参考:公式ドキュメント


メソッド一覧

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


console.log()

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

スクリーンショット 2018-10-24 15.35.09.png


console.debug()

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

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

スクリーンショット 2018-10-24 16.07.45.png



スクリーンショット 2018-10-24 16.08.20.png


console.warn()

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

スクリーンショット 2018-10-24 15.57.53.png


console.error()

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

スクリーンショット 2018-10-24 15.59.15.png


console.assert()

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

スクリーンショット 2018-10-24 15.41.40.png

スクリーンショット 2018-10-24 15.45.24.png


console.clear()

consoleをクリアします

console.mov.gif


console.count()

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

スクリーンショット 2018-10-24 16.13.12.png


console.table()

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

スクリーンショット 2018-10-24 16.18.55.png

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

スクリーンショット 2018-10-24 16.19.45.png


console.group()

ログをグルーピングできます

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

スクリーンショット 2018-10-24 16.31.49.png

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

スクリーンショット 2018-10-24 16.32.53.png


console.groupCollapsed()

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

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

スクリーンショット 2018-10-24 16.36.40.png


console.time()

実行時間の計測をします

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

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

スクリーンショット 2018-10-24 16.42.53.png


console.trace()

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

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

スクリーンショット 2018-10-24 16.59.31.png


おまけ

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


Errorレベル

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

スクリーンショット 2018-10-24 17.01.10.png


Warningレベル

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

スクリーンショット 2018-10-24 17.01.16.png


Infoレベル

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

スクリーンショット 2018-10-24 17.01.23.png


Verboseレベル

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

スクリーンショット 2018-10-24 17.01.30.png