読者です 読者をやめる 読者になる 読者になる

javascript の console デバッグのあれこれ

javaacriptのデバッグといえば他でもなくconsoleになるかと思います。

そんなconsoleの便利なデバッグ方法などをまとめていきたいと思います。

今後の開発に役立てればいいなと思っている程度なので、ゆるりと御覧ください。


スポンサーリンク





分かりやすいように画像とかも付けたいと思います。 まだ未実装 2016 01 28現在

console.log

もう鉄板と言えるほどのものです。

説明不要ということで。

console.info

console.logに似ているのですが、右側に(i)のマークが表示されます。

通常のデバッグではなく、とりあえず情報を出しておきたい時や、logと差別化したい時とかに利用します。

console.error

エラー時に使ったりします。

通常のjsエラーにようにconsoleには赤く表示されます。

console.warn

警告時に使います。 あまり使いません

通常のjsのワーニングのようにconsoleには黄色く表示されます。

console.table

配列やオブジェクトの中身を見るならtableを使ったほうが見やすいです。

logでも良いのですが、tableだとobjectの中身をテーブルに表示してくれるので、確認の操作コストも減ると思います。

console.time & console.timeEnd

実行時間とかを計測する時に使います。

console.timeからconsole.timeEndまでの時間を表示してくれます。

console.time("hoge");

~~

console.timeEnd("hoge");

console.trace

メソッドの呼び出し元が分かる。

console.trace(new Hoge());

console.dir

オブジェクトのDOM表示をしてくれる。

dirxmlでhtmlを見れる。こっちは凄く見やすい。

まとめ

ブラウザのデベロッパーツールがかなり便利なので、デバッグの方法も様々だと思います。

直感的に見れる情報をうまく出すことでコストも減るだろうし、開発速度も上がると思います。

複雑な構造になっていけばなっていくほど、デバッグは重要になると思うので、その場にあったデバッグをしていきたいですね。

良いデバッグを。