[解決済み] console.dirとconsole.logの違いは何ですか？

質問

Chromeでは console オブジェクトは、同じことを行うように見える2つのメソッドを定義しています。

console.log(...)
console.dir(...)

ネットのどこかで読んだのですが dir はログを記録する前にオブジェクトのコピーを取ります。 log はコンソールに参照を渡すだけなので、ログに記録したオブジェクトを検査しようとしたときには、変更されている可能性があるということです。 しかし、いくつかの予備的なテストによると、違いはなく、どちらもログに記録されたときとは異なる状態のオブジェクトを表示する可能性があることに悩んでいるようです。

Chromeのコンソールで試してみてください( Ctrl + シフト + J )をご覧ください。

> o = { foo: 1 }
> console.log(o)
> o.foo = 2

ここで [Object] の下にある log ステートメントに注目してください。 foo を使って実験を繰り返しても同じことが言えます。 dir の代わりに log .

私の疑問は、この一見同じように見える2つの関数が、なぜ console ?

解決方法は？

Firefoxでは、これらの関数は全く異なる動作をします。 log をプリントアウトするだけです。 toString の表現であるのに対し dir はナビゲート可能なツリーを出力する。

Chromeの場合。 log はすでにツリーを出力しています --。 ほとんどの場合 . しかし、Chromeの log は、たとえプロパティを持つオブジェクトであっても、特定のクラスのオブジェクトを文字列化します。おそらく、違いの最も明確な例は、正規表現です。

> console.log(/foo/);
/foo/

> console.dir(/foo/);
* /foo/
    global: false
    ignoreCase: false
    lastIndex: 0
    ...

また、配列でも明らかな違いが見られます（例． console.dir([1,2,3]) である)。 log は、通常のオブジェクトとは異なる方法で生成されます。

> console.log([1,2,3])
[1, 2, 3]

> console.dir([1,2,3])
* Array[3]
    0: 1
    1: 2
    2: 3
    length: 3
    * __proto__: Array[0]
        concat: function concat() { [native code] }
        constructor: function Array() { [native code] }
        entries: function entries() { [native code] }
        ...

DOMオブジェクトもまた、異なる挙動を示します。 別の回答で指摘されているように .