游戏机之间的区别是什么?Dir和console.log?

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

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

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

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

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

现在，展开日志语句下面的[Object]，注意它显示了值为2的foo。如果你用dir而不是log重复这个实验，情况也是一样的。

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

142674 次浏览
小开

来自firebug站点 http://getfirebug.com/logging/ < / p >

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

小开

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

console.dir(obj/this/anything)

如何在Chrome控制台显示完整的对象?< / >

小开

我认为Firebug的做法与Chrome的开发工具不同。看起来Firebug给了你一个字符串化的对象，而console.dir给了你一个可扩展的对象。两者都提供了Chrome中的可扩展对象，我认为这就是困惑的来源。或者只是Chrome浏览器的一个bug。

在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));
小开
最佳答案

在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]))的明显区别，它的logged与普通对象不同:

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

小开

根据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()应该用来获得更多的信息，如原型等数组和对象。

小开

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

< img src = " https://i.imgur.com/DozDcYR.png " >

注意:

  • console.log在一个类似html的树中打印元素
  • console.dir在类似json的树中打印元素

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

在Chrome控制台API参考中有关于this和其他函数的更多信息。

小开

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

在谷歌dev tools中记录以下日志:

enter image description here

小开

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

特别有趣的是depth，它(理论上)允许遍历对象到console.log支持的默认2级以上。

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

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

好吧，控制台的标准(提交ef88ec7a39fdfe79481d7d8f2159e4a323e89648时)目前调用console.dir在将其传递给打印机之前应用通用JavaScript对象格式化(规范级操作)，但对于单参数console.log调用，规范最终直接将JavaScript对象传递给打印机。

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


提交答案