42
26

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-10-24

概要

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

42
26
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
42
26

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?