Source Map调试压缩后代码

本文介绍了在前端开发中如何利用SourceMap文件优化调试过程。通过解析SourceMap的工作原理及配置方法,帮助开发者轻松调试压缩后的代码。文章还具体讲解了在Sass和Webpack等工具中启用SourceMap的方法。

在前端开发过程中,无论是样式还是脚本,运行时的文件可能是压缩后的,那这个时候调试起来就很麻烦。

这个时候,可以使用Source Map文件来优化调试,Source Map是一个信息文件,里面储存着原代码位置信息(转换后的代码的每一个位置,所对应的转换前的位置),这样你调试时看到的就是原文件代码。

PS:如果原文件在最后一行有sourceMappingURL的设置:

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

那么这个文件就支持source map调试。

sass

sass可以生成SourceMap文件,只需要在相关的config.rb文件加上:

sourcemap = true

这样Chrome控制台工具看到的就是原sass文件代码:

webpack

在我的《webpack学习总结》中,已经有说明source map调试方法,可以到这里看看。

 

总结

source map文件的生成应该是构建工具相关,需要时查看工具配置方法,就行了。

 

参考文献

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

Source-map 是一个能够生成和使用源地图格式的开发包。 这个开发包是使用异步模块定义格式编写的,工作在下面的环境中: 现代浏览器支持 ECMAScript 5  内置火狐作为 JSM 文件(after the build) 需要 NodeJS 0.8.X 或更高版本 使用源地图(Consuming a source map) var rawSourceMap = {   version: 3,   file: 'min.js',   names: ['bar', 'baz', 'n'],   sources: ['one.js', 'two.js'],   sourceRoot: 'http://example.com/www/js/',   mappings: 'CAAC,IAAI,IAAM,SAAUA,GAClB,OAAOC,IAAID;CCDb,IAAI,IAAM,SAAUE,GAClB,OAAOA'};var smc = new SourceMapConsumer(rawSourceMap);console.log(smc.sources);// [ 'http://example.com/www/js/one.js',//   'http://example.com/www/js/two.js' ]console.log(smc.originalPositionFor({   line: 2,   column: 28}));// { source: 'http://example.com/www/js/two.js',//   line: 2,//   column: 10,//   name: 'n' }console.log(smc.generatedPositionFor({   source: 'http://example.com/www/js/two.js',   line: 2,   column: 10}));// { line: 2, column: 28 }smc.eachMapping(function (m) {  // ...}); 标签:Source 分享 window._bd_share_config = { "common": { "bdSnsKey": {}, "bdText": "", "bdMini": "2", "bdMiniList": [], "bdPic": "", "bdStyle": "1", "bdSize": "24" }, "share": {} }; with (document)0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' ~(-new Date() / 36e5)];\r\n \r\n \r\n \r\n \r\n \u8f6f\u4ef6\u9996\u9875\r\n \u8f6f\u4ef6\u4e0b\u8f7d\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\nwindow.changyan.api.config({\r\nappid: 'cysXjLKDf', conf: 'prod_33c27aefa42004c9b2c12a759c851039' });
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值