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

Question

我今天正在帮助一位同事调试一些代码，我注意到谷歌浏览器中的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 示例

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

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

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

编辑：

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

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

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

并在 Chrome控制台窗口已经打开的新窗口中打开它，那么console.log()输出将与在控制台窗口关闭的情况下加载页面不同。 这是一个 JSFiddle，它演示了.

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

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

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

Answer 1

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

据我所知，这个问题最初是在这里报告的： https : //bugs.webkit.org/show_bug.cgi?id=35801 ：

描述来自米奇克莱默 2010-03-05 11:37:45 PST

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

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

3) 将属性之一更改为新值

现在打开那个console.log，你会看到由于某种原因它有新的值，即使它的值在它生成的时候是不同的。

我应该指出，如果您打开它，如果不清楚，它将保留正确的值。

Chromium 开发人员的回应：

评论 #2 来自 Pavel Feldman 2010-03-09 06:33:36 PST

我认为我们永远不会解决这个问题。 我们不能在将对象转储到控制台时克隆它，我们也不能监听对象属性的变化以使其始终真实。

我们应该确保现有的行为是预期的。

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

截至今天，将对象（数组）转储到控制台将导致在控制台对象扩展（即懒惰）时读取对象的属性。 这意味着在改变它的同时转储相同的对象将很难使用控制台进行调试。

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

Answer 2

我找到了此错误/功能的解决方法。

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

编辑：不幸的是，这不适用于非原始值，如函数。 在此处使用另一个克隆实用程序。

jQuery 示例：

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