Google Chrome console.log（）与对象和数组不一致 [英] Google Chrome console.log() inconsistency with objects and arrays

问题描述

我今天帮助一位同事调试了一些代码，并在Google Chrome浏览器中发现了 console.log（）的奇怪行为：

看起来如果你：

1. 创建一个嵌套数组（例如[[345，test ]]）

使用 console.log（）修改其中一个内部数组值，然后 console.log（）将输出后面的值 - 在 console.log（）执行时数组的值。

JavaScript ：

  var test = [[2345235345，test]] 
 console.log（test）; 
 test [0] [0] = 1111111; 
 //输出：[[1111111，test]] 
 
 var testb = {}; 
 testb.test =test; 
 console.log（testb）; 
 testb.test =sdfgsdfg; 
 //输出：{testb：test} 
 
 
 var testc = [test，test2]; 
 console.log（testc）; 
 testc [0] =sdxfsdf; 
 //输出：[test，test2] 
  

< a href =http://jsfiddle.net/ju3ZV/2/ =noreferrer> JSFiddle示例

这种行为并不是在Firefox中发生的。

另外需要注意的是，如果我在Chrome调试器中一行一行地检查他的代码，那么 console.log ）会输出正确的值。

有没有对这种奇怪现象的解释，还是只是Google Chrome的一个错误？

编辑： 我已经缩小了重现不一致的步骤 console.log（）行为：

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

$ b

  var greetings = ['hi'，'bye']; 
 console.log（问候）; 
 setTimeout（function（）{
 greetings.push（'goodbye'）; 
}，3000）; 
  

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

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

这是Google Chrome <？c $ c> console.log（）功能中的一个错误吗？

经过大量的挖掘，我发现这已经被报告为一个bug，在Webkit中已经修复，但显然还没有被纳入谷歌浏览器。

>

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

描述从mitch kramer 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

p>

我认为我们不会解决这个问题。我们无法在将对象转储到控制台时克隆对象，并且我们也无法侦听对象属性的更改以使其始终处于真实状态。

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

修正 于八月后的两年半后实施9，2012 for Webkit（ http://trac.webkit.org/changeset/125174 ），但它没有出现到目前为止，将一个对象（数组）转储到控制台将导致对象的属性为$（$）。
$ b

b $ b读取控制台对象扩展（即延迟）。这意味着在
变异的情况下转储同一个对象将很难使用控制台进行调试。

这种变化开始在对象/数组中生成缩略预览他们的
记录的时刻，并将这些信息传递到前端。这只发生在前端
已经打开时，它只适用于console.log（），而不是实时控制台交互。

I was helping a colleague debug some code today and I noticed a strange behavior with console.log() in Google Chrome:

It appears that if you:

1. Create a nested array (e.g., [[345,"test"]])

2. Log the array to the console with console.log().

3. 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"]

JSFiddle Example

This behavior does not happen in Firefox.

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?

EDIT:

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);

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.

In the first case, with the console window already open, console.log() will output the current value of the array (i.e., two items).

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).

Is this a bug in Google Chrome's console.log() functionality?

解决方案

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.

As far as I can tell, the issue was originally reported here: 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.

Response from a Chromium developer:

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.

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.

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屋！