页面卡死时应立即用devtools的pause按钮中断执行，通过call stack定位源头函数，并结合scope、watch和事件断点排查无限循环、同步计算、死递归及dom重排等问题。
页面卡死时，往往不是某一行报错，而是 JavaScript 进入了无限循环、同步阻塞操作（如超长计算、死递归），或被大量微任务/宏任务拖慢。此时靠 console.log 或错误堆栈很难定位，必须用浏览器断点调试主动“抓”住正在执行的代码。
立即中断运行并查看当前执行点
卡死 ≠ 无响应，只要页面还能响应开发者工具操作，就可强制中断：
- 打开 DevTools（F12 或 Ctrl+Shift+I），切换到 Sources 面板
- 点击顶部工具栏的 Pause script execution 按钮（图标为 ▶️⏸️，或按 F8）
- 如果页面正卡在某个循环或同步函数中，执行会立刻暂停，并高亮显示当前正在运行的那行代码
- 此时查看右侧 Call Stack 面板，就能看到完整的调用链——最上面一层就是卡死的源头函数
检查高频触发逻辑和长耗时函数
卡死常发生在以下场景，需重点排查：
-
无限循环：比如
while(true)、for(;;)、或循环终止条件永远不满足（如i++写成i--却在i > 0条件下运行） -
同步密集计算：如遍历百万级数组做复杂运算、未节流的
resize/scroll处理函数 - 递归无出口：缺少 base case 或参数未收敛，导致调用栈爆炸（此时可能直接白屏或报 “Maximum call stack size exceeded”）
- DOM 强制重排/重绘连击：在循环中反复读写同一元素的 offset/scroll/client 系列属性
利用事件与异步断点辅助定位
若卡死由用户交互或异步逻辑引发，可配合更精准的断点类型：
- 在 Event Listener Breakpoints 中勾选
click、input、scroll等，触发后立刻暂停，看是否进入可疑函数 - 在 XHR/Fetch Breakpoints 添加关键字（如
/api/），确认卡死是否发生在请求回调里（例如回调中又触发了同步重渲染） - 对疑似函数开头加
debugger，或在 Sources 中手动在函数第一行设断点，再复现操作
观察作用域与变量状态
暂停后不要只看代码行，要结合上下文判断异常：
- 打开 Scope 面板，检查循环变量（如
i、index）是否异常增长或卡在固定值 - 在 Watch 栏添加表达式，如
performance.now()或document.querySelectorAll('.item').length，确认是否随时间持续飙升 - 若调用栈过深，点击某一层可跳转到对应源码，快速识别是业务代码还是框架内部逻辑（必要时可在框架代码处右键 → Blackbox content script 忽略）
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
