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

这个时候，可以使用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调试压缩后代码的更多相关文章

  1. 如何利用Grunt生成对应的Source Map文件,线上代码压缩使用chrome浏览器便于调式

    如何利用Grunt生成对应的Source Map文件,线上代码压缩使用chrome浏览器便于调式 首先我们来说说为何要生成sourceMap文件呢?简单的说,sourceMap是为了压缩后的代码调式提 ...

  2. 安装Ruby、Sass在WebStrom添加Watcher实现编辑scss文件时自动生成.map和压缩后的.css文件

    前言 这段时间一直在看Bootstrap,V3官方直接提供了Less版本的源码,就先将Less学完了,很简单的语法,学习写Demo都是在Webstorm里写的,配置了Watcher自动编译(详见< ...

  3. 前端工具-调试压缩后的JS（Source Map的使用）

    使用 Source Map 可以在 FF 的调试器. Chrome 的 Sources 和 VSCode 中给压缩前的文件下断点,也可以方便定位错误发生的位置(定位到压缩前的文件). 何为 Sourc ...

  4. 调试压缩后的Javascript文件：在 Chrome 和 Safari ，选择“脚本”标签，找到相应的文件，然后点击“{}”图标（pretty print，在面板底部）

  5. 在WebStorm里配置watcher实现编辑less文件时自动生成.map和压缩后的.css文件

    [文件(File)]-[设置(Settings)]-[工具(Tools)]-[File Watchers]-[+]-[Less]打开New Watcher配置界面. https://blog.csdn ...

  6. Source map error

    前端访问接口时火狐浏览器控制台出现了这个问题, source map文件是js文件压缩后,文件的变量名替换对应.变量所在位置等元信息数据文件,一般这种文件和min.js主文件放在同一个目录下. 比如压 ...

  7. Javascript 如何生成Less和Js的Source map

    为什么有Source map CSS和JS脚本正变得越来越复杂,为了解决网络瓶颈,大部分源代码都需要经过编译.合并.压缩才能运用到实际环境中.为了减少网络资源占用,源码一般都会经过以下方式处理: 使用 ...

  8. source map 的原理探究

    线上产品代码一般是编译过的,前端的编译处理过程包括不限于 转译器/Transpilers (Babel, Traceur) 编译器/Compilers (Closure Compiler, TypeS ...

  9. source map

    一.source map 概述 我们在打包中,将开发环境中源代码经过压缩,去空格,babel编译转化,最终可以得到适用于生产环境的项目代码,这样处理后的项目代码和源代码之间差异性很大,会造成无法deb ...

随机推荐

  1. 移动web app开发必备 - Deferred 源码分析

    姊妹篇  移动web app开发必备 - 异步队列 Deferred 在分析Deferred之前我觉得还是有必要把老套的设计模式给搬出来,便于理解源码! 观察者模式 观察者模式( 又叫发布者-订阅者模 ...

  2. 纯CSS照片墙

    css中transform参考CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate 效果图:

  3. Android Fragment---执行Fragment事务

    转载博客:http://blog.csdn.net/think_soft/article/details/7272853 在Activity中使用有关Fragment的添加.删除.替换以及用它们执行其 ...

  4. Python标准库14 数据库 (sqlite3)

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! Python自带一个轻量级的关系型数据库SQLite.这一数据库使用SQL语言.S ...

  5. JS验证控件jQuery Validate

    jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证 ...

  6. Oracle_SQL函数-单行函数

    SQL函数 SQL函数分类 SQL函数主要有两种,分为单行函数.多行函数 单行函数:只对一行进行变换,每行返回一个结果.可以转换数据类型,可以嵌套参数可以是一列或一个值 多行函数:多行函数,每次对一组 ...

  7. 【转】java中注解的使用与实例

    原文:http://www.cnblogs.com/pepcod/archive/2013/02/20/2918719.html java 注解,从名字上看是注释,解释.但功能却不仅仅是注释那么简单. ...

  8. T-SQL：毕业生出门需知系列（八）

    第8课 使用函数处理数据 8.1 函数 [名词]可移植:所编写的代码可以在多个系统上运行 8.2 使用函数 8.2.1 文本处理函数 例1:使用 UPPER() 函数--将文本转换为大写 SELECT ...

  9. 改变word的语言字典

    改变word的语言字典 上周末看论坛有人提出否有方法用代码改变word的语言字典,因为默认的语言会影响现用语言输入的拼写器和其他校对工具.我们的Spire.doc正好支持,正好闲来无事所以我用西班牙语 ...

  10. 软件工程-构建之法 Visual Studio开发平台的安装与单元测试

    一.前言 自从开始了大三下的生活,学校开设一门课程“软件工程”,刚好我们是第一届进行课程改革,不在像以前那样背背概念,考前进行好好突击,然后考试就能过,最后毕业了发现软件工程课程到底我们在其中学习了什 ...