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を見れる。こっちは凄く見やすい。
まとめ
ブラウザのデベロッパーツールがかなり便利なので、デバッグの方法も様々だと思います。
直感的に見れる情報をうまく出すことでコストも減るだろうし、開発速度も上がると思います。
複雑な構造になっていけばなっていくほど、デバッグは重要になると思うので、その場にあったデバッグをしていきたいですね。
良いデバッグを。
