文档章节

使用 SourceMap 来进行压缩后的代码调试

t
 t568b
发布于 2014/06/09 11:37
字数 184
阅读 63
收藏 0
点赞 0
评论 0

Js被压缩之后,调试起来非常困难,SourceMap可以很好的解决这样的调试问题.

本例压缩工具使用nodejs的UglifyJS:

安装移步:

https://github.com/mishoo/UglifyJS

压缩命令:

uglifyjs index.js --source-map index.min.js.map --source-map-root ./ -m -c -o index.min.js

这样source-map文件会生成到和index.min.js同一级目录下。

chrome dev-tools设置, 启用source-map:

刷新页面, 点击dev-tools -> sources , 展开index.min.js所在的目录,就会看到压缩前的js文件。然后在原文件打断点,即可以进行调试。

==================================================================

参考文章:

使用 SourceMap 来进行压缩后的代码调试,以underscore为例

http://www.2fz1.com/?p=565

JavaScript Source Map 详解

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

© 著作权归作者所有

共有 人打赏支持
t

t568b

粉丝 1
博文 1
码字总数 184
作品 0
东城
Parcel v1.7.1 发布,极速零配置 Web 应用打包工具

Parcel v1.7.1 已发布,Parcel 是一款极速、零配置的 Web 应用打包工具。它无需安装插件,开箱即用,使用 worker 进程去启用多核编译,同时有文件系统缓存,即使在重启构建后也能快速再编译。...

王练
04/23
0
0
WebStorm开启Scss的Source Maps功能

本地安装好SCSS后,用WebStorm工具新建一个'*.scss'文件,就会自动提醒是否'Add watcher',直接点击一下就OK啦;前提是要本机安装了Ruby和SCSS才行; 这样WebStorm就会自动新建一个scss的'wa...

渊翼
2014/06/08
0
2
使用VS Code调试MySQL

简介 MySQL调试是探索MySQL源码的基本技能,之前介绍过如何使用LLDB调试MySQL,但命令行操作不便,在编辑器和终端之间来回切换,查看代码不便,本文将介绍在Mac OS中如何使用VS Code进行本地...

爱可生
06/14
0
0
如何利用Grunt生成对应的Source Map文件,线上代码压缩使用

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

tinderfang
2015/03/30
0
0
搭建私有的前端监控服务: sentry

去年底写过一篇简单而完整地体验一遍sentry的sourcemap服务, 是完全基于使用层面的. 由于有需求需要自行搭建sentry, 整理一下搭建流程 版本 8.22.0 参考github release 搭建方式 通过Docker ...

YDJFE
06/15
0
0
react-loadable使用跳坑

官方给react-loadable的定义是: A higher order component for loading components with dynamic imports. 动态路由示例 withLoadable.js Root.js 1 style: security content policy报错 当......

pengqinmm
06/25
0
0
打包工具 Parcel 1.9.4 发布,升级 Typescript 至 2.9

Parcel 1.9.4 已发布,Parcel 是一款极速、零配置的 Web 应用打包工具。它无需安装插件,开箱即用,使用 worker 进程启用多核编译,同时有文件系统缓存,即使在重启构建后也能快速再编译。 ...

局长
07/02
0
0
一篇就让你学会webpack4

webpack 是一个现代 JavaScript 应用程序的静态模块打包器,目前最流行的打包神器,接下来聊一下webpack4 首先webpack4要求node版本在8.5以上,cmd中node -v查看node版本。 1.什么是webpack...

正儿八经的娇娇
05/14
0
0
Typescript 编译配置文件详解

//tsconfig.json指定了用来编译这个项目的根文件和编译选项 { "compilerOptions": { //compilerOptions:编译选项,可以被忽略,这时编译器会使用默认值 "allowSyntheticDefaultImports": true...

创业是喝可乐
05/10
0
0
【javascript】source map

最近在学webpack,遇到一个从未见过的名词source map。便跑去百度了一番,对其有了一些了解。好记性不如烂笔头,在此记录一下,方便以后查询。 一:source map长啥样? 之前下载Jquery的时候...

小草先森
2017/10/26
0
1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

50 行 Python 代码,带你追到最心爱的人

程序员世纪难题 人们一提到程序员第一反应就是:我知道!他们工资很高啊!但大部分都是单身狗,不懂得幽默风趣,只是每天穿格子 polo 衫的宅男一个。甚至程序员自己也这样形容自己:钱多话少...

猫咪编程
9分钟前
0
0
JAVA知识点随心记

1.Switch case具体的支持类型? Q:支持byte、short、char、int基本类型,枚举类型和String类型(JDK7以上支持),四种基本类型的包装类型也支持,但是原因在于触发了自动拆箱,将包装类型拆成了基本...

勤奋的蚂蚁
19分钟前
0
0
NoSQL

一、NoSQL介绍 NoSQL属于非关系型数据,mysql属于关系型数据库。 对于关系型数据库来说,是需要把数据存储到库、表、行、字段里,查询的时候根据条件一行一行地去匹配,当数据量非常大的时候...

人在艹木中
24分钟前
0
0
第17章MySQL主从配置

mysql安装总结 mysql主从准备工作: 准备两台机器,每台机器安装msyql服务,并启动mysql服务 mysql详细安装 1.首先下载二进制免编译的包,下载到/usr/local/src/目录下 2.解压压缩包 3.解压完...

Linux学习笔记
28分钟前
0
0
Redis高可用及分片集群

一、主从复制 使用异步复制 一个服务器可以有多个从服务器 从服务器也可以有自己的从服务器 复制功能不会阻塞主服务器 可以通过服务功能来上主服务器免于持久化操作,由从服务器去执行持久化...

Java大蜗牛
32分钟前
0
0
前端面试题汇总

最近在复习,准备找工作了,特此总结一下前端的相关知识。 1.获取浏览器URL中查询字符的参数: function getQuery(name){    var reg = new RegExp("(^|&)"+name+"=([^&]*)"(&|$));...

凛冬来袭
今天
0
0
可持续发展的学习道路

与其要求别人,不如提升自己 内心渴望进步 经常做出改变现有模式,不断学习 寻找资源,整合资源,不断熟练这种模式 渠道很重要 先打开新世界的航路

狮子狗
今天
0
0
apollox-lua开源项目 示例codepen2

今天在示例上增加了几个功能, 首先添加js array的标准库。 所有js array的方法目前都支持了。 添加查看code模式。 点击查看code可以看到生成的lua代码。默认web模式需要把标准库连接进来, ...

钟元OSS
今天
0
0
javascript性能优化之避免重复工作

javascript最重要也最根本的性能优化标准之一是避免工作,避免工作又包括两点,第一,不做不必要的工作,第二,不做重复的已经完成的工作。第一部分可以通过代码重构完成,第二部分不做重复的...

老韭菜
今天
0
0
缓存穿透、并发和雪崩那些事

0 题记 缓存穿透、缓存并发和缓存雪崩是常见的由于并发量大而导致的缓存问题,本文讲解其产生原因和解决方案。 缓存穿透通常是由恶意攻击或者无意造成的;缓存并发是由设计不足造成的;缓存雪...

Java填坑之路
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部