source-map与源码调试
1. 使用 source map 之前
在 express-react-boilerplate 中,一开始是没有 source map 的, 这导致的结果是, 开发环境下 chrome source 中看到的代码如下:
而我们实际的代码是这样的:
同时,我们还用到了 antd ,我们来看看 antd 的代码:
antd 默认使用的打包版本是 antd/lib
中的代码,我们在其中打断点,调试 antd 的代码。
以上的两张 chrome / source
截图代码,虽然 不是很易读,但是勉强能够阅读调试。
2. 使用 source map 之后
我们通过给 webpack 添加 source map:
之后我们可以看到以下的代码, 我们的代码具备可阅读性并且可调试:
![](https://yes-1-am.gitbook.io/~gitbook/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fyes1am%2FPicBed%2Fmaster%2Fimg%2F20200314114340.png&width=768&dpr=4&quality=100&sign=22a7aabf&sv=1)
当然,此时 antd/lib
的代码还是和之前一样的。
3. 遇到的一次问题
在以上这些情况中,尽管 antd 的代码不是特别可读,但是起码 能看懂一些,所以也没有什么问题。
直到有一天,我负责的组件库中某个组件出现了意料之外的情况,必须要调试这个组件库:
这是一份 完全不可读 的代码,同时由于被压缩,导致 调试也极不方便
组件库的打包配置:
所幸,组件库打包出了 source map 文件,因此我们可以通过加载 source map 来得到可阅读的代码。
首先配置我们 express-react-boilerplate
项目的 webpack:
先安装 source-map-loader, 然后配置如下:
这样配置之后,我们就能看到 可读性且可调试的代码
注意,左侧的 webpack 新增了几行 webpack 目录, 并不在原来的 【webpack .】 中,没有摸透什么原理,因此 建议打开每个 webpack 目录看看是否能找到想看的组件代码
注意 在 webpack.config.js 中:
通过以上的方式,我们就能够正常的调试组件代码了。
Last updated