JavaScriptでオブジェクトをデバッグするときは console.table() が便利

console.table() がめっちゃ便利なの知らなかった！

console.table() - Web API | MDN

console.table()は配列orオブジェクトを引数で受け取り、表形式で出力してくれるConsole APIのようです。

let obj1 = { a: "aaa", b: "bbb", c: "ccc" };
console.table(obj1);
// 出力結果（Node.jsでやってます）
┌─────────┬────────┐
│ (index) │ Values │
├─────────┼────────┤
│ a       │ 'aaa'  │
│ b       │ 'bbb'  │
│ c       │ 'ccc'  │
└─────────┴────────┘

プロパティを持つオブジェクトならなんでもOKのようだ。

class Size {
  constructor(w, h) {
    this.width = w;
    this.height = h;
  }
}
let size = new Size(100, 200);
console.table(size);
// 出力結果
┌─────────┬────────┐
│ (index) │ Values │
├─────────┼────────┤
│ width   │ 100    │
│ height  │ 200    │
└─────────┴────────┘

console.table()が真価を発揮するのは複数のオブジェクトを比較したいとき！

let obj1 = { a: "aaa", b: "bbb", c: "ccc" };
let obj2 = { a: "aaa", b: "bbb", p: "ppp", c: "ccc", d: "ddd" };
let obj3 = { a: "aaa", b: "zzz", d: "ddd" };
console.table({ obj1, obj2, obj3 });
// 出力結果
┌─────────┬───────┬───────┬───────┬───────┬───────┐
│ (index) │ a     │ b     │ c     │ p     │ d     │
├─────────┼───────┼───────┼───────┼───────┼───────┤
│ obj1    │ 'aaa' │ 'bbb' │ 'ccc' │       │       │
│ obj2    │ 'aaa' │ 'bbb' │ 'ccc' │ 'ppp' │ 'ddd' │
│ obj3    │ 'aaa' │ 'zzz' │       │       │ 'ddd' │
└─────────┴───────┴───────┴───────┴───────┴───────┘

めちゃわかりやすいやん！変更加えた前後で同一のオブジェクトを比較したい時とかよくあるので、使えそう。（今まで目視で頑張っていた……）

さらに、第2引数で出力するプロパティを絞ることもできる。

console.table({ obj1, obj2, obj3 }, ["a", "b"]);
// 出力結果
┌─────────┬───────┬───────┐
│ (index) │ a     │ b     │
├─────────┼───────┼───────┤
│ obj1    │ 'aaa' │ 'bbb' │
│ obj2    │ 'aaa' │ 'bbb' │
│ obj3    │ 'aaa' │ 'zzz' │
└─────────┴───────┴───────┘

console.log()だけでゴリ押しからそろそろ脱却したいですな〜