以为js或css压缩后很差调试？你应该认识一下source map了

感受本身out了，居然昨天才认识 source map 。

虽然之前也见过诸如： bootstrap.css.map 、jquery.min.map 这种文件，可是都没放在心上，反正老子用不到，不是吗？

直到最近使用less的时候（没错，我就是这么out，之前也是以为less、sass这种东西根本用不到），编译成css以后，出现了一个后缀名是.map的文件，同时也在纠结在浏览器该怎么调试less，不禁得就把这两个疑问关联在了一块儿。

.map文件就是用来调试的

随着js或者css文件的规模不断变大，可能咱们须要压缩或者编译（好比使用了less）以后才能发布，好比jQuery 1.9的源码，压缩前是252KB，压缩后是32KB。压缩以后的代码在出错的时候，错误提示根本没法定位到具体的位置，好比提示你第一行代码出错了，可压缩后的代码就只有一行，那这个提示有什么意义呢？

这时候，source map就出现个了，就是那个.map后缀的文件。

使用方法是，在压缩或者编译之后的文件的任意位置加入：

/*# sourceMappingURL=test.css.map */

其中，test.css.map 是.map文件相对于这个文件的路径。

这样，在调试的时候就能够定位到具体的位置了。

普通用户浏览的时候，并不会加载.map文件

因此，并不须要担忧产生多余的http请求，只有在开启了控制台（F12）的时候，才会加载.map文件，不过在控制台的network面板中是找不到这个请求记录的，并且只会加载.map，并不会加载压缩前的文件或者less文件。

浏览器支持

听说只有chrome和火狐浏览器支持.map文件，我用的是chrome的，默认是开启的，若是没开启，请在控制台的setting中勾上：