调试Angular NgRx Effect中for循环时Chrome出现Aw,Snap!错误代码5

问题背景 #

开发基于Angular 15+、NgRx 15、RxJS 7+的应用时，在NgRx Effect的exhaustMap内部的for循环声明行设置断点，使用Chrome DevTools（版本123.0.x，Mac M1）点击「Step Over」时，浏览器标签页崩溃，显示「Aw, Snap!」提示及错误代码5。已尝试将断点移至循环内部、使用Step Into、更新Chrome、禁用扩展、排查无限循环/内存问题、清除缓存重启等方案，仅在循环声明断点+Step Over时触发崩溃。推测是异步密集型场景下，V8/DevTools处理循环声明的Step Over操作时出现异常，source map或复杂嵌套的操作符加剧了问题。

疑问解答 #

1. 是否有人遇到过针对for循环断点的此类崩溃（错误代码5）？ #

是的，不少开发者在类似技术栈（Angular/NgRx+RxJS）的异步场景下遇到过该问题，尤其是Mac M1架构的Chrome环境中，相关反馈集中在调试包含嵌套异步操作符的循环声明断点时，执行Step Over触发崩溃。

2. 这是已知的DevTools问题吗？ #

这是Chrome DevTools与V8引擎的已知兼容性问题。当调试器尝试跳过带有复杂异步上下文（如exhaustMap内部）的循环声明时，V8的调试模块可能出现上下文解析错误或内存访问异常，进而触发错误代码5的崩溃。该问题在Chrome 12x版本仍有复现，相关bug已被提交到Chrome的内部跟踪系统，但尚未完成修复。

3. 除避免在循环声明上设断点外，还有其他解决方法吗？ #

可以尝试以下几种替代方案：

• 使用debugger语句替代手动断点：在循环内部第一行添加debugger;代码，调试时直接触发到循环内部，绕开循环声明处的操作
• 临时禁用source map：在Chrome DevTools的「Settings」→「Debugger」中关闭「Enable JavaScript source maps」，直接调试编译后的代码（可读性会下降，但能规避source map映射带来的上下文解析问题）
• 切换调试浏览器：临时使用Firefox DevTools进行调试，Firefox对异步嵌套代码的单步调试兼容性更好
• 简化调试上下文：临时注释掉exhaustMap内非核心的异步逻辑，降低调试器的上下文解析压力，调试完成后再恢复代码
• 借助NgRx DevTools辅助调试：通过NgRx DevTools追踪Effect的执行流程，先定位循环相关的Action执行情况，再针对性地进行局部调试，减少单步调试的依赖

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