chrome导入source map调试生产环境

参考博文：

1. 【Webpack】Source Map详解-CSDN博客

2. Chrome DevTools 为混淆的文件添加 SourceMap - 尹宇星_Kim - 博客园

 

实操：

1. 基于本地源码，使用与线上环境相同的代码分支、构建命令，进行构建。（构建时需开启devtool: 'source-map'配置，具体类型详见参考博文1）

2. 以build或dist目录为根目录，启动一个静态服务，使其能访问到http://127.0.0.1:5500/build/static/js/xxxxx.js.map静态资源；

3. 打开线上网站，F12调出devtool调试工具，切到Source标签，打开网站的混淆js，右键点击Add Source map，把步骤2中的地址填入；

4. 添加成功后，可以在Source标签页的左侧源码树中找到加入进来的SourceMap目录，进入并设置断点，开始调试（实操详见参考博文2）