Javascript console.dir 和 console.log 有什么区别？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11954152/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What's the difference between console.dir and console.log?
提问by Drew Noakes
In Chrome the consoleobject defines two methods that seem to do the same thing:
在 Chrome 中，console对象定义了两个似乎做同样事情的方法：
console.log(...)
console.dir(...)
I read somewhere online that dirtakes a copy of the object before logging it, whereas logjust 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 foowith a value of 2. The same is true if you repeat the experiment using dirinstead of log.
现在，展开[Object]log 语句下方的内容并注意它显示foo的值为 2。如果您使用dir代替重复实验，情况也是如此log。
My question is, why do these two seemingly identical functions exist on console?
我的问题是，为什么这两个看似相同的功能存在于console？
采纳答案by apsillers
In Firefox, these function behave quite differently: logonly prints out a toStringrepresentation, whereas dirprints out a navigable tree.
在 Firefox 中，这些函数的行为完全不同：log只打印出一个toString表示，而dir打印出一个可导航的树。
In Chrome, logalready prints out a tree -- most of the time. However, Chrome's logstill stringifies certain classes of objects, even if they have properties. Perhaps the clearest example of a difference is a regular expression:
在 Chrome 中，log已经打印出一棵树——大部分时间。然而，Chromelog仍然对某些类的对象进行字符串化，即使它们具有属性。也许最明显的差异示例是正则表达式：
> 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])）的明显区别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 objects also exhibit differing behavior, as noted on another answer.
DOM 对象也表现出不同的行为，如另一个答案所述。
回答by Drew Noakes
Another useful difference in Chrome exists when sending DOM elements to the console.
将 DOM 元素发送到控制台时，Chrome 中存在另一个有用的区别。
Notice:
注意：
console.logprints the element in an HTML-like treeconsole.dirprints the element in a JSON-like tree
console.log在类似 HTML 的树中打印元素console.dir在类似 JSON 的树中打印元素
Specifically, console.loggives special treatment to DOM elements, whereas console.dirdoes 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 referenceabout this and other functions.
Chrome 控制台 API 参考中提供了有关此功能和其他功能的更多信息。
回答by sachleen
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.dirgives 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 = 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));
回答by Scorpion-Prince
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)
回答by Dries Marien
From the firebug site http://getfirebug.com/logging/
来自萤火虫网站 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 选项卡的微型版本。
回答by Willem van der Veen
Difference between console.log()and console.dir():
console.log()和之间的区别console.dir()：
Here is the difference in a nutshell:
简而言之，区别如下：
console.log(input): The browser logs in a nicely formatted mannerconsole.dir(input): The browser logs just the object with all its properties
console.log(input)：浏览器以格式良好的方式登录console.dir(input): 浏览器只记录对象及其所有属性
Example:
例子：
The following code:
以下代码：
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);
Logs the following in google dev tools:
在谷歌开发工具中记录以下内容：
回答by Dan Dascalescu
None of the 7 prior answers mentioned that console.dirsupports extra arguments: depth, showHidden, and whether to use colors.
之前的 7 个答案都没有提到console.dir支持额外的参数: depth, showHidden, 以及是否使用colors.
Of particular interest is depth, which (in theory) allows travering objects into more than the default 2 levels that console.logsupports.
特别令人感兴趣的是depth，它（理论上）允许将对象遍历到超过console.log支持的默认 2 个级别。
I wrote "in theory" because in practice when I had a Mongoose object and ran console.log(mongoose)and console.dir(mongoose, { depth: null }), the output was the same. What actually recursed deeply into the mongooseobject wasusing util.inspect:
我写“理论上”是因为在实践中，当我有一个猫鼬对象并运行console.log(mongoose)and 时console.dir(mongoose, { depth: null })，输出是相同的。实际上深入到mongoose对象中的是使用util.inspect：
import * as util from 'util';
console.log(util.inspect(myObject, {showHidden: false, depth: null}));
回答by Bimal
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()应该用于在数组和对象中获取更多信息，如原型等。
