1442
1388

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2015-07-23

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

1442
1388
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1442
1388

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?