console.dir | console.dirxml | console.table

console.dir

console.dir()は、オブジェクトのプロパティやメソッドを階層的に表示するためのメソッドです。通常、console.log()を使うと、オブジェクトは単純にその内容が表示されますが、console.dir()では、オブジェクトの内部構造がツリー形式で詳細に表示されます。

これは特に複雑なオブジェクトやネストされたオブジェクトを調べる際に非常に有用です。console.log()では表示されないような、オブジェクト内部のメソッドやプロトタイプチェーンなども確認することができます。

以下に例を示します。

const person = {
  name: 'John Doe',
  age: 30,
  address: {
    street: '123 Main St',
    city: 'Anytown'
  },
  greet: function() {
    console.log('Hello!');
  }
};

console.dir(person);
  

このコードを実行すると、personオブジェクトのプロパティ（name, age, addressなど）が階層的に表示されます。

console.dirxml

console.dirxml()は、HTMLやXML文書のDOM（Document Object Model）を、ツリー構造として視覚的に表示するためのメソッドです。通常、console.log()ではDOMの要素がそのまま文字列として表示されますが、console.dirxml()を使用すると、DOMツリーがより理解しやすく、ツリー形式で表示されます。

主に、HTMLやXML文書の要素を調査する際に役立ちます。

以下のようなHTML要素を例にとります。

const element = document.getElementById('example');
console.dirxml(element);
  

上記のコードを実行すると、element（例えば、<div id="example"></div>）がツリー形式で表示されます。このメソッドは、特にDOMの内部構造を調べる際に便利です。

console.table

console.table()は、データを表形式で表示するためのメソッドです。通常、console.log()では配列やオブジェクトがそのまま表示されますが、console.table()では、データを表形式で整然と表示することができます。これは、特に大きなデータセットや配列を視覚的に確認したい場合に役立ちます。

このメソッドを使うことで、データの各行や列が明確に視覚化され、デバッグ作業を効率化することができます。

以下に配列の例を示します。

const data = [
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 },
  { id: 3, name: 'Charlie', age: 35 }
];

console.table(data);
  

上記のコードを実行すると、次のような表が表示されます：

┌─────┬───────┬─────┐
│ (index) │ name  │ age │
├─────┼───────┼─────┤
│    0    │ 'Alice' │  25 │
│    1    │  'Bob' │  30 │
│    2    │ 'Charlie' │  35 │
└─────┴───────┴─────┘
  

これにより、各行が整然と並び、データの各属性が視覚的に確認できます。また、console.table()では、列を指定することも可能です。たとえば、特定の列のみを表示するには次のように記述できます。

console.table(data, ['name', 'age']);
  

このコードを実行すると、次のように表示されます：

┌─────┬───────┬─────┐
│ (index) │ name  │ age │
├─────┼───────┼─────┤
│    0    │ 'Alice' │  25 │
│    1    │  'Bob' │  30 │
│    2    │ 'Charlie' │  35 │
└─────┴───────┴─────┘
  

このように、console.table()を使うことで、データを表形式で簡単に表示し、視覚的に確認できるようになります。