🤠
console.log()だけのデバッグはやめよう
はじめに
フロントエンドのWeb開発においてconsole.log()というのは非常によくお世話になります．
しかしconsoleオブジェクトにはには他にもたくさんのインスタンスメソッドがあり，それらを使わずに開発を行うのは少しもったいないです．
この記事では様々な機能を紹介していき明日から開発で使用していただければ嬉しいです．
assert
console.assert()は第一引数に論理式をとり，第二引数以降には任意のオブジェクトを取ります．
第一引数がfalseとなった場合，第二引数をコンソールに出力します．
サンプル
assert.js
// assert
const wishToSuccess = () => {
return Math.random() < 0.5
}
console.assert(wishToSuccess(), "失敗しました")
出力
log
一般的にログを出力するconsole.log()以外にも
- console.info
- console.warn
- console.error
の3種類のレベルに分けたログを出力できます．
それぞれ色で判別できます．
サンプル
log.js
// log
console.info('info')
console.warn('warn')
console.error('error')
出力
dir
console.dir()は指定したオブジェクトを折りたたみ式の階層的なリストで表示できます．
またプロパティの対話的なリストを表示できます．
サンプル
dir.js
// dir
console.dir(document.location);
出力
table
console.table()はデータを表形式で表示することができます．
サンプル
table.js
// table
const info = {
'userAgent': navigator['userAgent'],
'language': navigator['language'],
'onLine': navigator['onLine'],
}
console.table(info);
出力
time
console.timeは重い処理にどれくらい時間がかかるかを計測できるタイマーを起動します．
引数の文字列がキーとなり，同じキーでconsole.timeEnd()が呼ばれるまでの時間を計測します．
同時に10,000個までタイマーを起動できます．
サンプル
time.js
// time
console.time('counter');
let count = 0;
for (i = 0; i < 10000; i++) {
count += 1
}
console.log(count);
console.timeEnd('counter');
出力
trace
console.trace()はコンソールにスタックトレースを出力します．
サンプル
trace.js
function foo() {
function bar() {
console.trace();
}
bar();
}
foo();
出力
その他
その他にもグルーピングして表示ができるconsole.group()や呼び出した回数を記録できるconsole.count()などもあります！
ぜひチェックしてみてください！
参考
Discussion