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

IT技术 javascript google-chrome google-chrome-devtools console.log
2021-01-28 02:25:22

今天我正在帮助一位同事调试一些代码,我注意到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()将输出数组的后期值(即三个项目)。

这是 Google Chromeconsole.log()功能中的错误吗?

2个回答

经过大量挖掘,我发现这已被报告为一个错误,已在 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(),不适用于实时控制台交互。

“这意味着在改变它的同时转储相同的对象将很难使用控制台进行调试”,我几个月前才意识到这一点,这让我发疯了。
2021-03-13 02:25:22
它的 2017 和它仍然发生嵌套对象值。我昨天花了几个小时调试一个编码插件,因为它没有向我显示值,当我记录 obj 分配和嵌套 obj 之前/之后,结果是 chrome。
2021-03-21 02:25:22
我看到同样的问题在 2021 年仍然存在。
2021-03-25 02:25:22
嗨,从 2021 年开始,当使用带有 TypeScript 的 fetch Response 开始时,我可以通过 console.log() 看到这个错误。我发现用鼠标悬停在所述数组上会显示帮助文本“对象”,这使得typescript不会完全失败。
2021-04-01 02:25:22
谢谢你。在过去的几天里,我一直在努力弄清楚我的代码出了什么问题。这一直是 Chrome 的一个问题。
2021-04-02 02:25:22

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

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

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

jQuery 示例:

console.log($.extend({}, myObject));
不幸的是,并非所有对象都可以字符串化。例如,JSON.stringify(document.body)
2021-04-04 02:25:22
好主意!您还可以覆盖该toString功能
2021-04-05 02:25:22