![214e3b4ca7c5ff76a44e7ea0838e0931.png](https://img-blog.csdnimg.cn/img_convert/214e3b4ca7c5ff76a44e7ea0838e0931.png)
前端的业务越来越庞大,导致我们需要引入的js等静态资源文件的体积也越来越大,不得不使用压缩js文件的方式来提高加载的效率。
编译工具的诞生,极大地方便了我们处理js文件的这一过程,但压缩后的js文件极难阅读,也难以调试,所以就产生了sourcemap这个功能。
webpack开启sourcemap功能可以通过压缩代码的堆栈行、列号定位到源码的具体位置,我们就以webpack为例来看看如何利用sourcemap反向定位线上源码。
![8f31bcaf0338dd6cb4eb1a5ff2fefca9.png](https://img-blog.csdnimg.cn/img_convert/8f31bcaf0338dd6cb4eb1a5ff2fefca9.png)
Webfunny-为程序员的进阶之路添砖加瓦
http://www.webfunny.cn/
SourceMap是一种映射关系。当项目运行后,如果出现错误,我们可以利用sourceMap反向定位到源码。在chrome浏览器里边解析当然是非常强大,也非常方便了,但是我们想对线上的压缩代码进行逆向定位,像这样远程解析就有些难度了。解析工具就是npm:source-map;
![3626d0b6e413d320d1af6fb7fe824043.png](https://img-blog.csdnimg.cn/img_convert/3626d0b6e413d320d1af6fb7fe824043.png)
正常的sourceMap配置如下:
![cf9ae317e3b69eb6cac2cb654dddaab4.png](https://img-blog.csdnimg.cn/img_convert/cf9ae317e3b69eb6cac2cb654dddaab4.png)
SourceMap不同模式的特点(见下表)
le data-draft-node="block" data-draft-type="table" data-size="normal" data-row-style="normal">webpack版本不同,生成source-map的方式也不同,今天我们就以webpack2.0+ 、和webpack4.0+这两个版本来讲讲sourcemap的配置和解析,其他版本没试过,原理相同。
webpack2.0+配置devtool,生成sourceMap
webpack2.0+关于sourceMap的正确配置如下:
![836fa2ac44c2c2e98f338fc8e77cde1c.png](https://img-blog.csdnimg.cn/img_convert/836fa2ac44c2c2e98f338fc8e77cde1c.png)
从webpack的文档上可以看到,只要设置devtool选项就可以了,但是你是无法解析出来,为什么?因为你生成的sourceMap文件中,没有包含sourcesContent这个属性,所以无法解析出源码的内容。
如果你加上 UglifyJSPlugin这个插件以后,并且配置了sourceMap属性后,就能够正常生成带sourcesContent属性的.map文件了。
![3909fa55348239cacc79d1ad463a3d43.png](https://img-blog.csdnimg.cn/img_convert/3909fa55348239cacc79d1ad463a3d43.png)
所以在你想要利用sourceMap反向定位源码的时候,就需要保证你的.map文件包含sourcesContent这个属性就可以了,我们来看看解析的效果:
![4bd9b93da6333e20a49911b17422073c.png](https://img-blog.csdnimg.cn/img_convert/4bd9b93da6333e20a49911b17422073c.png)
就这样,webpack2.0+版本的sourceMap就可以这样解析出来了。
webpack4.0+配置devtool,生成sourceMap
webpack4.0生成souceMap的方式非常简单,先去看webpack的官网,文档非常详细、种类繁多。但是想要通过这些方式对线上压缩过的js代码进行逆向解析,那简直是不可能。当然,webpack的这个配置也不是为了让你去解析线上压缩代码的,在浏览器的devtool里解析解析就好了。废话不多说,进入正题。
第一步、生成生产环境min.js 和 min.js.map文件
生产版的文件要压缩体积,所以必须配置optimization.minimize=true,但是同时也让mim.js.map文件失去了sourcesContent属性,因此无法解析出源代码了。配置如下:
![9b7842b229e6f73cb8bee2c6be71f03d.png](https://img-blog.csdnimg.cn/img_convert/9b7842b229e6f73cb8bee2c6be71f03d.png)
第二步、生成本地环境min.js.map文件
生成本版min.js.map文件,配置optimization.minimize=true,告诉webpack不压缩js代码,这样生成的.min.js.map文件就能够包含最全面的源代码,从而能够反向定位源码了。配置如下:
![60570550cbbf5f2af1abdfa8be05e9d7.png](https://img-blog.csdnimg.cn/img_convert/60570550cbbf5f2af1abdfa8be05e9d7.png)
第三步、解析生产环境min.js.map文件,获得本地环境min.js.map文件的行列号
通过第一次解析生产版的sourceMap文件,可以得到本地版sourceMap文件中源码的位置,我们得到了新的行列号:A、B。为我们下一次解析做准备。
![1a0f2c898db795de721d3940c2403dae.png](https://img-blog.csdnimg.cn/img_convert/1a0f2c898db795de721d3940c2403dae.png)
第四步、根据第三步获得的新行列号A、B,解析真正的源代码
将新的行列号A,B代入到本地版的sourceMap文件中,就可以解析出真正的源代码位置了,结果如下图:
![4bd9b93da6333e20a49911b17422073c.png](https://img-blog.csdnimg.cn/img_convert/4bd9b93da6333e20a49911b17422073c.png)
因为webpack4.0以上生成和解析sourceMap的步骤相对较为复杂,所以很少能够在网上找到真正能够解析成功的文档。
到此,如何利用sourceMap反向定位生产环境的源码位置,就讲解完了,你学会了吗?
想了解更多,欢迎搜索http://www.webfunny.cn/
![656fabbf36c620330cbc21fd7541d182.png](https://img-blog.csdnimg.cn/img_convert/656fabbf36c620330cbc21fd7541d182.png)