JavaScript Source Map

参考：Source Map

Source Map是什么

Source Map 一个独立的map文件，与源码在同一个目录下
它是信息文件，里面储存着位置信息，转换后的代码的每一个位置，所对应的转换前的位置

有什么用

大部分源码（尤其是各种函数库和框架）都要经过转换，才能投入生产环境。
常见的源码转换，主要是以下三种情况

• 压缩
• 多个文件合并，减少HTTP请求数
• 其他语言编译成JavaScript，例如CoffeeScript

开发环境debug时，提示可以直接定位到你哪行源码有问题
但是转换后的代码报错，转换后的代码行数变少或变量名已经换，此时报错信息就让人一头雾水，不知道错哪里了。

Source Map就是解决这个问题的，有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码。

开启

Chrome浏览器支持这个功能。在Developer Tools的Setting设置中，确认选中"Enable source maps"。

在转换后的代码尾部，加上一行就可以了

//@ sourceMappingURL=/path/to/file.js.map

如何生成Source map

最常用的方法是使用Google的Closure编译器。