前書き

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

console.log("here")

を使う方法があります

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

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

Console

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

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

console.log()

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

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

を実行すると

のように表示されます

console.log()は迷子になる

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

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

log

レベル

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

メソッド

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

レベルとメソッドの対応

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

埋もれないlogを書く方法

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

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

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

console.debug()を使おう

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

なぜdebug()?

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

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

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

まとめ

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

あとがき

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