浏览器报错时应优先分析调用栈：若同一函数连续出现数十次，即为无限递归；若函数交替出现则属循环触发；含JSON.stringify等则疑为循环引用；再结合日志、断点及Blackbox功能精准定位。
这个错误出现时，浏览器控制台会直接显示完整报错信息，并附带一长串函数调用路径（stack trace）。关键不是看报错文字本身，而是立刻盯住那一长串调用栈——它已经把问题源头“指给你看了”。
看控制台报错堆栈，快速锁定高频重复函数
打开开发者工具（F12），切换到 Console 面板，点开报错详情。重点观察调用栈中反复出现的函数名，尤其是连续出现 5 次以上的函数：
- 如果看到 同一个函数名连续出现几十甚至上百行，基本就是无限递归，比如
render()→render()→render()… - 如果是一串不同但逻辑关联的函数交替出现，比如
handleClick→updateData→emitChange→handleClick，说明存在事件或方法循环触发 - 若调用栈里夹杂
JSON.stringify、deepClone、toJSON等，大概率是循环引用对象导致深拷贝死循环
检查常见高危场景代码模式
不用全盘扫代码，直接搜索这几类典型写法：
-
递归函数是否漏了 return 或终止条件写错：比如
if (n === 0) return;写成if (n === 0) return false;，后续逻辑仍执行；或用===判断浮点数/递减步长不匹配基线 - Vue/React 组件中是否存在响应式副作用循环：watch 监听某值 → 触发赋值 → 触发新 watch → 再次赋值
-
事件绑定是否形成闭环：例如
<a onclick="doSomething()"><button onclick="doSomething()">，点击按钮冒泡触发 a 标签再次调用 -
对象/数组是否含循环引用：在控制台打印疑似对象，展开看是否有
circular标记，或手动测试obj.a = obj
加日志或断点，验证调用路径
在疑似函数开头插入简单跟踪语句：
立即学习“Java免费学习笔记（深入）”；
console.log('enter render, depth:', ++window.depth || (window.depth = 1));
刷新运行，看控制台数字是否一路飙升到上万——这比看堆栈更直观确认是否失控。也可在该行打 debugger 断点，手动单步几次，观察参数变化趋势是否趋近退出条件。
借助 Chrome 的 “Blackbox” 和 “Async Stack Trace” 功能
如果调用栈被大量第三方库帧淹没，右键无关帧（如 node_modules 中的）→ Blackbox script，让 DevTools 忽略它们，聚焦你自己的代码部分。开启 Async stack traces（设置 → Preferences → Sources）还能看清 Promise 链、setTimeout 回调引发的隐式调用链，对排查异步递归很有帮助。
