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

Question

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

看起来如果你:

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 Example

这种行为不会发生在 Firefox 中。

还要注意，如果我在 Chrome 调试器中逐行执行他的代码，那么 console.log() 会输出正确的值。

对于这种奇怪的现象是否有解释，或者这只是谷歌浏览器的一个错误？

编辑:

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

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

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

并在 Chrome 控制台窗口已经打开的新窗口中打开它，然后 console.log() 输出将与加载页面时不同控制台窗口关闭。 Here's a JSFiddle that demonstrates that .

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

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

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

Answer 1

经过大量挖掘，我发现这已被报告为一个错误，已在 Webkit 中修复，但显然尚未引入 Google Chrome。

据我所知，该问题最初报告于此处:https://bugs.webkit.org/show_bug.cgi?id=35801 :

Description From mitch kramer 2010-03-05 11:37:45 PST

1) create an object literal with one or more properties

2) console.log that object but leave it closed (don't expand it in the console)

3) change one of the properties to a new value

now open that console.log and you'll see it has the new value for some reason, even though it's value was different at the time it was generated.

I should point out that if you open it, it will retain the correct value if that wasn't clear.

Chromium 开发者的回应:

Comment #2 From Pavel Feldman 2010-03-09 06:33:36 PST

I don't think we are ever going to fix this one. We can't clone object upon dumping it into the console and we also can't listen to the object properties' changes in order to make it always actual.

We should make sure existing behavior is expected though.

两年半后的 2012 年 8 月 9 日， 为 Webkit ( http://trac.webkit.org/changeset/125174 ) 实现了修复，但它似乎还没有进入 Chrome。

As of today, dumping an object (array) into console will result in objects' properties being read upon console object expansion (i.e. lazily). This means that dumping the same object while mutating it will be hard to debug using the console.

This change starts generating abbreviated previews for objects / arrays at the moment of their logging and passes this information along into the front-end. This only happens when the front-end is already opened, it only works for console.log(), not live console interaction.