Google Chrome console.log() 与对象和数组不一致 [英] Google Chrome console.log() inconsistency with objects and arrays
问题描述
今天我正在帮助一位同事调试一些代码，我注意到 Google Chrome 中 console.log() 的奇怪行为:
I was helping a colleague debug some code today and I noticed a strange behavior with console.log() in Google Chrome:
看来，如果您:
创建嵌套数组(例如，[[345,"test"]])
Create a nested array (e.g., [[345,"test"]])
使用 console.log() 将数组记录到控制台.
Log the array to the console with console.log().
修改其中一个数组值，然后console.log()会输出后面的值——不是当时数组的值console.log() 已执行.
Modify one of the inner array values, then console.log() will output the later value -- not the values of the array at the time the console.log() was executed.
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"]
这种行为在 Firefox 中不会发生.
This behavior does not happen in Firefox.
还要注意，如果我在 Chrome 调试器中逐行浏览他的代码，那么 console.log() 将输出正确的值.
Also to note, if I stepped through his code line by line in the Chrome debugger, then console.log() would output the correct values.
这种奇怪的现象有什么解释吗，还是只是谷歌浏览器的一个错误?
Is there an explanation for this strange phenomenon or is it just a bug with Google Chrome?
我缩小了重现不一致 console.log() 行为的步骤:
I've narrowed down the steps to reproduce the inconsistent console.log() behavior:
如果您将此脚本添加到您的页面:
If you add this script to your page:
var greetings=['hi','bye'];
console.log(greetings);
setTimeout(function(){
greetings.push('goodbye');
},3000);
并在 Chrome 控制台窗口已经打开的情况下在新窗口中打开它，那么 console.log() 输出将与加载页面时不同控制台窗口关闭.这是一个演示这一点的 JSFiddle.
and open it in a new window with the Chrome console window already open, then the console.log() output will be different than if you load the page with the console window closed. Here's a JSFiddle that demonstrates that.
在第一种情况下，控制台窗口已经打开，console.log() 将输出数组的当前值(即两个项目).
In the first case, with the console window already open, console.log() will output the current value of the array (i.e., two items).
在第二种情况下，控制台窗口最初关闭并仅在页面加载后打开，console.log() 将输出数组的后续值 (即三个项目).
In the second case, with the console window initially closed and opened only after the page loads, console.log() will output the later values of the array (i.e., three items).
这是 Google Chrome 的 console.log() 功能中的错误吗?
Is this a bug in Google Chrome's console.log() functionality?
推荐答案
经过大量挖掘，我发现这是一个错误，已在 Webkit 中修复，但显然尚未拉入 Google Chrome.
After a lot of digging, I found that this has been reported as a bug, fixed in Webkit, but apparently not yet pulled into Google Chrome.
据我所知，这个问题最初是在这里报告的:https://bugs.webkit.org/show_bug.cgi?id=35801 :
As far as I can tell, the issue was originally reported here: https://bugs.webkit.org/show_bug.cgi?id=35801 :
描述来自米奇克莱默 2010-03-05 11:37:45 PST
Description From mitch kramer 2010-03-05 11:37:45 PST
1) 创建一个具有一个或多个属性的对象字面量
1) create an object literal with one or more properties
2) console.log 该对象但保持关闭(不要在控制台中展开它)
2) console.log that object but leave it closed (don't expand it in the console)
3) 将其中一个属性更改为新值
3) change one of the properties to a new value
现在打开那个 console.log，你会看到由于某种原因它有新的值，即使它的值在它生成时是不同的.
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 开发者的回复:
Response from a Chromium developer:
来自 Pavel Feldman 的评论 #2 2010-03-09 06:33:36 PST
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.
A fix was implemented two and a half years later on August 9th, 2012 for Webkit ( http://trac.webkit.org/changeset/125174 ), but it does not appear to have made it into Chrome yet.
截至今天，将对象(数组)转储到控制台将导致对象的属性被在控制台对象扩展时读取(即懒惰).这意味着在转储相同的对象时使用控制台进行调试将很难进行变异.
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.
此更改开始为对象/数组生成缩略预览记录并将此信息传递到前端.这只发生在前端已打开，它仅适用于 console.log()，不适用于实时控制台交互.
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.
这篇关于Google Chrome console.log() 与对象和数组不一致的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
