console.dir和console.log有什么区别？ [英] What's the difference between console.dir and console.log?

问题描述

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

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

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

我在网上看到， dir 在记录之前获取对象的副本，而 log 将引用传递给控制台，这意味着在您检查所记录的对象时，它可能已更改。

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.

请在Chrome控制台中尝试这个方法（

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

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

现在，展开 [Object] 下面的日志语句，注意它显示 foo 的值为2.如果你重复实验使用 dir

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.

我的问题是，为什么这两个看似相同的函数存在于控制台？

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

推荐答案

： log 只打印一个 toString 表示， dir

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

在Chrome中， log 已经打印出一棵树 - 时间。但是，Chrome的 log 仍会对某些类的对象进行字符串化，即使它们有属性。也许最明显的例子是正则表达式：

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:

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

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

您还可以看到与数组有明显的区别（例如 console.dir（[1,2,3]）） log ged与正常对象不同：

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

> 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对象也表现出不同的行为，另一个答案上所述。

DOM objects also exhibit differing behavior, as noted on another answer.

这篇关于console.dir和console.log有什么区别？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！