文档章节

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

t
 t568b
发布于 2014/06/09 11:37
字数 184
阅读 81
收藏 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
东城
私信 提问
浅谈webpack devtool里的7种SourceMap模式

这篇文章主要介绍了浅谈webpack devtool里的7种SourceMap模式,主要介绍了这7种模式的使用和打包编译后的结果的不同,非常具有实用价值,有兴趣的可以了解一下 我们先来看看文档对这 7 种模式...

前端小攻略
前天
0
0
前端异常监控、上报及js压缩代码定位

最近在研究前端异常监控的问题,对查询的资料做了整理汇总,总体如下 一、前端异常监控方式 1. window.onerror 异常处理 window.onerror 无论是异步还是非异步错误,onerror 都能捕获到运行时...

Keely袁庆玲
2018/08/05
0
0
前端异常监控之 Sentry的部署和使用

由于最近在整理前端异常监控相关内容,所以自己在虚拟机搭建部署了一下Sentry,把搭建过程及一些自己踩得坑整理如下 一、Sentry部署 Sentry搭建有两种方式: 通过Python安装 教程地址 通过D...

Keely袁庆玲
2018/08/16
0
0
如何优雅地查看 JS 错误堆栈?

本文由云+社区发表 在前端,我们经常会通过 事件来捕获未处理的异常。假设捕获了一个异常,上报的堆栈是这个: 这个堆栈,你看得出问题来吗?我们发布到 CDN 的脚本文件,普遍是经过 Uglify...

腾讯云加社区
01/15
0
0
开发者不可不知的 Google Chrome 七大新特性

Google Chrome 在日常生活中扮演的角色不只是一个功能强大的网络浏览器,它内置的 DevTools 同样也是网络开发者进行网络开发的重要工具。 DevTools 在不断的进行版本更新,其中有很多重要的更...

oschina
2014/10/14
11.5K
24

没有更多内容

加载失败,请刷新页面

加载更多

Spring Batch @EnableBatchIntegration 注解

设置一个远程分块任务需要定义一系列的 beans: 一个连接工程来从消息中间件中获得连接,消息中间件包括有(JMS,AMQP 和其他) 一个 MessagingTemplate 来从主向从发送消息,然后再次发送回...

honeymose
24分钟前
0
0
【剑指offer纪念版】--9 斐波那契数列

题目:斐波那契数列 题目:写一个函数,输入n,求斐波那契(Fibonacci)数列的第n项。斐波那契数列的定义如下:  求解 通过求解第10项的调用过程图来分析: package aigorithm;public cla...

细节探索者
28分钟前
0
0
浏览器缓存

HTTP缓存类型 200 from cache:直接从本地缓存获取响应,可细分为from disk cache, from memory cache 304 Not Modified:协商缓存,本地未命中发送校验数据到服务端,如果服务端数据没有改变,则读...

关元
57分钟前
3
0
正则表达式简单使用说明

在Python3里确实简单明了,测试样例如下 # 正则content = 'Hello 1234567 World_This is a Regex Demo'# 贪婪匹配 尽可能多的匹配result = re.match('^He.*(\d+).*Demo$', co......

轻轻的往前走
58分钟前
3
0
多线程创建方式

一、基本概念 进程:就是正在运行的应用程序,进程是线程的集合。 线程:就是进程中的一条执行路径,一个独立的执行单元。 多线程:就是为了提高程序的效率,使用多线程,每个线程互不影响,...

秋至丶枫以落
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部