在Chrome中,console对象定义了两个方法,它们做的事情是一样的:

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

我在网上读到过,dir在记录对象之前获取了它的一个副本,而log只是将引用传递给控制台,这意味着当你去检查你记录的对象时,它可能已经改变了。然而,一些初步测试表明,两者之间并没有什么区别,而且它们都可能会显示与记录时不同的对象状态。

尝试在Chrome控制台(Ctrl+Shift+J)看看我的意思:

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

现在,展开log语句下面的[Object],注意它显示了值为2的foo。如果使用dir而不是log重复这个实验,情况也是一样的。

我的问题是,为什么这两个看似相同的功能会出现在主机上?


当前回答

控制台标准(提交ef88ec7a39fdfe79481d7d8f2159e4a323e89648)目前调用控制台。在将JavaScript对象传递给Printer之前应用通用的JavaScript对象格式化(规范级操作),但是对于单参数console.log调用,规范最终会将JavaScript对象直接传递给Printer。

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

其他回答

根据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()应该用来获得更多的信息,如原型等数组和对象。

Chrome中另一个有用的区别是在向控制台发送DOM元素时。

注意:

log将元素打印在一个类似html的树中 控制台。dir在类似json的树中打印元素

具体来说,console.log对DOM元素给予特殊处理,而console.log对DOM元素给予特殊处理。迪尔没有。在尝试查看DOM JS对象的完整表示时,这通常很有用。

在Chrome控制台API中有关于这个和其他函数的更多信息。

控制台标准(提交ef88ec7a39fdfe79481d7d8f2159e4a323e89648)目前调用控制台。在将JavaScript对象传递给Printer之前应用通用的JavaScript对象格式化(规范级操作),但是对于单参数console.log调用,规范最终会将JavaScript对象直接传递给Printer。

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

之前的7个回答都没有提到这个控制台。dir支持额外的参数:depth, showHidden,以及是否使用颜色。

特别有趣的是深度,它(理论上)允许遍历对象到console.log支持的默认2个级别以上。

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

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

来自firebug网站 http://getfirebug.com/logging/

调用console.dir(object)将记录对象属性的交互式列表,如>—DOM选项卡的微型版本。