以爲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中勾上：