console.dir和console.log有什么区别？

Question

在Chrome浏览器中console对象定义了两个方法，似乎做同样的事情：

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

我听说网上说dir拍摄对象的副本记录之前，而log只是传递的参考控制台，这意味着当你去检查你记录的对象时，它可能已经改变了。然而，一些初步测试表明，没有任何区别，并且它们都有可能在不同状态下显示对象，而不是在它们被记录时。

在Chrome控制台试试这个（按Ctrl + 移 + Ĵ），看看我的意思是：

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

现在，展开[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 
    ... 

还可以看到与阵列明显的差异（例如，console.dir([1,2,3])），其log从正常对象GED不同：

> 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

从萤火虫网站 http://getfirebug.com/logging/

调用console.dir（对象）将记录一个对象的属性的交互式上市，像>的DOM选项卡的微缩版。

Answer 3

使用console.dir（）输出可浏览的对象，你可以通过替代的ToString（）版本，请点击，这样的：

console.dir(obj/this/anything) 

How to show full object in Chrome console?

Answer 4

我认为萤火虫与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 5

继Felix Klings的建议之后，我在我的Chrome浏览器中试用了它。

console.dir（[1,2]）给出以下输出：

阵列[2]

0:1

1:2

长度：2

_ 原 _：数组[0]

虽然的console.log（[1,2]）给出以下输出：

[1,2]

所以我认为应该使用console.dir（）来获取像数组和对象中的原型等更多信息。

Answer 6

将DOM元素发送到控制台时，Chrome中存在另一个有用的差异。

说明：

• console.log打印在HTML状树中的元件
• console.dir打印在一类JSON树

具体的元件，console.log给出DOM元素的特殊处理，而console.dir没有。当试图查看DOM JS对象的完整表示时，这通常很有用。

有关此功能和其他功能的更多信息，请参阅Chrome Console API reference。