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

javascript google-chrome console

2022-08-29 23:24:17

在Chrome中，该对象定义了两种似乎执行相同操作的方法：console

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

我在网上读到过，在记录对象之前会获取对象的副本，而只是将引用传递到控制台，这意味着当您检查记录的对象时，它可能已经更改。然而，一些初步测试表明，没有区别，并且它们都可能显示与记录时不同状态的对象。dirlog

在Chrome控制台（++）中尝试此操作，以了解我的意思：CtrlShiftJ

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

现在，展开 log 语句下方的，请注意，它显示的值为 2。如果使用而不是重复实验，情况也是如此。[Object]foodirlog

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

答案 1

在Firefox中，这些函数的行为完全不同：只打印出一个表示，而打印出一个可导航的树。logtoStringdir

在Chrome中，已经打印出一棵树 - 大多数时候。但是，Chrome仍然会字符串化某些类别的对象，即使它们具有属性。也许差异最明显的例子是正则表达式：loglog

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

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

您还可以看到数组（例如，）的明显差异，这些数组的ged与普通对象不同：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 对象也表现出不同的行为，如另一个答案所述。

答案 2

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

通知：

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

具体来说，对 DOM 元素进行特殊处理，而不进行特殊处理。这在尝试查看 DOM JS 对象的完整表示形式时通常很有用。console.logconsole.dir

Chrome 管理控制台 API 参考中提供了有关此功能和其他功能的更多信息。