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

console.log("このログ、埋もれてない?")

前書き

フロント開発する際、さまざまなデバッグ方法がありますが
その一つとして

console.log("here")

を使う方法があります

しかしフロントエンド開発などにおいては、コンソール表示される情報が多すぎて
ほんとに欲しい情報が埋もれるなんてことも少なくないです

今日はそんなconsole.log()とChrome Developer Toolの使い方について見ていきます

Console

開発で使うブラウザはChromeの方が多いと思われますが
ChromeにはChrome Developer Toolと呼ばれるものがあります
Macならcmd+opt+iで出てくるあれです

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

そんなCDTの機能の一つにConsoleがあり
javascriptを実際に実行できたり
ログ表示などにつかいます

console.log()

CDTのコンソールにはConsole APIというログ出力のためのメソッドが用意されており、その中の一つにconsole.log()があります

const name = 'Takuto Mori'
console.log(name)

を実行すると
スクリーンショット 2018-10-10 21.41.19.png

のように表示されます

console.log()は迷子になる

console.log()はデバッグ時などで良く使うのですが、しばしば迷子になります(よね?)
フロントエンド開発ではミドルウェアなどを使ってConsoleにデータを表示したりすることも多かったり、さらにはwarningやerrorの量産など
本来のデバッグ目的のconsole.log()が見つからないなんてことありませんか?
ログの内容を長くしたり、ログを複数行表示したりして目立つようにしてる人もいるはず(筆者も然り)
スクリーンショット 2018-10-10 22.06.27.png

そんなログの迷子を解決する手法を紹介します

log

レベル

consoleにはログのレベルが4つあります
- Verbose
- Info
- Warning
- Error

メソッド

またconsoleには実は5つメソッドがあります
- debug()
- log()
- info()
- warn()
- error()

レベルとメソッドの対応

メソッドはそれぞれ4つのいづれかのレベルでの出力をします
その対応は以下のようになります

メソッド ログレベル
debug() Verbose
log() Info
info() Info
warn() Warning
error() Error

埋もれないlogを書く方法

普段埋もれてしまってるlogもCDTの使い方1つで救い出せます

CDTのConsoleではlogレベルによって表示をフィルタリングすることができます

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

このフィルタリングを使うと普段埋もれてしまってるlogを救出できます

console.debug()を使おう

デバッグでログ出力をしても、ログが埋もれてしまう・・・
そんな埋もれを解消するために
ログ表示にはconsole.debug()を使いましょう

なぜdebug()?

なぜconsole.log()ではなくconsole.debug()であるのか
それはconsole.debug()のログレベルがVerboseであるからです

console.debug()を使って
ConsoleのフィルタリングでVerboseのみを表示させればいいのです

スクリーンショット 2018-10-10 22.08.20.png
スクリーンショット 2018-10-10 22.08.58.png

ついに、迷子のconsole.log()を救いだすことができました

まとめ

  • ConsoleAPIには複数のメソッドがある
  • それぞれのメソッドにはログレベルがある
  • ログレベルによるフィルタリングが可能
  • console.debug()で迷子救い出せる

あとがき

今回はReactのmiddlewareであるloggerを使用していたのでdebug()を使いましたが
普段はフィルタリングするだけで、だいぶ改善すると思います
ぜひChrome Developer Toolを使いこなしましょう!

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