如何调试挂起浏览器的JavaScript？

Question

我正在开发一个体积庞大的丰富网页JavaScript应用程序.由于某种原因,最近的更改导致它随机挂起浏览器.

我怎样才能缩小问题所在？由于浏览器没有响应,我没有看到任何错误,也无法Break on next使用FireBug.

Answer 1

您应该使用调试控制台日志,而不是对代码进行评论.

您应该使用console.log()大多数现代浏览器提供的功能,或者如果您使用不支持它的浏览器则模拟它.

每次调用时console.log('sometext'),将使用指定的文本创建浏览器调试控制台中的日志条目,通常后跟实际时间.

您应该在应用程序流的每个关键部分之前设置一个日志条目,然后越来越多,直到找到未调用的日志.这意味着该日志之前的代码挂起了浏览器.

您还可以编写具有附加功能的个人日志功能,例如某个特定变量的状态,或包含程序流程更详细方面的对象等.

例

console.log('step 1');

while(1) {}

console.log('step 2');

无限循环将暂停程序,但您仍然可以在程序暂停之前查看记录程序流的控制台日志.

因此,在此示例中,您将不会在控制台日志中看到"步骤2",但您将看到"步骤1".这意味着程序在步骤1和步骤2之间停止.

然后,您可以在两个步骤之间的代码中添加其他控制台日志,以深入搜索问题,直到找到它为止.

Answer 2

您可以debugger;在JS代码中的任何位置添加手动设置断点.它将暂停执行并允许您恢复/检查代码(Firebug/FF).

Firebug Wiki页面:http://getfirebug.com/wiki/index.php/Debugger; _keyword

Answer 3

我很惊讶这还没有得到妥善回答,而且投票最多的回答基本上是"把控制台日志放到各处,直到你搞清楚"这不是真正的解决方案,特别是对于更大的应用程序,除非你真的想花钱你所有的时间复制粘贴"控制台日志".

无论如何,你需要的只是debugger;已经提到过的人,但没有真正解释如何使用它:

在chrome(以及大多数其他浏览器)中,debugger;将暂停执行,将您带到开发控制台,并向左显示当前正在执行的代码,在右侧显示堆栈跟踪.在控制台的右上角有一些像按钮一样的箭头.第一个是"恢复脚本执行".我们想要的是下一个"跨越下一个函数调用".

基本上,您需要做的就是将调试器放在代码中的任何位置,在您知道页面尚未冻结的位置,然后运行它,然后重复单击"跳过下一个函数调用",它看起来像一个箭头跳过一个圆圈.它将逐行,逐个调用,通过执行脚本直到它挂起/卡在无限循环中.此时,您将能够确切地看到代码被卡住的位置,以及当前范围内的所有变量/值,这可以帮助您理解脚本卡住的原因.

我正在绞尽脑汁试图在我正在研究的一些相当复杂的JS中找到一个悬挂循环,我设法在大约30秒内使用这种方法找到它.

Answer 4

要解决问题,您可以先删除/禁用/注释代码的不同部分,然后将代码缩小到一小部分,以便找到错误.另一种可能性是查看最近提交的不同更改的源代码管理签入历史记录.希望你能理解问题的来源.

Answer 5

今天的浏览器 Firefox/Seamonkey (Ctrl-Shift-I / Debugger / PAUSE-Icon)，Chrome，...通常有一个内置的 JS 调试器，带有 PAUSE 按钮，可以随时工作。只需在循环/CPU 密集型页面上点击它，“调用堆栈”类型的窗格很可能会指向您的问题 - 准备好进一步检查......