Google Chrome console.log()与对象和数组不一致

Question

今天我正在帮助同事调试一些代码,我注意到console.log()谷歌Chrome中有一个奇怪的行为:

如果您:

1. 创建一个嵌套数组(例如,[[345,"test"]])

2. 使用将数组记录到控制台console.log().

3. 修改其中一个内部数组值,然后console.log()输出后面的值 - 而不是console.log()执行时数组的值.

JavaScript:

var test = [[2345235345,"test"]]
console.log(test);
test[0][0] = 1111111;
// outputs: [[1111111,"test"]]

var testb = {};
testb.test = "test";
console.log(testb);
testb.test = "sdfgsdfg";
// outputs: {"testb":"test"}


var testc = ["test","test2"];
console.log(testc);
testc[0] = "sdxfsdf";
// outputs: ["test","test2"]

JSFiddle示例

在Firefox中不会发生此行为.

另外需要注意的是,如果我在Chrome调试器中逐行浏览他的代码,那么console.log()会输出正确的值.

这个奇怪的现象是否有解释,还是仅仅是Google Chrome的错误？

编辑:

我已经缩小了重现不一致console.log()行为的步骤:

如果您将此脚本添加到您的页面:

var greetings=['hi','bye'];
console.log(greetings);
setTimeout(function(){
    greetings.push('goodbye');
},3000);

并在Chrome 控制台窗口已打开的情况下在新窗口中打开它,然后console.log()输出将与在控制台窗口关闭时加载页面的输出不同.这是一个证明这一点的JSFiddle.

在第一种情况下,控制台窗口已经打开,console.log()将输出数组的当前值(即两个项目).

在第二种情况下,控制台窗口最初关闭并仅在页面加载后打开,console.log()将输出数组的后续值(即三个项目).

这是Google Chrome的console.log()功能中的错误吗？

Answer 1

经过大量挖掘后,我发现这已被报告为一个错误,已在Webkit中修复,但显然尚未进入谷歌浏览器.

据我所知,这个问题最初是在这里报道的:https://bugs.webkit.org/show_bug.cgi？id = 35801:

描述来自mitch kramer 2010-03-05 11:37:45太平洋标准时间

1)创建具有一个或多个属性的对象文字

2)console.log该对象但保持关闭(不要在控制台中展开它)

3)将其中一个属性更改为新值

现在打开console.log并且由于某种原因你会看到它具有新值,即使它的值在生成时是不同的.

我应该指出,如果你打开它,它将保留正确的值,如果不清楚.

来自Chromium开发人员的回复:

评论#2来自Pavel Feldman 2010-03-09 06:33:36太平洋标准时间

我认为我们永远不会解决这个问题.我们无法在将对象转储到控制台时克隆对象,并且我们也无法监听对象属性的更改以使其始终是实际的.

我们应该确保现有的行为是可以预期的.

一个修复程序是两年半后实施了2012年8月9日进行的Webkit(http://trac.webkit.org/changeset/125174 ),但它似乎没有我们已经进入Chrome浏览器呢.

截至今天,将对象(数组)转储到控制台将导致在控制台对象扩展(即懒惰)时读取对象的属性.这意味着在使用控制台进行调整时转储相同的对象将很难调试.

此更改开始在记录时生成对象/数组的缩写预览,并将此信息传递到前端.这只发生在前端已经打开时,它只适用于console.log(),而不适用于实时控制台交互.

Answer 2

我找到了这个bug /功能的解决方法.

console.log(JSON.parse(JSON.stringify(myObject)));

编辑:不幸的是,这对于像函数这样的非原始值不起作用.在此使用其他克隆实用程序

jQuery示例:

console.log($.extend({}, myObject));