在 Chrome 中，console对象定义了两个似乎做同样事情的方法：
console.log(...)
console.dir(...)
我在网上某处阅读dir了在记录之前获取对象副本的内容，而log只是将引用传递给控制台，这意味着当您检查记录的对象时，它可能已更改。然而，一些初步测试表明没有区别，并且它们都可能显示处于与记录时不同状态的对象。
在 Chrome 控制台 ( Ctrl+ Shift+ J) 中试试这个，看看我的意思：
> o = { foo: 1 }
> console.log(o)
> o.foo = 2
现在，展开[Object]log 语句下方的内容并注意它显示foo的值为 2。如果您使用dir代替重复实验，情况也是如此log。
我的问题是，为什么这两个看似相同的功能存在于console？
在 Firefox 中，这些函数的行为完全不同：log只打印出一个toString表示，而dir打印出一个可导航的树。
在 Chrome 中，log已经打印出一棵树——大部分时间。然而，Chromelog仍然对某些类的对象进行字符串化，即使它们具有属性。也许最明显的差异示例是正则表达式：
> 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 对象也表现出不同的行为，如另一个答案所述。
将 DOM 元素发送到控制台时，Chrome 中存在另一个有用的区别。
注意：
console.log 在类似 HTML 的树中打印元素console.dir 在类似 JSON 的树中打印元素具体来说，console.log对 DOM 元素进行特殊处理，而console.dir没有。当试图查看 DOM JS 对象的完整表示时，这通常很有用。
Chrome 控制台 API 参考中有关于此功能和其他功能的更多信息。
我认为 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));
使用 console.dir() 输出一个可浏览的对象，您可以点击它而不是 .toString() 版本，如下所示：
console.dir(obj/this/anything)
来自萤火虫网站 http://getfirebug.com/logging/
调用 console.dir(object) 将记录一个对象属性的交互式列表，例如 > DOM 选项卡的微型版本。