使用 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. ubuntu系统下navicat 试用到期解决方案

    作者:python技术人 博客:https://www.cnblogs.com/lpdeboke 1.直接删除 /home目录下的 .navicat文件夹(此文件夹隐藏),如果你是64位,文件夹名称可 ...

  2. IDEA创建SpringBoot+maven项目

    1.创建项目: 2.选择spring Initializr,注意要选择jdk,使用默认的spring.io这样就不用再去写pom文件了 3.输入项目名称: 4.选择Spring Web 5.目录结构:

  3. [2019杭电多校第三场][hdu6609]Find the answer(线段树)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6609 大致题意是求出每个位置i最小需要将几个位置j变为0(j<i),使得$\sum_{j=1}^ ...

  4. $.ajax()方法详解（网上引用）

    jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(p ...

  5. SCAU 2015 GDCPC team_training1

    A: http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1525 题意:前两段都是废话 , 然后给出一个 p( p(a) ) = p(a) 的公式给你 ...

  6. OPECV的配置

    因为要做一点道路是别的东西,所以想用到OPENCV的一些东西.在网上找了一些OPENCCSHARP的代码,但是这方面的书籍或者资料还是不是特别的多,所以我就觉得可能还不是很好.主要的原因还是因为自己的 ...

  7. python 简易小爬虫

    此脚本用于爬站点的下载链接,最终输出到txt文档中. 如果是没有防盗链设置的站点,也可以使用脚本中的下载函数尝试直接下载. 本脚本是为了短期特定目标设计的,如果使用它爬其它特征的资源链接需自行修改配置 ...

  8. 本地主机访问远程linux系统服务器上的jupyter notebook

    1,机器情况:服务器 centos python环境已经配置好了,在虚拟环境下安装了anaconda 并且在里面安装了jupyter notebook 2,主机是 windows     ipytho ...

  9. sudo、su、suid

    sudo 是一种权限管理机制,管理员可以授权普通用户去执行 root 权限的操作,而不需要知道 root 的密码.sudo 以其他用户身份执行命令,默认以root身份执行.配置文件/etc/sudoe ...

  10. glDrawArrays 和 glDrawElements

     在openGL中,所有图形都是通过分解成三角形的方式进行绘制.(一个矩形分解成两个三角形进行绘制) glDrawArrays 和 glDrawElements 的作用都是从一个数据数组中提取数据渲染 ...