console.dir和console.log有什么区别？

Question

在Chrome中，console对象定义了两个似乎做同样事情的方法：

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

我在某处在线阅读，dir在记录该对象之前先获取了该对象的副本，而log只是将引用传递给控制台，这意味着到您检查记录的对象时，它可能已更改。但是，一些初步测试表明，两者没有什么区别，而且它们都可能以与记录时不同的状态显示对象。

在Chrome控制台（Ctrl+ Shift+ J）中尝试此操作，以了解我的意思：

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

现在，展开[Object]下面的log语句，注意它显示foo的值为2。如果使用dir代替重复实验，则同样如此log。

我的问题是，为什么这两个看似相同的功能存在console？

Answer 1

在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] }
        ...