使用 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. 第一个spring boot应用

    前提 首先要确保已经安装了java和maven: $ java -version java version "1.8.0_102" Java(TM) SE Runtime Envi ...

  2. NoSQL基础学习

    NoSQL基础学习 最近学习的第一个Nosql就是Mongodb,为了了解Nosql的基本知识,特地总结,主要是学习Nosql的理论 一.Introduction(介绍) 它是“ Not Only S ...

  3. 15年6月8号 jsp内置对象总结

    jsp的内置对象:主要有三个request.session.application:而且三者之间有各自不同的特点,在不同的情况下,使用不同的对象会有不同的效果, 其中: 1.request(特点):一 ...

  4. 如何在nuxt中添加proxyTable代理

    背景 在本地开发vue项目的时候,当你习惯了proxyTable解决本地跨域的问题,切换到nuxt的时候,你会发现,添加了proxyTable设置并没有什么作用,那是因为你是用的vue脚手架生成的vu ...

  5. vue+element Form键盘回车事件页面刷新解决

    问题描述:如下代码所示,使用element-ui 中的el-form组件对table进行条件查询,当查询条件仅有一项时,使用@keyup.enter.native事件绑定回车事件,出现点击回车后,浏览 ...

  6. EF6 MySQL错误之“Specified key was too long; max key length is 767 bytes”

    由于 MySQL Innodb 引擎表索引字段长度的限制为 767 字节,因此对于多字节字符集的大字段(或者多字段组合索引),创建索引会出现上面的错误. 以 utf8mb4 字符集 字符串类型字段为例 ...

  7. Webpack Loader种类以及执行顺序

    我们在用webpack构建项目的时候,有两种配置打包文件的方式: import或者require :a-loader!b-loader!.././static/dog.png(打包某一个文件) 配置w ...

  8. tmux 操作简版

    操作session: 操作window: 操作pane: 原文

  9. maven_上传到私服，以及从私服下载

    公司由于没有maven,自己又想用,于是乎,就自己搭了一个nexus 1.苦逼不多说,将本地jar文件上传到maven 需要在本机(客户端windows)中的maven中的setting.xml添加这 ...

  10. python面向对象---用函数实现面向对象原理

    类的定义:一个抽象的概念,保存一些共有的属性和特征 #对象:对象代表具体事物的特征功能,是类的实例 #面向对象程序设计 通过函数实现面向对象设计 def dog(name,type,gender): ...