JavaScript

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

More than 3 years have passed since last update.


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ライフを応援します。