线上产品代码一般是编译过的,前端的编译处理过程包括不限于
转译器/Transpilers (Babel, Traceur)
编译器/Compilers (Closure Compiler, TypeScript, CoffeeScript, Dart)
压缩/Minifiers (UglifyJS)
这里提及的都是可生成source map 的操作。
经过这一系列骚气的操作后,发布到线上的代码已经面目全非,对带宽友好了,但对开发者调试并不友好。于是就有了 source map。顾名思义,他是源码的映射,可以将压缩后的代码再对应回未压缩的源码。使得我们在调试线上产品时,就好像在调试开发环境的代码。
来看一个工作的示例准备两个测试文件,一个 log.js 里包含一个输出内容到控制台的函数:
log.js
function sayHello(name) { if (name.length > 2) { name = name.substr(0, 1) + '...' } console.log('hello,', name) }