如何在浏览器中调试内存泄漏,无限循环和执行Javascript？

Question

在浏览器中检查javascript中无限循环的推荐方法是什么？假设我打开Chrome并且它崩溃了,有没有办法断点或以某种方式确定发生的位置？

然后我想知道,如何在浏览器中看到正在执行的脚本的运行列表(比如我丢失的一些计时器正在运行并且它正在减慢速度)？最好是在Chrome/Safari中,但Firefox也可以使用.

我一直使用元素检查器/控制台,我只是没有想出有效调试这三件事的方法.

谢谢!

Answer 1

1.内存泄漏

• Microsoft JavaScript内存泄漏检测程序(IE)
• 滴灌(IE)
• 泄漏监视器(FF)

2.无限循环

我不完全理解在复杂的无限循环遍布数百个函数的情况下浏览器可以指向您的内容.当然,我喜欢浏览器查明简单的循环,比如某些函数不会返回15秒.但至少我们有一些东西,浏览器告诉你a)脚本运行缓慢,b)调用了哪些函数以及每个函数花了多少时间.此外,您可以设置断点并观察它是否一步一步运行.

3.监控定时器和间隔

打开WebKit的时间轴面板,点击"记录"并监控您可能想知道的关于每个计时器和间隔的所有内容.如果您不使用WebKit,您可以自己编写简单的代码:

_setTimeout = setTimeout
setTimeout = function(fn, time) {
  var timeout = _setTimeout(function() {
    console.log('Timeout #' + timeout + ' fired on ' + (fn.name || 'anonymous'))
    fn()
  }, time)
  return timeout
}

通常我只是在超时/间隔触发时使document.title闪烁.

4.通用代码性能

• 适用于Google Chrome的Speed Tracer
• 适用于Firefox的Firebug Paint事件
• Javascript性能监视器 - 一个小的信息框,可以帮助您监视FPS和内存分配

Answer 2

对于崩溃浏览器的脚本,您可以在代码崩溃之前在代码中的任何位置插入断点.然后只需手动单步执行所有代码,直到崩溃为止.如果在浏览器崩溃之前无法插入断点,则可以添加"调试器"; 代码中的某处.这基本上是在代码中的那一点插入断点.

查看从JS运行的内容的一种方法是对其进行分析.所有开发工具都配有分析器.只需在页面加载后对代码进行几秒钟的分析,它就会让您一瞥仍在运行的内容.如果您使用的是jQuery等库,您会看到很多内部jQuery函数和一些自己的函数.查看占用最多运行时间(每次调用)的函数,并尝试最小化它们的使用,因为这些是最昂贵的.

如果你在"非线程"JS中有一个无限循环,那么你的页面根本不会完全加载.Firefox应该告诉你脚本需要很长时间才能加载并让你调试它(这会显示它在哪里).对于"线程"JS(从回调或setTimeout运行的JS),您可以使用分析器跟踪它们.