如何在谷歌浏览器中调试无响应的页面？答案

【问题标题】：How to debug unresponsive page in Google Chrome?如何在谷歌浏览器中调试无响应的页面？
【发布时间】：2012-04-19 14:53:12
【问题描述】：

我有一个相当复杂的 javascript 应用程序（它不使用外部框架），用户目前正在测试它（几千行）。我收到报告说用户在 Google Chrome 中看到弹出窗口说：

以下页面已无响应。你可以等他们响应或杀死他们。

他们报告说，继续使用该应用的唯一方法是打开一个新的 Chrome 窗口，但消息每隔几分钟就会出现一次，并且只有在他们尝试转到新页面时才会出现。他们特别说他们点击进入新页面，当前页面永远不会改变，他们只会看到旋转加载图标一分钟，直到弹出窗口出现。

奇怪的是，我已经在这些用户遇到问题的 Chrome (18) 的确切版本上进行了广泛的测试，而且我没有发现任何问题。我有点难过，现在不知道在哪里看，因为我无法复制它，关于在哪里看的任何想法至少尝试找出可能导致该错误的原因？

【问题讨论】：

尝试运行 SpeedTracer for Chrome 以获取任何长时间运行的进程的配置文件，然后调查那些内存泄漏、繁重计算等。developers.google.com/web-toolkit/speedtracer
您可以尝试做一个堆快照，看看是否有一些对象正在消耗越来越多的内存。此外，尝试找出代码中需要更多计算时间的部分，然后对它们进行注释或使用 setTimeout，直到找到问题的确切位置
知道为什么其中任何一个都不会以同样的方式影响每个人吗？
Chromes Profiles / Profiler 允许您让现有代码运行基准测试，以查看哪些逻辑消耗的资源最多。这很可能是罪魁祸首。+

【解决方案1】：

在无响应期间使用 chrome javascript 调试器暂停（中断正在运行的代码）。这需要一些时间，但它应该在运行时间过长的中间中断。然后，您可以使用调试器控件四处走动，看看什么是不必要的循环。

【讨论】：

【解决方案2】：

我知道这是一个老问题，但我也遇到过这个问题，我给你的最佳建议如下：

完全关闭 Chrome，然后将“--enable-logging”添加到您的 chrome 快捷方式以使用该标志启动它，您甚至可以添加“--enable-logging --v=1”以启用详细日志记录。

我知道，插入断点不是一个选项，因为它位于一个新选项卡中，在我启动控制台之前就崩溃了。但是，通过启用日志记录，控制台会被写入 chrome 数据目录中的文件（“C:\Users\username\AppData\Local\Google\Chrome\User Data”）

我希望有一天这能帮助像我一样的人！ :D

【讨论】：

【解决方案3】：

我今天有一个页面有一些错误的 JS（无限循环），我无法通过键盘快捷键或右键单击（Chrome 60.0.3112.113）打开开发工具。能够通过：

也许这会对某人有所帮助！此外，chrome 调试器会在浏览器选项卡中保留断点（对于相同的 JS），因此如果我无法确定导致错误的确切原因，我的断点仍将存在于新选项卡中！

【讨论】：