线上调试代码，试试SourceMap？

线上调试代码，试试 SourceMap？

背景

大家有没有过在开发环境代理调试的时候，只能调试打包之后的代码，而不是调试源码？

那是因为没正确使用 sourceMap。

SourceMap

sourceMap 有什么作用？🤔

sourceMap 用于映射编译后的代码与源码，这样如果编译后的代码出错了，可以很快速的定位到源文件的位置。

举个栗子 🌰

umi 的项目在开发环境默认的 sourceMap 为 cheap-module-source-map。

我们把它关了，看看编译的资源有什么不一样的：

js 复制代码

// config.ts
devtool: false,

既然 sourceMap 可以快速定位到源码的位置，为了方便，我们在页面上执行个 console.log，看看 log 位置的源代码：

ts 复制代码

console.log('测试 SourceMap')

打印出来发现我们 log 处的源码是编译之后的。

目前不加 `SourceMap` 的结论 😳

不加 sourceMap，页面上的 log 信息是无法精准定位到源码的位置的。

那我们加了呢？

先试试 bigfish 默认的，我们把 config 里的 devtool 删掉。

结果发现还是定位不到源码位置，控制台提示：source map failed to load。

而且文件最后一行已经显示了 sourceMappingURL 的指定文件。

那是为什么？map 文件加载失败了。

仔细看发现它请求的位置是线上环境的 map 文件，请求了 404。

而 umi 在生产环境不会打开 sourceMap（为了防止其他人可以随意在 source 上看到自己的源码）。

奇怪的是我们在 Network 里并没发现请求的 map 文件。

查阅资料发现：

SourceMap 的加载不能从 Network 中看到，而要从 Developer Resources 看到。

打开 Developer Resources：command + shift + p 搜索 Show Developer Resources。

在 Developer Resources 中可以看到 map 文件请求失败：

vbnet 复制代码

ERROR LOADING URL http://xxx.alipay.net/static-assets/.../P_ALARMLABELMANAGEMENT_INDEX.ASYNC.JS.MAP:
HTTP ERROR: STATUS CODE 404, NET::ERR_HTTP_RESPONSE_CODE_FAILURE

用 XSwitch 转发 map 文件行不行？

那我们把这个地址通过 xswitch 代理转发到本地是不是就可以了？

试了下，遗憾的说：不行。

参考资料：zhuanlan.zhihu.com/p/674981525

原因分析：

只有在 DevTools 打开时才会加载 SourceMap（性能优化 & 用户并不需要）
DevTools 也是一种扩展，而扩展是无法拦截另一个扩展的请求的（安全性问题）
SourceMap 的加载不能从 Network 中看到而要从 Developer Resources 看到（这也是故意的设计）

基于以上信息，Chrome Extension 主要还是用于折腾 Content 区域，而不是希望你 Hack 浏览器。总之很遗憾，我们不能通过 XSwitch 这样的插件，把 SourceMap 文件的请求地址转发到正确的位置。

解决方案：使用不生成新 map 文件的 SourceMap 类型

目前看我们只能使用不生成新 map 文件 的 sourceMap 类型了。

因为 sourceMap 的类型有很多，以下是不会生成新 map 文件的类型对比：

类型	构建速度	调试精度	推荐环境
`eval`	最快	低	快速开发
`eval-cheap-source-map`	快	行级别	开发环境
`eval-cheap-module-source-map`	较快	行级别（含 Loader）	开发环境（推荐）
`eval-source-map`	慢	精确	精确调试
`inline-source-map`	慢	精确	特殊需求
`false`	最快	无	生产环境

AI 推荐我们开发环境用 eval-cheap-module-source-map。

配置如下：

ts 复制代码

devtool: 'eval-cheap-module-source-map',

验证结果：

✅ 使用 eval-cheap-module-source-map 确实可以定位到源码了！

控制台的 log 信息直接指向了源文件：useProtableProps.tsx:76，而不是编译后的代码。

加了 SourceMap 的结论 🤓

在线上代理的方法上使用默认的 bigfish 的 devtool 值做不到定位源码，我们使用了 eval-cheap-module-source-map，可以在开发环境定位到源码位置，方便调试。

总结 👀

建议大家设置 devtool：

开发环境 ：eval-cheap-module-source-map
生产环境 ：false（为了代码安全）

typescript 复制代码

devtool: process.env.NODE_ENV === 'development' ? 'eval-cheap-module-source-map' : false,

又可以开心地 ✍️ 代码了！

线上调试代码，试试SourceMap？