使用 Source Map 可以在 FF 的调试器、 Chrome 的 Sources 和 VSCode 中给压缩前的文件下断点，也可以方便定位错误发生的位置（定位到压缩前的文件）。

何为 Source Map

Source Map 可以将编译、语法转换或压缩后的代码与源码进行对应，从而方便调试。

JavaScript Source Map 详解 - 阮一峰的网络日志

Source Map Revision 3 Proposal - Google 文档

Grunt 中使用

配置 sourceMap 为 true 即可（注意低版本 grunt-contrib-uglify 配置方法不一样）

https://github.com/gruntjs/grunt-contrib-uglify

前端工具-调试压缩后的JS（Source Map的使用）的更多相关文章

  1. Source Map调试压缩后代码

    在前端开发过程中,无论是样式还是脚本,运行时的文件可能是压缩后的,那这个时候调试起来就很麻烦. 这个时候,可以使用Source Map文件来优化调试,Source Map是一个信息文件,里面储存着原代 ...

  2. 当碰到需要调试打包后的js

    在react中经常开发碰到不能热更中进行调试的,如IE之类的 这个时候我们就需要打包才能运行看到效果, 但是往往每次打包都需要很长的时间: 这个时候我们就可以直接找到打包后的文件,直接在改文件中修改: ...

  3. 前端工具--利用Adblock Plus阻止js执行

    今天遇到个问题:需要阻止页面某个js的运行 效果达到

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

  5. Source map error

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

  6. js的map文件

    什么是source map文件 source map文件是js文件压缩后,文件的变量名替换对应.变量所在位置等元信息数据文件,一般这种文件和min.js主文件放在同一个目录下. 比如压缩后原变量是ma ...

  7. 第五十八篇：webpack的Source Map

    好家伙,Source Map没听过 1.什么是Source Map? 字面意义上来看应该是个好东西 Source Map 就是一个信息文件,里面储存着位置信息. 也就是说,Source Map 文件中 ...

  8. chrome调试找不到 XXXX.min.map 原因及解决办法

    什么是source map文件. source map文件是js文件压缩后,文件的变量名替换对应.变量所在位置等元信息数据文件,一般这种文件和min.js主文件放在同一个目录下. 比如压缩后原变量是m ...

  9. Fundebug微信小程序BUG监控服务支持Source Map

    摘要: 自动还原真实出错位置,快速修复BUG. Source Map功能 微信小程序的Source Map功能目前只在 iOS 6.7.2 及以上版本支持. 微信小程序在打包时,会将所有 js 代码打 ...

随机推荐

  1. SQLServer中的Merge使用

    Merge DML 作用: 数据同步 数据转换 基于源表对目标表做Insert,Update,Delete操作 Merge关键字的一些限制 使用Merge关键字只能更新一个表 源表中不能有重复的记录 ...

  2. python基础-2 编码转换 pycharm 配置 运算符 基本数据类型int str list tupple dict for循环 enumerate序列方法 range和xrange

    1.编码转换 unicode 可以编译成 UTF-U GBK 即 #!/usr/bin/env python # -*- coding:utf-8 -*- a = '测试字符' #默认是utf-8 a ...

  3. Tomcat控制台

    一般在安装完成Tomcat之后,我们需要验证tomcat是否安装成功,在浏览器的url中输入:http://127.0.0.1:8080/,就会进入如下的页面(表示安装成功): 在上面的左侧顶部,有一 ...

  4. 《剑指offer》面试题18 树的子结构 Java版

    (输入两棵二叉树A和B,判断B是不是A的子结构.补充下,根据书中的代码来看,子结构的定义并不包括叶子节点下的null,也就是说只要B的存在数字的结构存在于A中就行,那么如果B是null树,那么就不属于 ...

  5. java 继承extends 的相关知识点

    java只有单继承,不能多继承 子类只能继承父类的非私有成员(成员变量.成员方法) 子类不能继承父类的构造方法,但是可以通过super关键字访问父类的构造方法 继承 要体现子类父类的 继承关系, ”i ...

  6. 入门级，关于下载设置wamp的安装

    将wamp下载下来,分清楚自己电脑是32还是64位,在安装之前,首先确定你电脑里安装了vc++ 的运行库,不然安装wamp后会出现提醒缺少XXX文件,但是注意,在安装vc运行库的时候,请搜索集合包类的 ...

  7. 使用absolute实现的后台布局，包括小图标定位，菜单弹出等完整版

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. win32 socket 编程（六）——UDP

    基于 UDP 无连接的 socket 编程 一.服务器端操作流程 1.1加载套接字库(WSAStartup) 1.2 创建套接字  (socket) 1.3将创建的套接字绑定到一个本地地址和端口上   ...

  9. （转）nginx+redis实现接入层高性能缓存技术

    转自:https://blog.csdn.net/phil_code/article/details/79154271 1. OpenRestyOpenResty是一个基于 Nginx与 Lua的高性 ...

  10. thinkphp 关联

    原理:https://www.kancloud.cn/laowu199/e_dev/448632 示例数据库 hasOne:有一个,加上主谓语应该是 ,A 有一个 BhasMany:有很多,A 有很多 ...