◆ dir は表示 1 つで 2 つ目の引数はオプション
◆ Node.js だと depth 指定するとオブジェクトのネストする場合の省略場所を調整できる
◆ デフォルトで [Object] になって見たいところが見れないときに
JavaScript で console に出力するのは基本は console.log です
info, debug, warn, error などもありますが引数は一緒で レベル違いです
レベルで表示を切り替えたり ブラウザだとわかりやすく色がついたりします

log はフォーマット文字列を受け取る

これらは複数引数を渡した場合に全部表示してくれますが ひとつめが文字列でフォーマット用の文字列だった場合にそれが必要とする数だけ 2 つ目以降の引数を埋め込むために使います

console.log("(%o)", {a: 1}, {b: 2})
// ({a: 1}) {b: 2}

console.log("[%s]", { toString() { return "#" } })
// [#]

フォーマット文字列自体を表示するなら console.dir が必要ですが 1つ目が文字列で % を含むことはそうそうないのであまりこれを気にすることはないです
ブラウザで XML 表示の方が困ることが多いと思います

ブラウザでの XML 表示

HTMLElement や DocumentFragment など

console.log(document.body)
// <body class=" ">...</body>

ツリー表示できるのですがプロパティを見たい場合には不便です

このツリー表示の機能は console.dirxml を呼び出した時と同じで プロパティを表示する普段の表示方法は console.dir を呼び出すことで使えます

Node.js 限定の問題

そんななのでブラウザだと基本は console.log で HTML などの表示でプロパティを見たいときだけ console.dir でした

ただ Node.js になると普段から console.dir のほうがいいかもしれません

Node.js の場合は Chrome からリモートデバッグしない限り出力はコンソール上で文字だけです
ブラウザみたいに log で出力されたオブジェクトを開いたり閉じたり GUI 的な操作はできません

オブジェクトは最初から展開された状態になるので 深くなると省略されます
デフォルトは depth: 2 なので

> const a = {a:1}
> const b = {b:2, a}
> const c = {c:3, b}
> const d = {d:4, c}
> console.log(d)
{ d: 4, c: { c: 3, b: { b: 2, a: [Object] } } }

b は見えますが a は見えません

これが結構不便です

console.dir では複数の値を表示できませんが 2 つめの引数にはオプションを渡せます
オプションで depth を指定すると表示する深さを調整できます

> console.dir(d, {depth: 1})
{ d: 4, c: { c: 3, b: [Object] } }
> console.dir(d, {depth: 2})
{ d: 4, c: { c: 3, b: { b: 2, a: [Object] } } }
> console.dir(d, {depth: 3})
{
  d: 4,
  c: { c: 3, b: { b: 2, a: { a: 1 } } }
}

Node.js の場合 console 系の出力は util.inspect を使って文字列化しています
こっちでも同じ depth オプションが使えます

> util.inspect(d)
'{ d: 4, c: { c: 3, b: { b: 2, a: [Object] } } }'
> util.inspect(d, {depth: 3})
'{\n  d: 4,\n  c: { c: 3, b: { b: 2, a: { a: 1 } } }\n}'

console については whatwg に仕様があります
https://console.spec.whatwg.org/

console.dir のオプションは Printer の options 引数に渡されます
これは「implementation-specific formatting」で実装依存です
なので Node.js の場合は depth が使える となります