[英]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]
并注意它显示值为 2 的foo
。如果您使用dir
而不是log
重复实验,情况也是如此。
My question is, why do these two seemingly identical functions exist on console
?我的问题是,为什么
console
存在这两个看似相同的功能?
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:您还可以看到数组(例如,
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 对象也表现出不同的行为,如另一个答案所述。
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.具体来说,
console.log
对 DOM 元素进行了特殊处理,而console.dir
则没有。 This is often useful when trying to see the full representation of the DOM JS object.当试图查看 DOM JS 对象的完整表示时,这通常很有用。
There's more information in the Chrome Console API reference about this and other functions. Chrome 控制台 API 参考中提供了有关此功能和其他功能的更多信息。
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));
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 控制台中显示完整对象?
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 选项卡的微型版本。
None of the 7 prior answers mentioned that console.dir
supports 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.log
supports.特别感兴趣的是
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.我写“理论上”是因为实际上当我有一个猫鼬对象并运行
console.log(mongoose)
和console.dir(mongoose, { depth: null })
,输出是一样的。 What actually recursed deeply into the mongoose
object was using util.inspect
:究竟是什么深深递归到
mongoose
对象是使用util.inspect
:
import * as util from 'util';
console.log(util.inspect(myObject, {showHidden: false, depth: null}));
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()
应该用于获取更多信息,如数组和对象中的原型等。
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 manner console.log(input)
:浏览器以格式良好的方式登录console.dir(input)
: The browser logs just the object with all its properties console.dir(input)
:浏览器只记录对象及其所有属性 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:在谷歌开发工具中记录以下内容:
Well, the Console Standard (as of commit ef88ec7a39fdfe79481d7d8f2159e4a323e89648 ) currently calls for console.dir to apply generic JavaScript object formatting before passing it to Printer (a spec-level operation), but for a single-argument console.log call, the spec ends up passing the JavaScript object directly to Printer .好吧,控制台标准(从提交ef88ec7a39fdfe79481d7d8f2159e4a323e89648 开始)当前调用console.dir以在将其传递给Printer (规范级操作)之前应用通用 JavaScript 对象格式,但对于单参数console.log调用,规范结束将 JavaScript 对象直接传递给Printer 。
Since the spec actually leaves almost everything about the Printer operation to the implementation, it's left to their discretion what type of formatting to use for console.log().由于规范实际上将有关打印机操作的几乎所有内容都留给了实现,因此由他们自行决定对 console.log() 使用什么类型的格式。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.