前言
不管是我们Vue还是React项目，线上都是通过Webpack或Vite编译压缩之后的代码，比如：
React项目： 
Vue项目：
这就导致了一个问题：一旦线上出现bug时，首先我们不知道问题是哪个组件抛出的，或者不确定是否因为环境差异，数据不同导致测试环境没法重现，只能通过Chrome devtools的异常断点或者事件监听器断点来调试，而且在React中是合成事件，没法直接定位到代码事件中，效率太低！
怎么样能直接映射到源码进行调试呢？这时候就需要用到sourcemap了，它的工作流程是这样的：
我们只需要开启合适的sourcemap配置，就可以直接通过目标代码映射回真实组件。
React项目
我们React这边的webpack配置是通过yarn eject过的，其中有这样一行关于sourcemap的配置。
默认是source-map，打包之后它会把xxx.map和xxx.js文件都暴露在生产环境中，访问线上代码可以直接看到源码，这并不合理。我们需要把它改为hidden-source-map，即不关联sourcemap，需要通过一定的手段才能映射回源码。
修改完后本机测试一下，可以构建出.map文件。
由于项目是通过流水线来构建，所以需要把配置中的sourcemap开关打开，让它构建.map文件，一起上传到生产环境中（这一步取决你公司的配置是放在项目还是流水线配置中）。
跑完流水后，我们来演示一下在测试环境中如何映射到源码。
方法一：添加源代码映射
在网络文件中找到需要调试的代码，由于没有进行分包，全部都在main里面，右键可以添加源代码映射的路径。
那map文件的路径怎么找呢？通过main.xxx.js路径后面加个.map后缀就行了，可以看到mappings、sources、sourceContent这些字段，它们是sourcemap与源码的映射规则。
把这个链接输入到刚才映射地址中
此时可以在左侧的文件栏中看到多出来这几个目录，就是打包之前的源码了!
此时Command+P找到对应文件进行断点调试即可
这种是最简单直接的线上方式，但是它有个缺点是你刷新页面之后就没了，下一次还需要重复上面的操作。有没有办法解决这个问题呢？答案是有的。
方法二：通过本地文件替换网络请求资源，持久化配置
在源代码面板中找到这个"替换（overrides）"，创建一个本地的文件夹用于存放资源，我这里是debugger-folder。接着在main.xxx.js文件中右键，选择替换内容。
此时你可以编辑这个文件，我们在文件最后一行加入sourcemap映射路径并保存。此时刷新页面，浏览器首先会优先使用这个本地的资源。
刷新之后一样可以看到成功映射了组件源代码，接着正常调试即可。
如果不再需要用到这个资源替换，直接清除或者关闭即可。
Vue项目
我们需要在Vue项目部署的时候手动配置一下sourcemap。这里以micro-frontends-invoice(我们的其中一个微前端项目)为例，在vue.config.js中开启生产环境soucemap，并且设置为hidden-source-map。
接着运行命令构建到测试环境中，这里找到micro-invoice微前端项目，按照前面讲的（两种方式都可）添加映射路径!
回车之后左侧面板会出现micro-invoice-[name]的组件源代码目录，这就是实际的vue template代码了，找到对应的list组件测试一下，可以正常断点。
总结
不管是Vue还是React，都需要在对应的构建配置中开启hiddle-source-map，才能生成.map文件，部署的时候上传到对应的项目中，线上就可以通过直接添加源代码映射来调试，或者将网络请求资源替换为本地文件，达到持久化的作用。
实际上还有方法三，就是通过Charles抓包修改xxx.js文件，给它后面添加上//# sourceMappingURL=xxxx.map直接映射到本机的sourcemap文件，可以在VsCode中直接调试线上代码，但配置比较麻烦，上面的方法够用了，重点在于能够调试线上代码即可。