前端如何在生产环境快速debug如果生产环境突然出现紧急bug，并且这个bug只有在特定场景下才会出现（复现困难），如何

如果生产环境突然出现紧急bug，并且这个bug只有在特定场景下才会出现（复现困难），如何直接在上产环境快速debug找出问题？

使用浏览器开发者工具debug

在这种情况下断点调试，也许是一个的选择。前端工程化发展至今，大部分的页面代码都会经过打包压缩的处理。就是说页面运行的代码与实际的源码是相差甚远。毕竟代码写出来是给人看的顺便给机器执行。而经过打包处理的代码只需要机器读懂。

设想你将会对下面这样的代码进行断点调试？

当然经过压缩的代码也并不是无法调试，可以通过修改打包配置生成Source Map，方便查看源代码。

Source Map解释：在打包时生成两份代码一份给人阅读（长相接近源码），一份给机器执行（也就是类似上图中的代码）。再通过规定的映射关系，将两份代码联系起来，实现debug的时候调试接近源码的体验。

想了解更多 Source Map 可以看一下阮一峰写的文章 JavaScripte Source Map，还有我关于Source Map的实例：Elastic APM 集成前端监控

巴特这存在一个问题，如果把场景切换回Production环境，你将sourcemap文件一起部署到了服务，也就相当于将网站的源码公开了，即存在安全隐患。

看来得另辟蹊径。

既然传统方式行不通，我们再提高一个维度。能不能像调试本地环境一样调试线上环境？

现代web应用前后端多以http请求的方式与后端交互，基于这一点就可以将一个web应用的请求分为两大类。

如果我们将第1类请求代理到本地，第2类则保持不变依然像后端服务发起请求。也就可以实现本地调试生产环境的可能。事实上这种方式与本地开发已经没有任何区别，且能够适应各种复杂的调试操作（当然，这可是生产环境，别当测试瞎操作了...出了问题概不负责，毕竟请求是实实在在发送到生产环境后端处理的）。

我这边使用Fiddler来作为请求的转发工具。Fiddler有两种的产品类型，建议安装Fiddler Classic功能更加完善，更适合开发者使用。

以下是基本的配置图片：

设置好后，通过在AutoResponder中添加添加正则表达式规则来转发请求。

在浏览器（chrome、edge、firefox）中安装插件 SwitchyOmega 配置代理。更加方便的控制代理开关。

使用：在生产环境中，切换SwitchyOmega插件的情景到fiddler即可。等待页面自动刷新或手动刷新后就可以进行本地代码调试了。