背景
在前端开发过程中，项目代码在上线前通常会经过打包工具处理，生成压缩代码。若线上代码出现问题，直接查看压缩代码无法有效定位问题。
这篇文章将介绍如何使用 Chrome 开发者工具调试打包后的源代码，帮助开发者快速定位并解决问题。
1. chrome设置
使用打包后的代码，打开开发者工具时，是加载压缩后的文件。Chrome 实际上会运行缩减后的代码，但 Sources 面板将显示转换后的代码。
如何调试源代码进行调试？
1.1 启用sourcemap设置
在浏览器控制台的Settings > Preferences > Sources，启用JavaScript source maps和CSS source maps。
如下图所示：
1.2 添加sourcemap文件
浏览器默认支持的预处理主要工具有：
需在 Sources 面板中使用源代码映射，前提要求如下：
- 仅使用可以生成源映射的预处理器
- 验证网络服务器可以访问生成的sourcemap文件
- 将上述的sourcemap文件添加到
Sources对应的文件中
2. 具体案例
前端项目使用打包工具，没有开启sourcemap，线上出现问题本地无法复现，如何定位问题。
案例：
任意项目，在一处使用错误的语法进行模拟。例如：created生命周期中使用不存在的变量
created(){
obj.map(item=>{})
}
使用webpack打包：
mode: "production",
devtool: false,
mode: production表示采用生产模式打包，会启用代码压缩等插件devtool: false表示不生成source-map文件
打线上包,得到构建产物。
正常流程：
- 使用
http-server启动本地服务，运行打包项目 - 本地生成sourcemap,导入sourcemap文件定位文件
2.1 本地模拟线上环境
本地模拟服务，使用http-server,一行代码启动一个静态的 HTTP 服务器：
npx http-server ./dist
点击任意一个访问。
出现报错，可以看到，打包都是以chunk-xxx为名称的源文件。
点击跳转：
2.2 本地生成sourcemap
生成后的文件，找到对应的sourcemap文件：
使用http-server再启动一个服务，直接可以访问192.168.21.244:8082/static/js/chunk-03b9dbfb.e87fc4e9.js.map，得到文件内容。
最重要的一步，在第一步点击文件后，点击右键Add source map添加sourcemap文件。
文件地址为刚启动服务的文件访问地址192.168.21.244:8082/static/js/chunk-03b9dbfb.e87fc4e9.js.map
左侧出现，webpack对应的文件路径：
添加完成后，再返回控制台，即可看到报错的文件。
点击跳转，找到对应的文件的具体位置。
2.3 接口问题模拟
可以使用替换内容，模拟接口返回内容
可以进行替换，如果不需要点击左方取消的按钮
3. 其他思路
还有没有是不是可以不用添加sourcemap找到问题的，当然有，这种只是一种查找问题的思路。 下面介绍其他的方式：
- 比如项目中集成错误监控，那还要调啥，直接看就好了
- 打包时，可以修改chunk名称，比如以文件路径生成chunk名称，就只直观的看到了
总结
最后总结一下，整体步骤如下：
-
启用 Sourcemap 设置：
- 在 Chrome 开发者工具的设置中启用
JavaScript source maps和CSS source maps。
- 在 Chrome 开发者工具的设置中启用
-
添加 Sourcemap 文件：
- 确保使用可以生成源映射的预处理器，并在构建过程中生成并访问 sourcemap 文件。
-
本地模拟线上环境：
- 使用
http-server本地启动静态服务，模拟线上环境。 - 添加 sourcemap 文件，帮助开发者在浏览器中查看还原后的源代码。
- 使用
-
定位并解决问题：
- 在出现报错时，通过添加 sourcemap 文件，可以在 Chrome 开发者工具中准确定位源文件及出错位置。
- 可以进行接口替换，模拟不同的接口返回内容，进一步排查接口问题。
还可以通过集成错误监控工具或修改打包时的 chunk 名称来直观定位问题。
如有错误，请指正O^O!
