JavaScript Source Map 简介

简介: 为了提高性能,JavaScript通常需要通过压缩和合并之后才能投入生产环境。如果使用CoffeeScript,还需要进行编译。

为了提高性能,JavaScript通常需要通过压缩和合并之后才能投入生产环境。如果使用CoffeeScript,还需要进行编译。

这就意味着,编辑的代码和运行的代码不一样。JavaScript的解释器的报错信息的行数是针对生成的代码的,行数与原来的代码不对应,内部变量也改了名字。于是调试的时候我们就会感到茫然无措。

如果转换代码的时候,我们能记录原始代码和生成的代码行数间对应的关系,那该有多好啊。

Source map就是干这个。

有了它,调试的时候将直接显示原始代码,而不是生成的代码。多方便!

image.png

使用Source map

生成

使用Google家的closure compiler

java -jar compiler.jar \

    --js script.js \

    --create_source_map ./script-min.js.map \

    --source_map_format=V3 \

    --js_output_file script-min.js


格式

Source map格式简单明了:

{

version : 3,

 file:"out.js",

sourceRoot : "",

 sources: ["foo.js", "bar.js"],

 names: ["src", "maps", "are", "fun"],

 mappings:"AAgBC,SAAQ,CAAEA"

}

version是 Source map 的版本,file是生成的文件,sourceRoot是原始代码所在的目录,留空表示同一目录。sources是原始代码,names是转换前的所有变量名和属性名。mappings决定原始文件和生成文件是如何对应的,看上去不太直白,因为它使用了Base64 VQL编码。

启用

只要在生成的代码的尾部加上指向source map文件位置的一行就可以了:

//@ sourceMappingURL=/path/to/script-min.js.map

如果你喜欢在代码尾部加注释,你也可以为生成的JavaScript指定一个特别的header:

X-SourceMap: /path/to/script-min.js.map


调试

新版的Google Chrome的Developer tools和Firefox的Firebug都支持。其中,Firefox是默认开启的。

相关文章
|
11天前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可以是任意类型且有序,与对象的字符串或符号键不同;Set存储唯一值,无重复。两者皆可迭代,支持for...of循环。Map有get、set、has、delete等方法,Set有add、delete、has方法。示例展示了Map和Set的基本操作。
19 3
|
1月前
|
JavaScript 前端开发 索引
问js的forEach和map的区别
JavaScript中的`forEach`和`map`都是数组迭代方法。`forEach`遍历数组但不修改原数组,无返回值;它接受回调函数处理元素。`map`则遍历数组并返回新数组,新数组元素为回调函数处理后的结果。两者都接收元素、索引和数组作为回调函数参数。
21 7
|
2月前
|
JavaScript 前端开发
解释 JavaScript 中的`map()`、`filter()`和`reduce()`方法的用途。
解释 JavaScript 中的`map()`、`filter()`和`reduce()`方法的用途。
21 1
|
4月前
|
JavaScript 前端开发 定位技术
JavaScript 中如何代理 Set(集合) 和 Map(映射)
JavaScript 中如何代理 Set(集合) 和 Map(映射)
50 0
|
4月前
|
JSON JavaScript 前端开发
Danfo.js专题 - Danfo.js与Dnotebook简介与入门
Danfo.js专题 - Danfo.js与Dnotebook简介与入门
47 0
|
3月前
|
消息中间件 Web App开发 JavaScript
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
78 0
|
22天前
|
存储 JavaScript 前端开发
JavaScript高级主题:JavaScript 中的 Map 和 Set 是什么?它们有什么区别?
JavaScript的ES6引入了Map和Set数据结构。Map用于存储键值对,适合通过键进行查找,而Set则存储唯一值,无键且不支持键查找。两者在性能上表现出色,尤其在频繁的写入删除操作中。选择使用哪个取决于具体应用场景:键值对需求选Map,独特值集合则选Set。
20 2
|
2月前
|
存储 JavaScript
JS中Map对象与object的区别
JS中Map对象与object的区别
|
2月前
|
机器学习/深度学习 人工智能 前端开发
【前端】JavaScript简介
【前端】JavaScript简介
19 0
|
2月前
|
存储 JavaScript 前端开发
javascript中的Map和Set
javascript中的Map和Set