Source Map调试压缩后代码

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

这个时候，可以使用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

分类: 6.前后端工具

本文转自海角在眼前博客园博客，原文链接： http://www.cnblogs.com/lovesong/p/5851501.html ，如需转载请自行联系原作者

Source Map调试压缩后代码相关推荐

安装Ruby、Sass在WebStrom添加Watcher实现编辑scss文件时自动生成.map和压缩后的.css文件...
前言这段时间一直在看Bootstrap,V3官方直接提供了Less版本的源码,就先将Less学完了,很简单的语法,学习写Demo都是在Webstorm里写的,配置了Watcher自动编译(详见< ...
用 source map 调试生产环境
当我们的应用程序部署到生产环境时,我们发现它与我们在开发环境时的代码不同.我们的代码在构建过程中会以各种方式进行修改和优化. TypeScript 被转译.压缩.生成的 JavaScript 包尽可能 ...
在WebStorm里配置watcher实现编辑less文件时自动生成.map和压缩后的.css文件
1.操作前确定成功安装less,检测方法,在命令行(cmd),输入lessc -v,看到如下类似内容,则说明安装过了. 如果需要生成压缩后的css的文件,则需要通过以下命令安装插件 npm in ...
webpack打包生成的map文件_Webpack的source map
一.webpack中source map是什么目前我们的例子都是在浏览器里运行编译打包后的代码,编译后的代码会把我们的原始代码做压缩整合等操作.这样的代码与原始代码差别非常大,对于我们开发时是没有帮 ...
记录webpack的source map使用详细说明
common.js export const show = () => {console.log(1212121)();document.write('hello webpack 11') } ...
你知道source map如何帮你定位源码么？
大家好,我是若川.今天分享一篇我们经常会忽略的定位原始代码位置原理的文章.文章不长,例子不错,可以先收藏,有空时动手试试. 学习源码系列.年度总结.JS基础系列前言我们知道,代码上线前要经过压缩, ...
webpack：devtool配置中的source map
webpack:devtool配置中的source map 一.功能作用二.配置文件三.source map格式 (1)source-map (2)inline-source-map (3)hid ...
html 混淆压缩,前端代码的精简、混淆、压缩和编译
几个基本概念在网站部署前,我们往往要对前端的代码进行发布,我这里说的"发布",指的就是精简.混淆.压缩.编译等. 1.精简: 目的是减少代码体积,减小网络传输时间,提高页面响应. ...
ts 打开sourcemap_调试篇 – Source Map - Node.js 调试指南
4.1.1 什么是 Source Map? 对于 Source Map,想必大家并不陌生,在前端开发中通常要压缩 JavaScript,CSS,以减小体积,加快网页显示.但带来的后果是如果出现错误,就 ...

Source Map调试压缩后代码

Source Map调试压缩后代码相关推荐

最新文章

热门文章