使用 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. postman小白教程

    转载:之前看到的保存了下来,没有找到转载地址,所以如果侵权的话联系我加下转载地址,感觉这篇文章写的很好,详细

  2. Java-JavaMail邮件开发（1）Java Mail

    1.仅使用Java Mail 使用163邮箱作为代理服务器: 引入依赖: <dependency> <groupId>com.sun.mail</groupId> ...

  3. 给定两个list A ,B，请用找出 A ,B中相同的元素，A ,B中不同的元素 ？？

    A.B 中相同元素:print(set(A)&set(B)) A.B 中不同元素:print(set(A)^set(B))

  4. VS2019配置MKL教程(Windows)

    下载链接:https://software.intel.com/en-us/mkl 1.文件下载 官网注册后,选择MKL下载下来,安装到指定目录就行,不在多说. 2.配置文件 首先创建一个Window ...

  5. 在Eclipse-jee-neon中配置springsource-tool-suite

    今天为大家展示如何在Eclipse-jee-neon中配置spring的插件(springsource-tool-suit): 打开Eclipse,查看自己的版本. Help –> About ...

  6. 十大热门AI芯片

    资料来源:头条<人工智能影响力报告>中的人工智能十大热门芯片 iPhone X内部搭载了一颗全新定制的处理器——A11 Boinic,用来承担人脸识别和移动支付的工作负荷.双核心A11芯片 ...

  7. 使用GDB调试时attach ID不被允许

    在进入gdb后,直接使用attach ID,出现下面的情况: Could not attach to process.  If your uid matches the uid of the targ ...

  8. 网络安全专家教你设置史上最安全的WiFi密码

    通过设置强密码可以防止WiFi被蹭网现象的发生,保证WiFi网络安全.那么我们的WiFi密码怎么设置才最安全呢? 提供以下设置建议: 1.WiFi密码设置尽量使用字母.数字和字符组成的密码.这种密码强 ...

  9. django之mysql数据库的配置和orm交互

    一:django默认数据库的配置 DATABASES = { 'default': { 'ENGINE': 'django.db.backends.sqlite3', 'NAME': os.path. ...

  10. Web自动化-浏览器驱动chromedriver安装方法

    1.python中安装好selenium包  pip install selenium 2.根据以下驱动对照表下载Chrome对驱动   chromedriver版本 支持的Chrome版本 v2.3 ...