javascript - 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

现在，展开 log 语句下方的 [Object] 并注意它显示的 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] }
        ...

DOM 对象也表现出不同的行为，as noted on another answer .