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

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

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

Source map就是干这个。

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

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