Chrome 开发人员工具中奇怪的 console.log 行为

IT技术 javascript google-chrome
2021-02-01 12:53:51

可能的重复:
Chrome 的 JavaScript 控制台是否懒得评估数组?

打开 Chrome 开发者工具并输入:

var a = [];console.log(a);a.push(1);console.log(a);

你会期望它输出类似的东西

[]
[1]

但它输出

[1]
[1]

行为是相同的

var a = [];console.log(a);a[0] = 1;console.log(a);

谁能解释这种行为?

在 OS X 上运行 Chrome。在 32 位 Windows 7 上的行为相同。

编辑:无论语句是否在同一行上,行为都是相同的。我只是在一行中提供了它们,以便于测试。

推杆

var a = [];
console.log(a);
a.push(1);
console.log(a);

在一个文件中然后运行它会产生相同的行为。

编辑 x 2如果您不想制作要测试的文件, 请参阅:http : //jsfiddle.net/9N4A6/

5个回答

试试这个:

var a = []; console.log(a.toString()); a.push(1); console.log(a.toString());

我敢打赌,并不是求值顺序很奇怪,而是对象到可打印形式的转换发生在语句全部执行之后,此时 Chrome 已准备好实际转储日志。

@maarons,实际上,即使打印延迟,这也是意料之中的……它将值 1 发送到 console.log(),这是缓存然后显示的内容。
2021-03-28 12:53:51
好吧,`var a = [];console.log(a[0]);a[0] = 1;console.log(a[0]);' 按预期工作,因此有时 console.log 不会在打印前执行所有语句。
2021-04-06 12:53:51

与 x64 机器上的 Win7 相同的行为。我的猜测是 log 方法保存对a碰巧在一行中的调用的引用并将其排队。

编辑这不仅仅是 Chrome/ium 问题,我在 Firebug 中也看到了同样的情况。正如我所说,控制台日志必须以某种方式排队。

在此处打开控制台:jsfiddle.net/9N4A6
2021-03-23 12:53:51
当它们不在一行上时会发生相同的行为。我只是在一行中完成,以便人们更轻松地粘贴和测试。
2021-03-25 12:53:51
不,在使用多个语句时无法确认问题。按预期工作。我应该补充一点,我正在使用 Chromium 版本。
2021-04-03 12:53:51

至少对于数组,您可以为每个日志调用克隆数组:

var a = [];console.log([].concat(a));a.push(1);console.log([].concat(a));

对于对象,我推荐 JSON:

var a = {};console.log(JSON.stringify(a));a[0]=1;console.log(JSON.stringify(a));

“记录”的是对象“a”……而不是“a”的纯文本表示。日志显示足够聪明,可以显示对象“a”的占位符,它“稍后”填充/填充(似乎在事件调用结束时)。如果您在其中添加 alert() 语句,您将看到您期望的值(记录的值被“填充”):

var a = [];
console.log(a);
alert('force console to display correctly');
a.push(1);
console.log(a);

对我来说,这似乎是 Chrome 中的一个错误(为了查看正确的日志信息而不得不放入警报语句有点愚蠢)。

(注意这个问题显示在谷歌搜索“console.log chrome only shows current values”的顶部,所以我想我会添加我的答案)

这不是 Chrome 的问题——而是 Webkit 的问题。在 Safari 中也会发生同样的错误。
2021-03-24 12:53:51

是的,它也在对象上这样做......如果你稍后更改值(例如,几秒钟后)然后在控制台中展开对象,新值将在那里。很奇怪,但在某种意义上可能很有用。

如果您想要当前值,只需说“console.log(a.toString());” 或类似。