console.log 冻结 javascript 控制台答案

【问题标题】：console.log freeze javascript consoleconsole.log 冻结 javascript 控制台
【发布时间】：2012-07-20 12:22:54
【问题描述】：

我正在使用 chrome 浏览器在本地运行 html5 画布网页。出于调试目的，我正在使用 console.log 尝试跟踪动画中的对象像素位置，该位置每秒发生 60 帧。但问题是，当我运行网页时它工作正常，直到我打开 javascript 控制台并看到我的位置被打印得如此之快以至于开发控制台只是冻结，页面仍然运行但我无法做任何调试，比如 switch在控制台等不同选项卡之间，我必须关闭页面并重新启动它，问题很快就会再次发生。

我还使用内置工具来执行 javascript CPU 配置文件收集，以查看它在日志记录上花费了多少资源，结果它只占运行时间的 0.01%，这显然不应该是问题，但我的猜测是即使它只花费很少的时间来执行此操作，实际上正忙于更新 UI 上的数字的控制台也是冻结页面的原因。（我应该提一下，我仍然可以很好地与页面交互，但即使关闭控制台，我也无法对控制台执行任何操作）

这在chrome浏览器上正常吗？任何修复或建议？谢谢

【问题讨论】：

在调试时尝试以低于 60fps 的速度运行？

标签： javascript google-chrome logging console

【解决方案1】：

我的建议是，在调试时，以每秒 60 个项目运行其他不会向控制台发送垃圾邮件的东西。当您尝试运行此代码时会发生同样的问题： for (var i = 0; i < 99999;/*This will spam the console*/ i++) { console.log(i); } 每秒向控制台发送 60 次垃圾邮件具有相同的效果，会冻结屏幕。尝试在控制台中每秒或什至两次打印第二个变量，这样您就可以缩小范围并修复错误。如果您不想让控制台崩溃，这可能是最安全的方法。

我希望这会有所帮助！ :)

【讨论】：

【解决方案2】：

是的，我会避免向控制台发送垃圾邮件。根据我的经验，您可以记录大量数据，例如包含数万个项目的数组，但您不能过于频繁地调用日志函数，否则开发工具会在它运行时冻结重绘。

因此，考虑到上述情况，我建议将您的多个日志调用组合在一个对象或数组中。例如，如果您有一个将运行很多次的循环，并且内部有 5-6 个日志调用，则通过将数据添加到数组或具有井名键的对象将这些日志调用组合在一起，并将该对象记录在循环结束。

如果您必须每 100 毫秒记录一次以上超过几秒钟，我建议将日志调用分组。

【讨论】：

甚至还有console.group 系列函数，在这里可以提供帮助。