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

Question

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

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

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

在Chrome控制台(Ctrl+ Shift+ J)中试试这个,看看我的意思:

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

现在,展开[Object]日志语句下方并注意它显示foo的值为2.如果您使用dir而不是重复实验,则同样如此log.

我的问题是,为什么这两个看似相同的函数存在console？

Answer 1

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

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

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

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

您还可以看到与数组(例如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对象也表现出不同的行为.

Answer 2

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

注意:

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

具体来说,console.log对DOM元素给予特殊处理,而console.dir不是.在尝试查看DOM JS对象的完整表示时,这通常很有用.

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

Answer 3

之前的 7 个答案都没有提到console.dir支持额外的参数：depth、showHidden以及是否使用colors。

特别令人感兴趣的是depth，它（理论上）允许将对象遍历到console.log支持的默认 2 个级别以上。

我写“理论上”是因为在实践中，当我有一个 Mongoose 对象并运行console.log(mongoose)和时console.dir(mongoose, { depth: null })，输出是相同的。mongoose实际上深入到对象中的递归是使用util.inspect：

import * as util from 'util';
console.log(util.inspect(myObject, {showHidden: false, depth: null}));