sourcemap原理(什么是sourcemap)

JavaScript Source Map 详解

要想使用，记得浏览器的开发者工具的设置里头，开启source map

压缩后的代码，尾部会有

//@ sourceMappingURL=jquery.min.map

一个典型sourcemap大致样子

{  
 version : 3,  
 file: "out.js",  
 sourceRoot : "",  
 sources: ["foo.js", "bar.js"],  
 names: ["src", "maps", "are", "fun"],  
 mappings: "AAgBC,SAAQ,CAAEA"  
 }

整个文件就是一个JavaScript对象，可以被解释器读取。它主要有以下几个属性：

　　- version：Source map的版本，目前为3。

　　- file：转换后的文件名。

　　- sourceRoot：转换前的文件所在的目录。如果与转换前的文件在同一目录，该项为空。

　　- sources：转换前的文件。该项是一个数组，表示可能存在多个文件合并。

　　- names：转换前的所有变量名和属性名。

　　- mappings：记录位置信息的字符串，下文详细介绍。

webpack项目，sourcemap的配置选项

webpack官方文档配置说明 webpack source map 一般是下面几种的组合产生的各种结果 1.'eval': 是否使用eval 执行模块代码，单独使用该模式在编译文件末尾使用'eval + sourceURL' 来映射编译文件与源文件，具体内容不映射 ， 信息错误时不能定位到源文件的具体位置， 而是定位编译文件的位置(也就是说只会定位到错误文件，不会定位到代码具体位置) 该模式不会生成'sourceMap'文件 2.'source-map': 产生.map文件 3.'cheap': 不包含列信息也不包含loader的sourcemap 4.'module': 没有经过loader加工的sourcemap 比如开发时候使用const ,对应'sourcemap'看的的依旧是const,而不是转换成es5的var。即，不带Module，就看不到源码const，只能看到转换后的var。 5.'inline':将.map作为DataURI嵌入，不单独生成.map文件（这个配置项比较少见） 6.'hidden' - 代码不引入source-map，手动引入 7.'nosources' - 无法在控制台查看源文件

开发模式建议配置: module-cheap-eval-source-map

生产模式建议配置: module-cheap-source-map(记得生成的map不部署到线上或者线上做一个权限控制，例如ip限制，只有开发人员才会返回)

生产环境下不建议使用source map 但是在这种情况下，线上报错我们应该如何来调试？

'答：' 一般情况下公司内应该是有前端监控系统的，一旦报错，可以把 sourcemap 上传到这个监控系统里面。 但是不要把 sourcemap 文件和静态资源的 cdn 一起发布到线上就好了 解决思路方式'hidden-sourcemap 配合 sentry' hidden-source-map 模式 在这个模式下，我们在开发工具中看不到 Source Map 的效果，但是它也确实生成了 Source Map 文件， 这就跟 jQuery 一样，虽然生成了 Source Map 文件，但是代码中并没有引用对应的 Source Map 文件， 开发者可以自己选择使用。

生产模式下，没有监控系统咋办。

【此方法暂未实践过】建议，生产模式生成map文件。但是部署的时候，此map文件不部署上去。 然后线上有问题，打开chrome的开发者工具那边，在压缩后的js脚本处，鼠标右键，选择"add source map" PS. 因为以前一种思路是map正常部署到线上，但是，这个对map文件的网络请求，部署的服务器会做一个权限控制。可能只有特定ip段才能正常返回map请求； 顺着这个思路，如果部署的服务器没有权限控制。那么map不部署到线上(但是线上压缩后的代码，依然有//@ sourceMappingURL=url1，然后直接用抓包软件fiddler代理掉线上的map文件(url1)，返回本地的一个map文件(生成的map不部署到线上，但在开发者本地有一份)。

当然，上面说的这些方法，本人都还没实践过，只是本人自己的一个思路。

出于安全考虑 Chrome 隐藏了 source map 的请求，需要通过 net-log 来查询

工程化--前端日志监测系统

# 异常定位(1)--生产环境通过SourceMap还原压缩后JavaScript错误，快速定位异常 前端工程化学习笔记