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

这个时候，可以使用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. ASP.NET MVC5 网站开发实践(二) Member区域 - 添加文章

    上次把架构做好了,这次做添加文章.添加文章涉及附件的上传管理及富文本编辑器的使用,早添加文章时一并实现. 要点: 富文本编辑器采用KindEditor.功能很强大,国人开发,LGPL开源,自己人的好东 ...

  2. Deffered.js的实现原理

    在艾伦的推荐下,看了一个日本人写的延时加载库,非常轻量,写的很棒.作为我的源码学习的第一编. 在认真看了两天之后,才看懂它的实现原理,我下面把通自己的理解,进行了精简.只程现原理,方便日后的回顾.&l ...

  3. beego上传文件

    html代码: <form id="fform" method="POST" enctype="multipart/form-data" ...

  4. C# 在word中查找及替换文本

    C# 在word中查找及替换文本 在处理word文档时,很多人都会用到查找和替换功能.尤其是在处理庞大的word文档的时候,Microsoft word的查找替换功能就变得尤为重要,它不仅能让我们轻易 ...

  5. 安装infer整个过程

    日期:2015-06-26 孟起  15:43:25 大神.. 孟起  15:43:38 我是不是照着这个安装 HelloWorld  15:45:05 直接找二进制文件安卓就行 孟起  15:46: ...

  6. canvas实现拖动页面时显示窗口视频

    简介 当前主流的视频网站目前有不少新鲜好玩的功能,最明显的莫过于小视频的显示--当视频不在当前视口范围 时,会在右下角用一个小窗口来显示当前的视频,而且可以拖拽. 今晚心血来潮,起了动手试试的念头.我 ...

  7. 求一个数组的最大子数组（C/C++实现）

    最大子数组:要求相连,加起来的和最大的子数组就是一个数组的最大子数组.编译环境:VS2012,顺便说句其实我是C#程序员,我只是喜欢学C++. 其实这是个半成品,还有些BUG在里面,不过总体的思路是这 ...

  8. 详解用Navicat工具将Excel中的数据导入Mysql中

    第一步:首先需要准备好有数据的excel: 第二步:选择"文件"->"另存为",保存为"CSV(逗号分隔)(*.csv)",将exce ...

  9. Switch to strategy

    namespace RefactoringLib.SwitchToStrategy.Before { public class ClientCode { public decimal Calculat ...

  10. 实现一个纵向排列的 ListBox ，并具有操作按钮

    需要实现的效果如下: 要想把 ListBox 的内容纵向显示很简单,只需把 ListBox 的内容控件为 WrapPanel 就可以了: <ListBox.ItemsPanel> < ...