参考: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编译器。