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

本文翻译自：What's the difference between console.dir and console.log?

In Chrome the console object defines two methods that seem to do the same thing: 在Chrome中， console对象定义了两种似乎可以完成相同操作的方法：

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. 我在网上某个地方读到， dir在记录对象之前先获取对象的副本，而log只是将引用传递给控制台，这意味着到您检查记录的对象时，它可能已更改。 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. 但是，一些初步测试表明，两者没有什么区别，而且它们都可能以与记录时不同的状态显示对象。

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]并注意它显示的foo值为2。如果您使用dir而不是log重复实验，则同样如此。

My question is, why do these two seemingly identical functions exist on console ? 我的问题是，为什么console存在这两个看似相同的功能？

---

#1楼

参考：https://stackoom.com/question/o9ou/console-dir和console-log有什么区别

---

#2楼

From the firebug site http://getfirebug.com/logging/ 从Firebug网站http://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选项卡的微型版本。

---

#3楼

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控制台中显示完整对象？

---

#4楼

I think Firebug does it differently than Chrome's dev tools. 我认为Firebug的做法与Chrome的开发工具不同。 It looks like Firebug gives you a stringified version of the object while console.dir gives you an expandable object. 看起来Firebug为您提供了对象的字符串化版本，而console.dir为您提供了可扩展的对象。 Both give you the expandable object in Chrome, and I think that's where the confusion might come from. 两者都为您提供了Chrome中的可扩展对象，而我认为这可能是造成混乱的原因。 Or it's just a bug in Chrome. 或仅仅是Chrome中的错误。

In Chrome, both do the same thing. 在Chrome中，两者都做相同的事情。 Expanding on your test, I have noticed that Chrome gets the current value of the object when you expand it. 在测试中进行扩展时，我注意到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

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));

---

#5楼

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 . 在Chrome中， 大多数情况下 ， log已打印出一棵树。 However, Chrome's log still stringifies certain classes of objects, even if they have properties. 但是，Chrome的log仍会对某些类别的对象进行字符串化，即使它们具有属性。 Perhaps the clearest example of a difference is a regular expression: 区别的最明显例子也许是正则表达式：

> console.log(/foo/);
/foo/

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

You can also see a clear difference with arrays (eg, console.dir([1,2,3]) ) which are log ged differently from normal objects: 您还可以看到与普通对象log不同的数组（例如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对象也表现出不同的行为， 如另一个答案所述 。

---

#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] 数组[2]

0: 1 0：1

1: 2 1：2

length: 2 长度：2

_ proto _: Array[0] _ 原型 _：数组[0]

While console.log([1,2]) gives the following output: 而console.log（[1,2]）提供以下输出：

[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（）应该用于在数组和对象中获取更多信息，例如原型等。