谷歌浏览器关注开发者控制台日志

Question

我在我的 javascript 中使用console.log很多来调试鼠标移动事件。我遇到的问题是，当在 chrome 控制台中时，没有遵循新条目。

在这些屏幕截图中得到了最好的说明：

第一批日志很好，因为它大到可以在屏幕上看到所有日志：

几秒钟后：

日志已超出需要我滚动的窗口大小。

这使得调试鼠标移动事件变得异常困难，因为我必须移动到控制台并向下滚动，从而在日志中添加更多条目。

所以我的问题是：我怎样才能让 chrome 从本质上跟踪日志而不是停止并要求我滚动。

Answer 1

在控制台打开的情况下，将滚动条向下拖动到窗口底部并松开。它应该为您输出尾随。

我尝试了好几次才让它在Version 27.0.1438.7 dev-m 中工作。但在Version 27.0.1440.0 canary 中，它不仅自动发生，而且我每次尝试都可以重新附加自动滚动。

你可以从here下载Canary。

Answer 2

默认行为是控制台在进入时跟踪（尾）日志。

但是，我们在 DevTools 中有一个错误，如果您更改缩放系数 (cmd++)，它并不总是有效。

我们刚刚解决了这个问题：https://codereview.chromium.org/180733003/ 你需要 canary 一段时间（从这篇文章发布之日起），但它会在大约 10 周内达到稳定状态。

Answer 3

这里有一个相当有害的错误（只要我记得就存在于 Chrome 中），如果您记录任何类型的扩展项，如 DOM 元素或类似的东西，它会干扰日志的显示，并且导致滚动停止跟随。

我通过运用一点聪明才智解决了这个问题，并找到了有问题的日志，你甚至不需要删除日志语句，你只需要让它“更友好”。经常起作用的是我采用任何这样的日志语句，例如

console.log((mouse ? "mouse" : "touch") + " start on", jqtarg[0]);

并将其包装在一个数组中：

console.log([(mouse_not_touch ? "mouse" : "touch") + " start on", jqtarg[0]]);

您也可以尝试做其他事情，以使日志更具可读性，例如对象（尚未严格测试任何此类，它仍然可能导致烦人的滚动跟随失败） ：

console.log({"mouse/touch start on": jqtarg[0]});

基于非常少量的测试，如果日志作为一个项目出现在日志缓冲区中，可以直接悬停（而不是要求您先手动展开它）以使检查器突出显示DOM 中的项目，那么它可能会触发“滚动锁定综合症”。

顺便说一句，需要注意的一件有用的事情是，如果您重复记录完全相同的内容，Chrome 会帮助“堆叠”它们，就像这样：（看到了吗？我通过将我的日志推入一个对象来修复自动滚动！耶！）

如果您真的不需要查看基于精确坐标的值，则打印更粗略的值...更粗略会导致更紧凑的日志（这仍然会给您提供合理的计数反馈)。

更新： 有时这些都不起作用。有时你只是不走运，你只需要清理所有不需要的日志并记录最少量的信息，以防止它超载并导致它无法向下滚动。