Edited at

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