Chrome开发者工具控制台 - 日志堆叠,如何查看重新登录的内容[Screenshot Inside]？

Question

我刚开始在Chrome开发者工具中使用控制台(一般来说是Javascript的新手).我注意到,当我连续两次记录相同的变量(在这种情况下是一个对象)时,日志会堆叠它并在其旁边放置一个小数字图标.我点击这个想法,我将能够看到该对象两次(因为它已被更新两次),但没有任何反应.

图片以获得更多说明:

正如您所看到的,Object下拉列表旁边的蓝色圆圈中有一个"2" .第一个日志将Object.num在3,第二个在4,但我能看到的只是第二个.

任何关于如何看到两个日志的答案将不胜感激.

:).

Answer 1

发生这种情况是因为您将两次记录相同的确切对象.即使这不会导致堆叠,你只会看到`num'是4,因为控制台没有 - 据我所知,至少 - 抓住你记录的对象的副本.我同意,这偶尔会有些不方便.

我只是想到确保你将获得单独的日志 - 但增加了内存使用量 - 的一种方法是做类似的事情

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

(这应该至少可以工作.)如果您的对象相对简单易于解释,您可以省略JSON.parse其中并使用对象的JSON字符串形式进行日志记录.

我还建议查看debugger;语句 - 只要在JS程序中遇到它,它将使环境停止执行代码并突破到脚本调试器.它可能会或可能不会更适合您正在调试的任何内容.

Answer 2

此自定义log函数将记录对象的“快照”，因此在您的示例中，您将看到对象的更新后的“num”属性反映在每次调用中log。

\n\n

它通过手动将对象的每个属性记录到“控制台组”中来进行欺骗。但是，它最终看起来非常接近正常console.log输出（没有您在问题中指出的奇怪行为）。

\n\n

另外，它可能只适用于 Chrome。

\n\n

function log(obj) {\n    console.groupCollapsed(({}).toString.call(obj).split(\' \')[1].split(\']\')[0]);\n    for (var k in obj) obj.hasOwnProperty(k) && console.log(k + \': \', obj[k]);\n    console.log(\'__proto__: \', obj.__proto__);\n    console.groupEnd();\n}\xe2\x80\x8b\n

\n\n

在这里尝试一下。

\n\n\n\n

顺便说一句，这是一个很好的问题。我刚刚了解了很多我以前不知道的控制台。:)

\n