使用 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. 前端项目中使用jsencrypt进行字段加密

    前端项目中使用jsencrypt进行字段加密. 使用步骤:①获取公钥②实例化对象③设置公钥④将所需数据进行加密然后返回. 进行一个简单的封装如下 /** * npm install jsencrypt ...

  2. HackGame2 writeup

    网址:http://hackgame.blackbap.org/ 第一关 突破客户端:无论输入什么密码都会提示"密码不能为空",使用浏览器检查网页元素会发现提交时会触发 javas ...

  3. Java实验报告（一）&&第三周学习总结

    实验报告(一) 1. 打印输出所有的“水仙花数”,所谓“水仙花数”是指一个3位数,其中各位数字立方和等于该数本身.例如,153是一个“水仙花数”. 源代码: public class Main { p ...

  4. [Python3] 013 集合：你不能两次进入同一个集合

    目录 0. 集合的独白 1. 集合的创建 2. 集合的特性 (1) 概述 (2) 少废话,上例子 3. 集合的遍历 4. 集合内涵 5. 集合的内置方法 6. 可供集合使用的一些方法/函数 (1) 又 ...

  5. stl应用

    http://codeforces.com/problemset/problem/1154/E E. Two Teams time limit per test 2 seconds memory li ...

  6. NancyFx框架之检测任务管理器

    先建一个空的项目和之前的NancyFx系列一样的步骤 然后建三个文件夹Models,Module,Views 然后分别安装一下组件 jQuery Microsoft.AspNet.SignalR Mi ...

  7. OPECV的配置

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

  8. 微信公众号获取微信token

    微信在公众号和小程序的开发都有开放文档一般看文档开发就行,很简单这里写一个小demo获取微信token,之后根据自己的业务获取信息处理即可 package com.demo.ccx; import o ...

  9. Python之路-Python中的线程与进程

    一.发展背景 任务调度 大部分操作系统(如Windows.Linux)的任务调度是采用时间片轮转的抢占式调度方式,也就是说一个任务执行一小段时间后强制暂停去执行下一个任务,每个任务轮流执行.任务执行的 ...

  10. jQuery学习总结01-选择器

    下面简单介绍一个常用的jQuery使用方法,其他详细的猛戳这里 一.选择器 1.parent > child 说明:在给定父类的情况下匹配所有的子类 示例: 描述:匹配表单中所有的的子级inpu ...