调试普通JavaScript程序时调试器打开未知'SOURCE'文件如何解决

问题原因 #

该问题由React DevTools浏览器扩展的全局注入逻辑导致：

• React DevTools会在所有页面的全局作用域注入window.__REACT_DEVTOOLS_GLOBAL_HOOK__对象，同时插入监听代码判断当前页面是否运行React，就算你调试的项目完全没有用到React，这段注入代码依然存在于页面执行上下文中。
• 你进行单步调试操作时，调试器会遍历当前执行栈的所有待执行代码，这段自动注入的代码就会被触发，调试器就会打开对应的临时SOURCE文件。

解决方案 #

• 临时禁用React DevTools扩展：调试非React项目时，在扩展管理页关闭React DevTools，重启当前页面标签后重新启动调试即可恢复正常。
• 将注入脚本加入调试器忽略列表：在弹出的SOURCE文件标签上右键，选择「添加到忽略列表」，后续调试器会自动跳过这段注入代码的执行，不会再弹出对应文件。
• 更新React DevTools扩展：部分旧版本的React DevTools存在注入逻辑bug，升级到最新正式版即可修复该问题。

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