当Javascript进入无限循环和递归调用时如何调试？

Question

当您处于无限循环或递归调用中时，基本上浏览器会停止响应任何内容（无论是在 Chrome 上还是在 FF 上）。您看不到日志，无法进入调试器，甚至无法打开控制台本身。浏览器只是冻结了。这太烦人了。看来我什么也做不了，只能坐在这里挠头……任何人都可以阐明如何解决这个问题吗？

Answer 1

您可以尝试的另一个技巧是打开 Chrome 中的 Web 开发人员工具，并在浏览器明显挂起时尝试点击“暂停”。然后它应该在当前执行的行处中断。通过一些走出去，你应该能弄清楚这件事的真相。 假设您知道（或怀疑）发生无限循环的函数，您可以添加如下代码：

var calls = 0;
function iSuspectToBeLoopingInfititely() {
  calls += 1;
  if (calls > 100) { debugger; }
}

一旦该方法被调用 100 次，这将停止 Chrome 中的 JavaScript 调试器。
注意：如果您确实打开了开发人员工具窗口，Chrome 只会因 

debugger;

调用而中断。

Answer 2

Pause on caught exceptions

的错误。您可以在 den dev 工具的

Sources

选项卡下找到该选项。要显示并启用该复选框，请单击最后一个图标：

启用此功能后，调试器会在每个捕获的异常上暂停。

Answer 3

Answer 4

debugger

开始，这样执行就会停止，这使得添加 chrome 断点变得更容易。

在 Chrome 开发工具“源”选项卡中单击源文件左侧的代码编号，添加蓝色调试器断点。放置其中几个，您可以使用“源”选项卡破折号右上角的命令按钮来逐步执行这些功能。您甚至可以添加

console.log

项目，这些项目将在您每次单步执行时运行。

此外，请注意，在暂停执行的任何时候，您都可以切换到“控制台”选项卡并键入任何变量或函数的名称，您将获得该变量或函数的当前值。

Answer 5

如果 UI 无限卡住，并且您不知道 JavaScript 引擎在哪个脚本中忙碌，只需单击 DevTools 中的

Pause scriptexecution

按钮（在 Firefox 中不起作用）：

火狐

如果您尝试与冻结的 UI 交互，Firefox 可能还会显示一个横幅。然后您可以单击“调试脚本”来查看正在执行哪个脚本。