lighthouse.log

lighthouse.log

JavaScriptのLogについて

2018-07-22

はじめに

JS 開発時に console.log()など、よくログを出力すると思いますが

調べたら意外と知らない機能がたくさんあったので、まとめてみました。

console object の種類

  • Log level

    • console.log()
    • console.info()
    • console.warn()
    • console.error()

  • Assert

    • console.assert()

  • Object print

    • console.table()
    • console.dir()

  • Measuring time

    • console.time()
    • console.timeEnd()

  • Counting

    • console.count()
    • console.countReset()

  • Trace

    • console.trace()

  • Grouping

    • console.group()
    • console.groupEnd()

などなど

Log level

log(), info(), warn(), error()

  • 基本的に log, info は開発時に使う

    • 本番環境には出さないようにする
    • 性能にも影響がある (そこまでではないかもですが)
    • 必要ない情報をだすことで、セキュリティの問題が発生しないようにする
    • ビルド時に log, info は除外してビルドしてくれる設定もある
  • warn, error は状況に応じて使いわける
  • 参照を出力しているため、オブジェクト、配列のような中身に変更がある場合は、リアルタイムでログの内容もアップデートされる
console.log('log'); // 開発時に使う
console.info('info'); // 開発時＆必要な情報を残すときに使う
console.warn('warn'); // 言葉通り警告
console.error('error'); // システムエラー、予期せぬエラーなど

Assert

assert()

  • 特定の条件が false の場合のみ出力される
  • Break Point がかかるため、出力時にデバッグで止まる
console.assert(true === true, 'same');
console.assert(true === false, 'not same');// Assertion failed: not same

Object print

table()

  • console.log を使っても問題ないが、console.table()を使うと、より見やすく出力してくれる
const sampleObj = {
  name: 'lighthouse-dev',
  job: 'web engineer'
};
console.table(sampleObj);
// ┌─────────┬──────────────────┐
// │ (index) │      Values      │
// ├─────────┼──────────────────┤
// │  name   │ 'lighthouse-dev' │
// │   job   │  'web engineer'  │
// └─────────┴──────────────────┘

dir()

  • オブジェクトのネストを制御して出力したい場合、使うと便利
const sampleObj = {
  nest1: {
    nest1_1: 'a',
    nest1_2: 'b'
  },
  nest2: {
    nest2_1: 'a',
    nest2_2: 'b'
  }
};

console.dir(sampleObj);// {
//   nest1: { nest1_1: 'a', nest1_2: 'b' },
//   nest2: { nest2_1: 'a', nest2_2: 'b' }
// }
console.dir(sampleObj, { depth: 0 });// { nest1: [Object], nest2: [Object] }

Measuring time

time(), timeEnd()

  • console.time() 実行 〜 console.timeEnd() 実行までかかった時間を出力してくれる
  • 例えば、関数の実行時にどのぐらい時間がかかるか測りたい場合に使える
console.time('loop');for (let index = 0; index < 100; index++) {
  index++;
}
console.timeEnd('loop');// loop: 0.226ms

Counting

count(), countReset()

  • 特定の関数が何回呼ばれたか出力できる
  • 途中で count をリセットしたい場合は、countRest()を使う
const sampleFunction = () => {
  console.count('sampleFunction');};
sampleFunction();
sampleFunction();

console.countReset('sampleFunction');
sampleFunction();
sampleFunction();
sampleFunction();
sampleFunction();

// sampleFunction: 1
// sampleFunction: 2
// sampleFunction: 1
// sampleFunction: 2
// sampleFunction: 3
// sampleFunction: 4

Trace

trace()

  • スタックトレースを出力できる
  • 普通にデバックしても該当の関数がどこから呼ばれたか確認できるが、console.trace()を使うとより便利
const f1 = () => {
  f2();
};

const f2 = () => {
  f3();
};

const f3 = () => {
  console.trace();};

f1();

// Trace
// at f3 (~/console-test.js:8:11)
// at f2 (~/console-test.js:5:3)
// at f1 (~/console-test.js:2:3)
// at Object.<anonymous> (~/console-test.js:11:1)

Grouping

group(), groupEnd()

  • 新たなインライングループを作成する
  • console.groupEnd()を呼び出すまで、以降のすべての出力レベルを１段階インデントする
console.log('Level1 start');
console.group();
console.log('Level2 start');
console.group();
console.log('Level3 start');
console.log('Level3 end');
console.groupEnd();
console.log('Level2 end');
console.groupEnd();
console.log('Level1 end');

// Level1 start
//   Level2 start
//     Level3 start
//     Level3 end
//   Level2 end
// Level1 end

まとめ

  • console.log(log level)以外にも知っておくと便利なものがたくさんあります。
  • 状況に応じて使い分け活用すると、より便利に開発できるかと思います！

参考