JavaScript Source Map 简介

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

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

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

Source map就是干这个。

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

JavaScript Source Map 简介_第1张图片

使用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是默认开启的。

CoffeeScript

CoffeeScript 1.6.1以上版本支持 source map。只需在编译时加上-m参数即可。

你可能感兴趣的:(coffeescript,调试,javascript)