source map

从源码转换开始说起

js脚本现在变得越来越复杂,大部分源码(尤其是各种函数可和框架)都要经过转换,才能投入生产环境。常见的源码转换,主要有以下三种:

  • 压缩减少体积。比如jquery 1.9的源码,压缩前是252KB,压缩后是32KB。
  • 多个文件合并,减少http请求数。
  • 其他语言编译成javascript。最常见的例子就是CoffeeScript(还有各大框架的CommonJS源码)。

这三种情况都使得实际运行的代码不同于开发代码,debug变得困难重重。

通常js解释器会告诉你第几行第几列出错了,但是这对于转换后的代码毫无用处,因为所有的变量都改了名字。你看到报错信息,毫无头绪,根本不知道他所在的位置。这,就是source map想要解决的问题。

什么是sourcemap

source map是一个信息文件,里面存储着位置信息,也即是说,转换后的代码的每一个位置,所对应的转换前的位置。有了它,出错的时候,debug工具将直接显示原始源代码,而不是转换后的代码。目前,暂时只有Chrome浏览器支持这个功能。在Developer Tools的Setting设置中,确认选择“Enable source maps”

如何启用source map

只要在转换后的代码尾部,加上一行就行了

//@ sourceMappingURL=/path/to/sourcemapfile

map文件可以放在网络上,也可以放在本地文件系统