如何查找JavaScript代码中的无限循环漏洞？

1. 性能面板直接定位（首选） #

不需要修改任何代码，1分钟内就能定位到问题位置：

• 打开Chrome/Edge浏览器的开发者工具（F12/Ctrl+Shift+I），切换到*性能(Performance)*面板
• 勾选「JavaScript 样本」选项，点击录制按钮，等待10~30秒（确保异常CPU占用逻辑已经运行）后停止录制
• 查看录制结果的*主线程(Main)*时间线：无间断、持续占据主线程的长条JS执行记录，就是无限循环的逻辑所在
• 点击该长条，下方调用栈面板会直接展示对应的函数名、源码文件和行号

如果是未清理的setInterval、递归requestAnimationFrame这类间隔性循环，会看到时间线上重复出现的短执行块，配合持续上升的堆内存曲线也能快速定位。

2. 调试器暂停一键命中运行中的循环 #

如果已经能稳定复现CPU高占用的状态，用这个方法更快：

• 打开开发者工具的*源代码(Sources)*面板
• 等待页面CPU占比升高后，点击面板左上角的「暂停脚本执行」按钮（|| 图标）
• 调试器会直接停在当前正在执行的代码行，绝大多数情况直接命中无限循环逻辑
• 如果暂停在浏览器内置代码上，多按几次「单步跳过」按钮，很快就能跳转到业务代码位置

3. 全局超时检测脚本捕获偶发问题 #

如果问题偶发不好手动抓取，可以在所有业务JS加载前注入以下全局检测代码：

// 单函数执行超过1秒就判定为异常，可根据业务情况调整阈值
const MAX_EXECUTION_TIME = 1000;

const originalSetTimeout = window.setTimeout;
const originalSetInterval = window.setInterval;
const originalRequestAnimationFrame = window.requestAnimationFrame;

function wrapExecFunction(fn) {
  return function(...args) {
    const startTime = Date.now();
    const result = fn.apply(this, args);
    const execDuration = Date.now() - startTime;
    if (execDuration > MAX_EXECUTION_TIME) {
      console.warn(`检测到长执行任务，耗时${execDuration}ms，调用栈：\n`, new Error().stack);
    }
    return result;
  }
}

// 拦截所有常见异步入口，添加执行耗时检测
window.setTimeout = (fn, delay, ...args) => originalSetTimeout(wrapExecFunction(fn), delay, ...args);
window.setInterval = (fn, delay, ...args) => originalSetInterval(wrapExecFunction(fn), delay, ...args);
window.requestAnimationFrame = (fn) => originalRequestAnimationFrame(wrapExecFunction(fn));

注入后只要出现超过阈值的长执行任务，控制台会自动打印完整调用栈，不需要手动在各个位置加console.log。

4. 内存快照对比定位关联内存泄漏的循环 #

如果同时伴随内存持续上涨，可以配合内存面板定位：

• 打开开发者工具的*内存(Memory)*面板，页面加载完成后拍摄第一个堆快照（Heap Snapshot）
• 等待页面运行3~5分钟，内存明显上涨后拍摄第二个堆快照
• 选中第二个快照，将对比对象设置为「快照1」，查看新增的对象引用
• 重复出现的自定义类、未销毁的DOM引用、闭包变量的持有者，大概率是循环逻辑中持续创建的内容，顺着引用链就能找到对应的执行函数

以上所有方法都不需要提前预判问题范围，解决了手动加日志覆盖不全的问题。

内容的提问来源于stack exchange，提问作者klm123