[JavaScript]使い分けるだけで今すぐデバッグ効率を上げる、consoleオブジェクトの関数

  • 1292
    いいね
  • 2
    コメント
この記事は最終更新日から1年以上が経過しています。

consoleオブジェクト

https://developer.mozilla.org/ja/docs/Web/API/console

コンソールに文字列を出力するときに、

console.log('hoge');

なんかはよく使うはず。

だが、ちょっとした関数の使い分けでデバッグ一つもしやすくなる。

なのでほんの少し紹介。

※以下は全てGoogle Chromeでの実行結果です

console.error

赤い!よくあるエラーメッセージ
エラーとみなす箇所に是非

console.error('hoge');

スクリーンショット 2015-07-23 6.21.50.png

console.info

(i)マークで情報に注目させよう

console.info('hoge');

スクリーンショット 2015-07-23 6.22.08.png

console.warn

注意!するべき箇所に

console.warn('hoge');

スクリーンショット 2015-07-23 6.22.35.png

console.count

該当箇所が呼び出された回数のカウントアップに良い!
ES6で力を発揮するかな?

console.count('hoge');

スクリーンショット 2015-07-23 23.31.32.png

console.trace

メソッドのスタックトレースが追える。
よってメソッドの呼び出し元も分かる。

console.trace(new Hoge());

スクリーンショット 2015-07-23 23.39.26.png

console.time console.timeEnd

console.time('hoge');

から

console.timeEnd('hoge');

までの実行時間を計測できる!
'hoge'の部分はtime()timeEnd()で共通のものを持つ。

スクリーンショット 2015-07-23 23.43.44.png

console.table

オブジェクトとかの中身をテーブル形式で見られたりする。
これだけすごいリッチ。

console.table(hoge);

スクリーンショット 2015-07-23 23.50.49.png

console.dir

オブジェクトの構造を見るときに便利!

console.dir(document.getElementsByTagName('div'));

スクリーンショット 2015-07-23 23.55.49.png

console.dirxml

こちらはDOMエレメントのツリー構造とかが見やすい!

console.dirxml(document.getElementsByTagName('a'));

スクリーンショット 2015-07-23 23.55.37.png

console.debug (※この関数は非推奨です。log()を使ってください。)

console.debug('hoge');

スクリーンショット 2015-07-23 6.19.46.png

まとめ

他にもいくつかあるけれど、特に有用そうでかつ使い易いものを挙げてみました。
皆さんのJavaScriptライフを応援します。