使用一堆 javascript 调试页面的方法答案

【问题标题】：Approach on debugging page with a bunch of javascript使用一堆 javascript 调试页面的方法
【发布时间】：2017-05-06 04:02:40
【问题描述】：

我有一个更一般的问题，关于您通常如何使用大量 javascript（主要是第三方插件）和事件观察器来调试页面以发现有问题的行，在我的情况下，这会导致 Chrome 崩溃或 Firefox 崩溃冻结？

我有一个包含许多外部依赖项的登录页面：常见的嫌疑人，如 jquery 和 bootstrap，还有许多附加组件，如滑块、调整大小的观察者。当我重新调整大小时，Firefox 会出现微冻结，Chrome 会崩溃。这来自任何代码块（很可能是某些观察者）。

页面崩溃后，我丢失了所有开发工具数据。 Firebug 对脚本执行没有时间控制，如果我从断点开始，我必须放置几十个。

您通常如何确定导致问题的脚本以及代码块？

【问题讨论】：

【解决方案1】：

如果我从断点开始，我必须放置几十个。

我曾经在使用 Internet Explorer 4/5 时经常遇到这个问题。这些浏览器对内存的使用非常差，几乎任何重大错误都会导致浏览器崩溃。甚至在它出现之前，浏览器调试工具就比 Chrome 的调试工具差得多。那我做了什么？可悲的是，debugger 和 console.log。

您必须一些想法或想法，关于问题出在哪里，所以只要从您确定代码正常工作的地方开始并添加console.log（如果您仍然可以看到直到崩溃的日志）或debugger（如果你不能）到崩溃途中的每个点。最终，您将无法完成其中一个调试语句，然后您就会知道问题出在该语句和前一个语句之间。

我知道，这是一种非常蹩脚的调试方式，而且正如你所说，你将不得不添加很多调试语句，但有时这就是你所拥有的。

【讨论】：

我完全理解，我看到它就像编织的鱼线。我以前遇到过这些情况，但通常脚本执行会完全冻结浏览器，然后我至少知道哪个文件包含脚本。现在事情很棘手，只是导致浏览器有点卡顿（至少在我的机器上）
请记住，您不必一次添加所有调试语句。如果您认为问题可能出在五个不同的地方，只需为每个地方添加一个调试语句。然后，一旦您确定了应归咎于哪个地方，您就可以添加更重的调试语句来确定它发生的确切位置。这样您就不必预先添加每个调试语句。
我正在考虑逐个切割功能，直到问题消失并放回最后一件事。这样我会先定义脚本文件。