在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重复这个实验，情况也是一样的。
我的问题是，为什么这两个看似相同的功能会出现在主机上?
当前回答
之前的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}));
其他回答
在Firefox中，这些函数的行为非常不同:log只打印出toString表示，而dir打印出可导航的树。
在Chrome中，log已经打印出一棵树——大多数时候。然而，Chrome的日志仍然字符串对象的某些类别，即使他们有属性。也许最明显的区别是正则表达式:
> console.log(/foo/);
/foo/
> console.dir(/foo/);
* /foo/
global: false
ignoreCase: false
lastIndex: 0
...
你还可以看到数组(例如，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对象也表现出不同的行为，如另一个答案所述。
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中记录以下日志:
之前的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选项卡的微型版本。
使用console.dir()输出一个可以点击浏览的对象，而不是.toString()版本，如下所示:
console.dir(obj/this/anything)
如何在Chrome控制台显示完整的对象?
