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]，并注意它显示foo，其值为2.如果您使用dir代替{重复实验，情况也是如此{1}}。

我的问题是，为什么log上存在这两个看似相同的函数？

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。

Answer 2

将DOM元素发送到控制台时，Chrome存在另一个有用的区别。

注意：

• console.log在类似HTML的树中打印元素
• console.dir在类似JSON的树中打印元素

具体来说，console.log对DOM元素进行了特殊处理，而console.dir则没有。在尝试查看DOM JS对象的完整表示时，这通常很有用。

Chrome Console API reference中有关于此功能和其他功能的更多信息。

Answer 3

我认为Firebug的功能与Chrome的开发工具不同。看起来Firebug为您提供了对象的字符串化版本，而console.dir为您提供了可扩展对象。两者都为您提供Chrome中的可扩展对象，我认为这可能是混乱的来源。或者它只是Chrome中的一个错误。

在Chrome中，两者都做同样的事情。扩展测试后，我注意到Chrome在展开时会获取对象的当前值。

> o = { foo: 1 }
> console.log(o)
Expand now, o.foo = 1
> o.foo = 2
o.foo is still displayed as 1 from previous lines

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

如果您想看到的话，可以使用以下内容获取对象的字符串化版本。这将显示调用此行时对象的内容，而不是展开时的对象。

console.log(JSON.stringify(o));

Answer 4

使用console.dir（）输出可以单击的可浏览对象，而不是.toString（）版本，如下所示：

console.dir(obj/this/anything)

How to show full object in Chrome console?

Answer 5

来自萤火虫网站 http://getfirebug.com/logging/

  

调用console.dir（object）将记录对象属性的交互式列表，例如＆gt; DOM选项卡的缩小版。

Answer 6

7个先前的答案中没有一个提到console.dir supports extra arguments：depth，showHidden，以及是否使用colors。

特别值得关注的是depth，从理论上讲，它可以将对象遍历到console.log支持的默认2个级别以上。

我之所以写“理论上的”，是因为在实践中，当我有一个猫鼬对象并运行console.log(mongoose)和console.dir(mongoose, { depth: null })时，输出是相同的。实际使用mongoose深入到util.inspect对象was中的内容：

import * as util from 'util';
console.log(util.inspect(myObject, {showHidden: false, depth: null}));

Answer 7

根据Felix Klings的建议，我在Chrome浏览器中试用了它。

console.dir（[1,2]）提供以下输出：

<强>数组[2]

0：1

1：2

长度：2

_ proto _：数组[0]

虽然 console.log（[1,2]）提供以下输出：

[1,2]

所以我认为应该使用console.dir（）来获取更多信息，比如数组和对象中的原型等。

Answer 8

console.log()与console.dir()之间的区别：

简而言之，这是区别：

• console.log(input)：浏览器以格式正确的方式登录
• console.dir(input)：浏览器仅记录具有所有属性的对象

示例：

以下代码：

let obj = {a: 1, b: 2};
let DOMel = document.getElementById('foo');
let arr = [1,2,3];

console.log(DOMel);
console.dir(DOMel);

console.log(obj);
console.dir(obj);

console.log(arr);
console.dir(arr);

在Google开发工具中记录以下内容：

Answer 9

好吧，Console Standard（自提交ef88ec7a39fdfe79481d7d8f2159e4a323e89648起）目前要求console.dir在将generic JavaScript object formatting传递给Printer（规范级）之前应用console.log操作），但对于单参数Printer调用，规范最终将JavaScript对象直接传递给Printer。

由于该规范实际上将有关http://allan-simon.github.io/blog/posts/python-alembic-with-environment-variables/操作的所有内容留给了实现，因此，他们可以自行决定将console.log（）使用哪种格式。