在前端開(kāi)發(fā)過(guò)程中，無(wú)論是樣式還是腳本，運(yùn)行時(shí)的文件可能是壓縮后的，那這個(gè)時(shí)候調(diào)試起來(lái)就很麻煩。

這個(gè)時(shí)候，可以使用Source Map文件來(lái)優(yōu)化調(diào)試，Source Map是一個(gè)信息文件，里面儲(chǔ)存著原代碼位置信息（轉(zhuǎn)換后的代碼的每一個(gè)位置，所對(duì)應(yīng)的轉(zhuǎn)換前的位置），這樣你調(diào)試時(shí)看到的就是原文件代碼。

PS：如果原文件在最后一行有sourceMappingURL的設(shè)置：

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

那么這個(gè)文件就支持source map調(diào)試。

sass

sass可以生成SourceMap文件，只需要在相關(guān)的config.rb文件加上：

sourcemap = true

這樣Chrome控制臺(tái)工具看到的就是原sass文件代碼：

webpack

在我的《webpack學(xué)習(xí)總結(jié)》中，已經(jīng)有說(shuō)明source map調(diào)試方法，可以到這里看看。

?

總結(jié)

source map文件的生成應(yīng)該是構(gòu)建工具相關(guān)，需要時(shí)查看工具配置方法，就行了。

?

參考文獻(xiàn)

http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html

分類:?6.前后端工具
本文轉(zhuǎn)自 海角在眼前 博客園博客，原文鏈接：?http://www.cnblogs.com/lovesong/p/5851501.html? ，如需轉(zhuǎn)載請(qǐng)自行聯(lián)系原作者

總結(jié)

以上是生活随笔為你收集整理的Source Map调试压缩后代码的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。