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

您还可以看到 logged 与普通对象不同的数组（例如，console.dir([1,2,3])）的明显区别：

> 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) 将记录对象属性的交互式列表，例如 > DOM 选项卡的微型版本。

Answer 6

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

特别感兴趣的是depth，它（理论上）允许将对象遍历到console.log 支持的默认2 个以上的级别。

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

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

Answer 7

按照 Felix Klings 的建议，我在我的 chrome 浏览器中进行了尝试。

console.dir([1,2]) 给出以下输出：

Array[2]
 0: 1
 1: 2
 length: 2
 __proto__: Array[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（规范级别操作）之前应用@ 987654326@ 调用，规范最终将 JavaScript 对象直接传递给Printer。

由于规范实际上将有关 Printer 操作的几乎所有内容都留给了实现，因此由他们自行决定为 console.log() 使用哪种格式。