🤠

console.log()だけのデバッグはやめよう

2023/01/19に公開約3,000字

はじめに

フロントエンドのWeb開発においてconsole.log()というのは非常によくお世話になります.

しかしconsoleオブジェクトにはには他にもたくさんのインスタンスメソッドがあり,それらを使わずに開発を行うのは少しもったいないです.

この記事では様々な機能を紹介していき明日から開発で使用していただければ嬉しいです.

assert

console.assert()は第一引数に論理式をとり,第二引数以降には任意のオブジェクトを取ります.

第一引数がfalseとなった場合,第二引数をコンソールに出力します.

サンプル

assert.js
// assert
const wishToSuccess = () => {
  return Math.random() < 0.5
}
console.assert(wishToSuccess(), "失敗しました")

https://github.com/fujiyamaorange/console-debug/blob/main/index.js#L3

出力

output.assert.js

log

一般的にログを出力するconsole.log()以外にも

  • console.info
  • console.warn
  • console.error

の3種類のレベルに分けたログを出力できます.
それぞれ色で判別できます.

サンプル

log.js
// log
console.info('info')
console.warn('warn')
console.error('error')

https://github.com/fujiyamaorange/console-debug/blob/main/index.js#L9

出力

output.log.js

dir

console.dir()は指定したオブジェクトを折りたたみ式の階層的なリストで表示できます.
またプロパティの対話的なリストを表示できます.

サンプル

dir.js
// dir
console.dir(document.location);

https://github.com/fujiyamaorange/console-debug/blob/main/index.js#L14

出力

output.dir.js

table

console.table()はデータを表形式で表示することができます.

サンプル

table.js
// table
const info = {
  'userAgent': navigator['userAgent'],
  'language': navigator['language'],
  'onLine': navigator['onLine'],
}
console.table(info);

https://github.com/fujiyamaorange/console-debug/blob/main/index.js#L17

出力

output.table.js

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');

https://github.com/fujiyamaorange/console-debug/blob/main/index.js#L25

出力

output.time.js

trace

console.trace()はコンソールにスタックトレースを出力します.

サンプル

trace.js
function foo() {
  function bar() {
    console.trace();
  }
  bar();
}

foo();

https://github.com/fujiyamaorange/console-debug/blob/main/index.js#L34

出力

output.trace.js

その他

その他にもグルーピングして表示ができるconsole.group()や呼び出した回数を記録できるconsole.count()などもあります!

ぜひチェックしてみてください!

参考

https://developer.mozilla.org/ja/docs/Web/API/console

https://dev.to/lissy93/fun-with-consolelog-3i59

Discussion

ログインするとコメントできます