JavaScript的Source Map (sourceURL / sourceMappingURL)

最新推荐文章于 2022-08-01 10:05:43 发布

weixin_34176694

最新推荐文章于 2022-08-01 10:05:43 发布

阅读量4k

点赞数 3

文章标签： javascript json 爬虫 ViewUI

原文链接：https://segmentfault.com/a/1190000010238342

版权

本文介绍了JavaScript的Source Map（sourceURL / sourceMappingURL）及其作用，主要用于压缩代码后的调试。Source Map通过映射关系，帮助开发者在错误发生时定位原始代码的位置，而非压缩后的代码位置。文章详细阐述了Source Map的启用、生成、格式以及mappings属性、VLQ编码等内容，是理解Source Map的重要参考资料。

摘要由CSDN通过智能技术生成

这两天完成了自己的个人任务，准备学习一下前辈们的经验教训，在项目组的文档中发现了一个要求注意的点，如下：

Js文件的开头可以加上类似“//@ sourceURL=jquery.extends.js”，方便调试的时候找到代码。

过去在编写代码的时候从未遇到过这个东西，发现后查了一下，知道了这个东西其实是JavaScript的Source Map（源映射） (sourceURL / sourceMappingURL)。那么他是用来干嘛用的呢?
简单的说，源映射是用来为压缩后的代码调试提供方便的。我们知道，为了提高性能，很多网站都会将js代码先压缩再上线，上线之后一旦js出现了问题报错时浏览器只会显示错误位置在已压缩文件中的位置，但是压缩后的js文件也就两三行的样子，每一行都有上万的字符，这个时候报错说第一行有问题，我们怎么能看出来在第一行的哪个位置有问题呢？这样浏览器的错误提示对我们调试而言并没有什么意义。纵使我们费力的找出了报错所在的位置，这个时候我们看到的也是如下样子的代码：

getJSON:function(e,t,n){return b.get(e,t,n,"json")}

但是参数e、t、n是干嘛用的我们也不知道（压缩会把变量等缩写了，从而不能见名知意）。这个时候源映射就可以起到作用了。源映射(Source Map)是一种数据格式，它存储了源代码和生成代码之间的位置映射关系源映射一般使用 .map 扩展名，源映射本质是一个 JSON 文本文档，其 MIME 类型也一般设为 application/json。
我们先直击使用方法再去详解Source Map。那么如何使用源映射呢？
就像文档中所说的那样：在js文件中加上类似于//@ sourceURL=jquery.extends.js的代码，浏览器(最新版 Chrome、Firefox 和 Edge 均支持)就会加载 jquery.extends.js 并自动计算代码的实际位置。在 Chrome 开发面板(按F12打开)的设置(按F1打开)中，可以通过勾选 "Enable Source Maps" 选项来设置是否需要加载源映射。源映射本身并不会影响代码的执行，只会在定位错误位置时被使用。

图片描述