昆仑的山头

随着webApp的流行，前端应用越来越复杂，js脚本越来越多，为了提高页面页面响应速度，我们常常需要对js进行压缩、整合
但是经过压缩后的js，调试起来会特别麻烦，基本是对于chrome/ff这些“现代”浏览器，如果压缩过的js出了错误，报的错误也是让你无所适从
之前的做法是，在开发环境不回js做压缩、整合，而且在上线前最后确认的verify以及线上环境对js做压缩，这么做虽然可以避免上面的问题，但又是js的加载顺序对功能会有影响，所以还是不能完全模拟线上的情况
更何况，线上可能还会出问题的
这里介绍一种可以调试压缩脚本的方法，就是所谓“Source Map”，大概的原理是这样的：
在使用compiler.jar压缩js的时候，同时生成一个“.map”文件，对压缩前的js诸如变量之类的内容做索引，页面加载min版的js，可以通过对应的.map文件找到压缩前的js文件，如果这是js再出错，可以直接将错误定位到压缩前的js文件内
怎么样，听起来是不是很棒
好，下面就详细讲一下用法
比如页面上有一个js文件：t.js，下面对t.js做压缩

1
2
3
4
5

java -jar /usr/local/compiler.jar \
	--js t.js \
	--create_source_map t.js.map \
	--source_map_format=V3 \
	--js_output_file t.min.js

其中，“create_source_map”就是生成.map文件的名字，“source_map_format”是source map的版本
完了页面，在页面调用t.min.js，故意制造个错误，这是你会发现，页面上的错误指示~~~还TM和以前一样

呵呵，因为还有两步我们还没做：
1. 手动往t.min.js结尾处加上下面这行，告诉浏览器.map文件所在的位置：
//@ sourceMappingURL=t.js.map

2. 开启浏览器的source map支持，悲剧的是，目前只有chrome支持source map，具体未知是在：
“开发者工具” -> “设置”(右下角齿轮) -> 勾选“Enable source maps”

ok了，这是再试试，一旦js报错，点击错误，就能定位到压缩前的js文件上
并且，在开发者工具里的“Sources”标签里，还能找到压缩前的js源码

————-
参考：http://www.csdn.net/article/2013-01-25/2813953-JavaScript-Source-Map
ps：关于.map文件内部各项内容的含义，我并没有仔细研究~~~反正只要设置正确，chrome就可以把错误定位到源js文件