Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

概要

フロントエンド開発をする際のデバッグによく使う 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

mooriii
React/Rails/Swift/Kotlin/Python
https://mooriii.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away