(一)Trend (二)Question (三)Official Event (四)Official Column (五)Career (六)Organization 1441 Go to list of users who liked 1390 More than 5 years have passed since last update. @kashira2339(Taka Sasaki)in

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

●JavaScript Last updated at 2015-08-12Posted at 2015-07-23

consoleオブジェクト

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

console.log('hoge');

なんかはよく使うはず。だが、ちょっとした関数の使い分けでデバッグ一つもしやすくなる。なのでほんの少し紹介。 ※以下は全てGoogle Chromeでの実行結果です

console.error

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

console.error('hoge');

console.info

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

console.info('hoge');

console.warn

注意！するべき箇所に

console.warn('hoge');

console.count

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

console.count('hoge');

console.trace

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

console.trace(new Hoge());

console.time console.timeEnd

console.time('hoge');

から

console.timeEnd('hoge');

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

console.table

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

console.table(hoge);

console.dir

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

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

console.dirxml

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

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

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

console.debug('hoge');

まとめ

他にもいくつかあるけれど、特に有用そうでかつ使い易いものを挙げてみました。皆さんのJavaScriptライフを応援します。 1441 Go to list of users who liked 1390 3 Go to list of comments Register as a new user and use Qiita more conveniently (一)You get articles that match your needs (二)You can efficiently read back useful information (三)You can use dark theme What you can do with signing up Sign up Login 1441 Go to list of users who liked 1390 How developers code is here. © 2011-2024Qiita Inc. Guide & Help About Terms Privacy Guideline Design Guideline Feedback Help Advertisement Contents Release Note Official Event Official Column Advent Calendar Qiita Award API Career SNS

@Qiita

@qiita_milestone

@qiitapoi

@Qiita Our service Qiita Team Qiita Zine Official Shop Company About Us Careers Qiita Blog