Chrome调试器 - 如何关闭console.log消息分组？

Question

假如我要在 Google Chrome 扩展程序中这样做：

console.log(msg);

Chrome 调试器会将类似的消息分组显示，如下图所示：

有没有办法关闭这个功能，让消息按原样发布？

- c00000fd

---

这取决于你的 msg 对象。由于你没有展示任何代码，所以很难说。console.log() 返回的是你输入的内容，而不是 Chrome。 - lesssugar

Answer 1

它仅折叠相同的连续行，我并不认为这是一个大问题，但是您可以在控制台右上角的设置按钮中启用“显示时间戳”，这将使它们处于不同的行中：

如此您就可以看到它们只折叠具有连续重复项的行：

msgs = ['hello', 'world', 'there'];
for (i = 0; i < 20; i++) console.log(msgs[Math.floor((i/3)%3)]) 

控制台 API 还有许多其他函数可以帮助您跟踪代码。例如，console.count(label) 会记录已经输出 label 的次数，console.group() 可以将其他日志调用分组，console.timeline(label) 可以将日志分组成时间轴。

- Jason Goemaat

---

我可以添加时间戳来方便自己查看。你知道，这样做会使日志变得杂乱无章。显然，编写控制台日志的人并没有意识到消息的顺序可能很重要（即使其中一些是相同的）。 - c00000fd

订单没有改变 - Jason Goemaat

是的，我的屏幕截图中这些消息可能会出现为：Page=, iframe, iframe, Page=, iframe, iframe，但控制台显示的顺序并不保证。 - c00000fd

我不相信你，你能展示一下你的代码吗？运行我的示例代码，你会看到“hello”在三个组中显示，并且单词按顺序显示。同时打开时间戳，它将为您取消分组日志并发布。 - Jason Goemaat

如果我启用时间戳，显然这种情况不会发生。你有没有读我的第一条回复？ - c00000fd

Answer 2

在控制台窗口的右上角，有一个齿轮按钮，打开一个面板，里面有一个名为“分组相似”的设置。如果取消选中此复选框，则类似的日志条目将不再被分组在一起。

- foolo

---

在较新版本的Chrome中，这现在被称为“在控制台中分组相似的消息”。 - Spectric

这是正确的答案，时间戳技巧在Chrome 88中不起作用。 - Alex

Answer 3

有人在这里遇到了同样的问题：Google Chrome 开发者工具控制台日志记录... 几乎没用？，但没有答案来禁用此功能。

作为解决方法，您可以在开发人员工具设置中为控制台启用“显示时间戳”。

- Volune

---

谢谢。这似乎是一个解决方法，但不是真正的解决方案。我最终还是使用了时间戳。很遗憾没有禁用它的按钮。这是一个很好的例子，说明谷歌开发人员“过度思考”了。 - c00000fd

@c00000fd同意，这是控制台中过度工程化的一个方面，将消息分组而没有禁用它的方法。在我的情况下，时间戳揭示了消息是不按时间顺序，但启用它们并不能让它们按顺序排列。因此，如果我必须在我的“肉体计算机”中对时间戳进行排序以确定实际顺序，那么这是一个相当弱的解决方法。 - Bob Stein

Answer 4

只有当消息相同才会与前面的消息合并。
为了防止消息被合并，您可以交替使用日志级别或交替使用日志输出。
在Chrome的开发者工具中，console.log和console.debug在视觉上非常相似（即没有图标）。如果您不使用详细程度筛选器，则在console.log和console.debug之间交替使用将解决您的问题：

console.log('message');
console.debug('message');
console.log('message');

// Convenience function:
function log() {
    log.counter = log.counter ? log.counter + 1 : 1;
    console[log.counter % 2 ? 'log' : 'debug'].apply(console, arguments);
}

另一种获得所需结果的方法是在消息前插入一个不可见字符（注意：我使用%s以防止出现额外的空格（请参见devtools格式选项），并且使用ZWSP以防止任何可视字符出现）：

function log() {
    log.counter = log.counter ? log.counter + 1 : 1;
    var args = [].slice.call(arguments);
    if (log.counter % 2) {
        args.unshift('%s\u200B'); // ZWSP (zero-width space, you won't see it)
    }
    console.log.apply(console, args);
}

演示: http://jsfiddle.net/x3725j38/1/

- Rob W