在Chrome中,console对象定义了两个方法,它们做的事情是一样的:
console.log(...)
console.dir(...)
我在网上读到过,dir在记录对象之前获取了它的一个副本,而log只是将引用传递给控制台,这意味着当你去检查你记录的对象时,它可能已经改变了。然而,一些初步测试表明,两者之间并没有什么区别,而且它们都可能会显示与记录时不同的对象状态。
尝试在Chrome控制台(Ctrl+Shift+J)看看我的意思:
> o = { foo: 1 }
> console.log(o)
> o.foo = 2
现在,展开log语句下面的[Object],注意它显示了值为2的foo。如果使用dir而不是log重复这个实验,情况也是一样的。
我的问题是,为什么这两个看似相同的功能会出现在主机上?
我认为Firebug的做法与Chrome的开发工具不同。看起来Firebug为您提供了对象的字符串化版本。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));
我认为Firebug的做法与Chrome的开发工具不同。看起来Firebug为您提供了对象的字符串化版本。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));
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中记录以下日志:
根据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()应该用来获得更多的信息,如原型等数组和对象。