网上报错，如何定位问题？断点调试？但是此时代码被压缩了，变量名都是a,b,c,d等等，根本就没有什么可看的。如果调试线上的报错能和本地开发时一样就好了。事实上，这是可以做到的。今天分享一下如何优雅调试线上报错：首先，我们准备一段JS代码：这是我随便找的一段JS代码，里面抛出了一个错误。然后使用webpack编译：在index.html中导入构建产品：然后运行一个静态服务器npxhttp-server。浏览器访问，会发现代码确实报错：问题来了，如何定位错误原因？首先，我们可以使用异常断点在抛出异常的地方停止：创建vscode调试配置：检查未捕获的异常，在未捕获的异常处停止：然后开始调试：你会发现代码在抛出异常的地方断了，这就是异常断点的作用。当您不知道在哪里抛出异常时使用它。但是现在代码被压缩了，什么都看不到了：如何直接定位到抛出异常的源码呢？这时候会用到sourcemap，它是用来将编译后的源码映射回源码的：首先要生成sourcemap，这个配置下webpack的devtool可以hidden-source-map:hidden-source-map表示生成sourcemap但不关联。如果你makesource-map，代码是和sourcemap相关联的：在线代码不会这样做。关联sourcemap需要在文件末尾添加//#sourceMappingURL=xxx.js.map。但是现在这个文件是在线的，不能直接修改本地文件。我们可以使用charles的断点功能进行修改：charles默认不代理127.0.0.1请求，我们需要配置hosts：比如我配置了一个www.guangtest.com域名为127.0.0.1。试一试：hosts配置已经生效：那么我们需要安装一个插件SwitchyOmega让charles拦截这个url的请求，但是在这之前我们需要指定一个数据目录，也就是浏览器保存plug的地方-in、history、cookie等数据：如果不指定，每次调试都会创建一个临时数据目录供调试，上次安装的插件就没有了。在chrome应用商店搜索switchyomega：配置代理服务器，这里我的charles是127.0.0.1:8888：然后配置autoswitch，让来自www.guangtest.com的所有请求都通过我们刚刚配置的代理：然后单击应用程序选项。代理模式设置为自动切换，即根据配置的规则自动切换代理：本网页的代理配置为charles后，对应的请求就可以在charles中抓到：接下来就是修改断点处响应内容：点击Proxy>BreakpointSettings在guangtest.com的dist/index.js响应中添加断点：强制刷页面，charles会停止：我们可以修改响应内容，然后点击execute执行修改：我添加了这一行sourcemap的关联：在chromedevtools中可以看到得到的response已经修改了：异常断点现在直接在源代码处断了：然后就可以了直接调试源码，可以通过scope和callstack等信息来定位错误原因：这样我们就完成了在线错误cod对应的源码的直接本地调试电子！案例代码位于：https://github.com/QuarkGluonPlasma/fe-debug-exercize。总结通过sourcemap，我们在调试线上错误的时候可以直接对应本地源码进行断点调试。将在线代码与sourcemap关联起来，可以通过charles断点修改相应的response，添加一行sourceMappingURL=xxx注释。然后在VSCodeDebugger中添加一个异常断点，这样就可以在异常处停止。这样可以快速定位线上错误的原因，体验和本地开发一样！
