JavaScript
デバッグ
フロントエンド

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を使いこなしましょう!