399

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

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

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

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

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

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

我的问题是，为什么这两个看似相同的功能存在于console?

4

9 回答 9

391

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

在 Chrome 中，log已经打印出一棵树——大部分时间。然而，Chromelog仍然会将某些类别的对象进行字符串化，即使它们具有属性。也许最明显的差异示例是正则表达式：

> 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 对象也表现出不同的行为。

于 2012-08-14T14:28:58.020 回答
165

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

注意：

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

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

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

于 2013-10-09T10:48:33.837 回答
4

我认为 Firebug 的做法与 Chrome 的开发工具不同。看起来 Firebug 为您提供了对象的字符串化版本，同时console.dir为您提供了可扩展的对象。两者都为您提供 Chrome 中的可扩展对象，我认为这可能是混乱的来源。或者这只是 Chrome 中的一个错误。

在 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

如果这是您想要看到的，您可以使用以下内容来获取对象的字符串化版本。这将向您显示在调用此行时对象是什么，而不是在您展开它时。

console.log(JSON.stringify(o));
于 2012-08-14T14:25:15.827 回答
3

使用 console.dir() 输出一个可以点击的可浏览对象，而不是 .toString() 版本，如下所示：

console.dir(obj/this/anything)

如何在 Chrome 控制台中显示完整对象？

于 2012-08-14T14:15:39.623 回答
2

从萤火虫网站 http://getfirebug.com/logging/

调用 console.dir(object) 将记录对象属性的交互式列表，例如 > DOM 选项卡的微型版本。

于 2012-08-14T14:13:26.180 回答
2

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

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

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

import * as util from 'util';
console.log(util.inspect(myObject, {showHidden: false, depth: null}));
于 2020-05-27T10:45:00.650 回答
1

按照 Felix Klings 的建议，我在我的 chrome 浏览器中进行了尝试。

console.dir([1,2])给出以下输出：

Array[2]
 0: 1
 1: 2
 length: 2
 __proto__: Array[0]

虽然console.log([1,2])给出以下输出：

[1, 2]

所以我相信console.dir()应该用来获取更多信息，比如数组和对象中的原型等。

于 2013-03-20T12:24:55.280 回答
1

console.log()和之间的区别console.dir()：

简而言之，这里是区别：

  • console.log(input): 浏览器以格式良好的方式登录
  • console.dir(input): 浏览器只记录对象及其所有属性

例子：

以下代码：

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);

在谷歌开发工具中记录以下内容：

在此处输入图像描述

于 2019-12-20T19:55:45.800 回答
1

好吧，控制台标准（从提交ef88ec7a39fdfe79481d7d8f2159e4a323e89648 开始）目前要求console.dir在将其传递给打印机（规范级别操作）之前应用通用 JavaScript 对象格式，但是对于单参数console.log调用，规范结束将 JavaScript 对象直接传递给Printer。

由于规范实际上将有关打印机操作的几乎所有内容都留给了实现，因此由他们自行决定为 console.log() 使用哪种格式。

于 2020-09-03T00:06:59.777 回答