sourcemap

Last Updated:

2022-08-12

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错误,快速定位异常 前端工程化学习笔记