在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重复这个实验，情况也是一样的。
我的问题是，为什么这两个看似相同的功能会出现在主机上?
当前回答
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);
在谷歌dev tools中记录以下日志:
其他回答
来自firebug网站 http://getfirebug.com/logging/
调用console.dir(object)将记录对象属性的交互式列表，如>—DOM选项卡的微型版本。
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);
在谷歌dev tools中记录以下日志:
根据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()应该用来获得更多的信息，如原型等数组和对象。
控制台标准(提交ef88ec7a39fdfe79481d7d8f2159e4a323e89648)目前调用控制台。在将JavaScript对象传递给Printer之前应用通用的JavaScript对象格式化(规范级操作)，但是对于单参数console.log调用，规范最终会将JavaScript对象直接传递给Printer。
由于规范实际上将关于Printer操作的几乎所有内容都留给了实现，因此对于console.log()使用何种格式由他们自行决定。
Chrome中另一个有用的区别是在向控制台发送DOM元素时。
注意:
log将元素打印在一个类似html的树中 控制台。dir在类似json的树中打印元素
具体来说，console.log对DOM元素给予特殊处理，而console.log对DOM元素给予特殊处理。迪尔没有。在尝试查看DOM JS对象的完整表示时，这通常很有用。
在Chrome控制台API中有关于这个和其他函数的更多信息。
