使用Chrome开发者工具如何快速定位JavaScript卡死或死循环的位置？

核心操作步骤 #

• 提前打开Chrome开发者工具（快捷键F12/Ctrl+Shift+I/Cmd+Opt+I），切换到「源(Sources)」面板，再复现JS卡死的操作场景
• 页面卡死瞬间点击面板左上角的暂停脚本执行按钮，或直接按下快捷键F8，DevTools会直接中断当前正在运行的JS线程，自动跳转到当前执行的代码行
• 查看右侧「调用栈(Call Stack)」面板，从上到下浏览调用链路，跳过浏览器内置的原生API调用，就能直接定位到业务代码中导致无限循环、无返回调用的具体位置
• 如果首次暂停停在非业务代码层，多次点击步出函数调用按钮（快捷键Shift+F11）即可跳出嵌套调用，回到业务代码执行位置

补充说明 #

如果是执行逻辑中存在大量同步阻塞任务导致的假死，也可以通过DevTools「性能(Performance)」面板录制执行过程，录制完成后查看火焰图中占比最高的JS执行任务，点击对应任务就能直接跳转到关联的代码位置。

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