使用 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. airtestUI简单操作

    touch 判断坐标位置 如touch((500, 600), duration=1) swipe 滑动位置 wait 等待画面出现 exists 判断画面中是否存在某个图片 test 调用输入法,输 ...

  2. 第一次Java学习总结

    初学Java感觉还是蛮可以的,可是做起题目来还是不能得心应手,自己不懂得太多太多,还是需要不断努力去学啊!下面我就把这些天学到的知识点总结一下: 初学Java,我把目前所学知识点总结如下: 1.jav ...

  3. [Web 前端] 008 css 颜色表示方法

    css 颜色表示法 颜色名表示 如 red 红色 green 绿色 blue 蓝色 16 进制数值表示 常见颜色 正常表示 缩写表示 红色 #ff0000 #f00 绿色 #00ff0 #0f0 蓝色 ...

  4. Notepad++-第一篇命令行语句执行之编译、运行Java

    1.让Notepad++编译和运行Java,在电脑上要已经配置好了Java的开发环境 2.在Notepad++上面的选项栏中找到 Plugins--->Plugin Admin 3.在Avail ...

  5. Codeforces 843D (Dijkstra算法的优化，动态最短路)

    题面 (http://codeforces.com/problemset/problem/843/D) 题目大意: 给定一张带权无向图,有q次操作 操作有两种 1 v 询问1到v的最短路 2 c 将边 ...

  6. Oracle之共享服务器模式

    在共享服务器体系结构中,一个dispatcher分派器将传入网络的多个会话请求定向到一个共享服务器进程池,消除了为每个连接分配一个专用服务器进程的需要.作为一般的指导原则,仅当系统需要并发连接到数据库 ...

  7. 浏览器是怎样工作的：渲染引擎，HTML解析（连载二）

    转载自:http://ued.ctrip.com/blog/how-browsers-work-rendering-engine-html-parsing-series-ii.html 渲染引擎 渲染 ...

  8. 13、前端知识点--ajax原理以及实现过程

    一.简略版的 Ajax简介 Ajax(Asyncchronous JavaScript and Xml),翻译过来就是说:异步的javaScript和xml, Ajax不是新的编程语言,而是一种使用现 ...

  9. em、rpx和px的换算

    rpx:对于小程序开发,所用的单位都是rpx,而不论哪个型号的手机,屏幕宽度都是750rpxrpx与px的转换,根据设计稿换算例如:设计稿750px宽度,ps上量出或者标出的宽度是多少,那么就定义多少 ...

  10. python OpenCV视频的读取及保存

    import cv2 cap = cv2.VideoCapture('rtsp://admin:hik12345@192.168.3.160/Streaming/Channels/1') fourcc ...