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

In Chrome the console object defines two methods that seem to do the same thing:

在Chrome中,控制台对象定义了两种似乎做同样事情的方法:

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

I read somewhere online that dir takes a copy of the object before logging it, whereas log just passes the reference to the console, meaning that by the time you go to inspect the object you logged, it may have changed. However some preliminary testing suggests that there's no difference and that they both suffer from potentially showing objects in different states than when they were logged.

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

Try this in the Chrome console (Ctrl+Shift+J) to see what I mean:

在Chrome控制台中尝试此操作(Ctrl + Shift + J)以查看我的意思:

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

Now, expand the [Object] beneath the log statement and notice that it shows foo with a value of 2. The same is true if you repeat the experiment using dir instead of log.

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

My question is, why do these two seemingly identical functions exist on console?

我的问题是,为什么控制台上存在这两个看似相同的功能?

6 个解决方案

#1

In Firefox, these function behave quite differently: log only prints out a toString representation, whereas dir prints out a navigable tree.

在Firefox中,这些函数的表现完全不同:log只打印出一个toString表示,而dir打印出一个可导航的树。

In Chrome, log already prints out a tree -- most of the time. However, Chrome's log still stringifies certain classes of objects, even if they have properties. Perhaps the clearest example of a difference is a regular expression:

在Chrome中,日志已经打印出一棵树 - 大部分时间都是如此。但是,Chrome的日志仍然会对某些类别的对象进行字符串化,即使它们具有属性。也许最明显的差异示例是正则表达式:

> console.log(/foo/);/foo/> console.dir(/foo/);* /foo/    global: false    ignoreCase: false    lastIndex: 0    ...

You can also see a clear difference with arrays (e.g., console.dir([1,2,3])) which are logged differently from normal objects:

您还可以看到与数组(例如,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 objects also exhibit differing behavior, as noted on another answer.

如另一个答案所述,DOM对象也表现出不同的行为。

#2

Another useful difference in Chrome exists when sending DOM elements to the console.

在将DOM元素发送到控制台时,Chrome中存在另一个有用的区别。

Notice:

• console.log prints the element in an HTML-like tree

console.log在类似HTML的树中打印元素

• console.dir prints the element in a JSON-like tree

console.dir在类似JSON的树中打印元素

Specifically, console.log gives special treatment to DOM elements, whereas console.dir does not. This is often useful when trying to see the full representation of the DOM JS object.

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

There's more information in the Chrome Console API reference about this and other functions.

Chrome控制台API参考中有关于此功能和其他功能的更多信息。

#3

I think Firebug does it differently than Chrome's dev tools. It looks like Firebug gives you a stringified version of the object while console.dir gives you an expandable object. Both give you the expandable object in Chrome, and I think that's where the confusion might come from. Or it's just a bug in Chrome.

我认为Firebug的做法与Chrome的开发工具不同。看起来Firebug为您提供了对象的字符串化版本,而console.dir为您提供了可扩展的对象。两者都为您提供了Chrome中的可扩展对象,我认为这可能会引起混淆。或者它只是Chrome中的一个错误。

In Chrome, both do the same thing. Expanding on your test, I have noticed that Chrome gets the current value of the object when you expand it.

在Chrome中,两者都做同样的事情。扩展测试后,我注意到Chrome在展开时会获取对象的当前值。

> o = { foo: 1 }> console.log(o)Expand now, o.foo = 1> o.foo = 2o.foo is still displayed as 1 from previous lines> o = { foo: 1 }> console.log(o)> o.foo = 2Expand now, o.foo = 2

You can use the following to get a stringified version of an object if that's what you want to see. This will show you what the object is at the time this line is called, not when you expand it.

如果您想要查看的话,可以使用以下内容获取对象的字符串化版本。这将显示调用此行时对象的内容,而不是展开时的对象。

console.log(JSON.stringify(o));

#4

Use console.dir() to output a browse-able object you can click through instead of the .toString() version, like this:

使用console.dir()输出可以单击的可浏览对象而不是.toString()版本,如下所示:

console.dir(obj/this/anything)

How to show full object in Chrome console?

如何在Chrome控制台中显示完整对象?

#5

From the firebug sitehttp://getfirebug.com/logging/

来自firebug sitehttp://getfirebug.com/logging/

Calling console.dir(object) will log an interactive listing of an object's properties, like > a miniature version of the DOM tab.

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

#6

Following Felix Klings advice I tried it out in my chrome browser.

根据Felix Klings的建议,我在我的Chrome浏览器中试用了它。

console.dir([1,2]) gives the following output:

console.dir([1,2])给出以下输出:

Array[2]

0: 1

1: 2

length: 2

_proto_: Array[0]

While console.log([1,2]) gives the following output:

虽然console.log([1,2])给出了以下输出:

[1, 2]

So I believe console.dir() should be used to get more information like prototype etc in arrays and objects.

所以我认为应该使用console.dir()来获取更多信息,比如数组和对象中的原型等。