Help us understand the problem. What is going on with this article?

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

kashira2339
株式会社サイバー・バズでScalaとTypeScriptをよく使うエンジニアです。
cyberbuzz
SNSマーケティングサービスや、”買いたい”に出会えるメディア「to buy」などの開発・運用をしています。
https://www.cyberbuzz.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした