目前的web静态资源为了减少加载时间和一部分的安全原因,都对js文件进行了合并和压缩，虽然在网页体验上非常不错，但是对于在线js的错误跟踪就显得异常麻烦。
解决思路
对于不要压缩，这点肯定是不能妥协的，用户体验是坚决不能牺牲的，但是能不能从压缩着手呢？答案是肯定的，第一时间，我们应该就会想到sourcemap，在sourcemap上来解决问题
怎么利用sourcemap
深入了解sourcemap映射原理前，最好读一下阮老师的文章《JavaScriptSourceMap详解》。读完之后，我们就大致了解了sourcemap的几个概念，接下来我们具体分析一下
sourcemap文件结构
{
version:3,
file:“out.js”,
sourceRoot:“”,
sources:[“foo.js”,“bar.js”],
names:[“src”,“maps”,“are”,“fun”],
mappings:“AAgBC,SAAQ,CAAEA”
}
mappings里面的数据就是对应位置的映射，需要对mappings里面的各个位置进行分解
分析位置
我们使用vlq库进行分解，获取具体的位置信息
/*
*返回相应的位置信息
*rt[0]:这个位置在（转换后的代码的）的第几列。
*rt[1]:这个位置属于sources属性中的哪一个文件。
*rt[2]:表示这个位置属于转换前代码的第几行。
*rt[3]:表示这个位置属于转换前代码的第几列。
*rt[4]:表示这个位置属于names属性中的哪一个变量。
*/
letrt=vlq.decode(‘AAgBC’);
3.记录完整的映射关系
对于第二步，只是知道每个点位的位置，然后对于全部位置的记录，需要关联整理，可以参考sourcemap-stack库，其中/src/mappingRealPath.js文件下面的mappingSingleFile函数记录关联了全部信息，以便后续使用
4.注意点
根据不同的环境，可能在计算中会有小偏差，所以我们需要修正相应的位置映射。在sourcemap-stack中，/src/mappingRealPath.js文件下面的mapErrorPosition函数进行了位置修正，以便正确获取。
怎么产生sourcemap
如果目前在使用react，vue等框架时，一般都会用到webpack，在webpack打包的时候，是可以生产map文件的
如果是老式项目，一般会用到gulp等工具，这些工具在处理压缩js文件时，也是可以生产map文件
使用工具
下面两种途径，只是提供了界面，映射关系都是依赖sourcemap-stack
目前可以通过sourcemap-site，gitclone下来之后，运行就能打开页面(不再维护)
安装下载vide编辑器，目前已经支持