家都知道在前端开发过程中，为加快网站静态资源加载速度都会对js/css等静态资源进行压缩合并再部署到生产环境，而在实际开发过程中开发人员一般都是在开发环境进行源码文件开发调试的，当部署平台或部署人员将开发人员提交的前端代码进行压缩合并为压缩文件后，当遇到生产环境出现问题之后很难通过压缩文件去定位问题，所以如何让开发人员便利的调试线上代码，并迅速定位问题是部署及运维网站需要考虑的重要考量的地方，此文档教程将描述如何使用chrome浏览器进行线上调试源码问题。

Step-by-step guide

  1. 下载chrome浏览器

  2. 修改grunt部署打包任务配置，如图

  3. 通过Jenkins发布部署项目

  4. 访问http://test.www.****.com/网站（站点已对源码进行压缩合并，支持调试压缩文件源码）

  5. 打开F12浏览器调试工具界面

  6. 勾选设置设置中的Enable Javascript source maps选项

  7. 关闭设置后，打开sources选项卡后，F5刷新页面后即可查看调试压缩文件源码

  8. 如需查看压缩文件，将设置中的Enable Javascript source maps选项勾选取消即可查看压缩文件，如图

使用chrome调试前端线上代码的更多相关文章

  1. ××校招：前端线上笔试题--页面中的一个元素（10px*10px）围绕坐标(200, 300) 做圆周运动

    题目: 请让页面中的一个元素(10px*10px)围绕坐标(200, 300) 做圆周运动:   原理: 1.页面上画一个圆,画一个圆心.在这个圆的圆周上面画一个点,我们就让这个点绕着圆周跑: 2.怎 ...

  2. 怎么解决前端线上Bug

    有一种八阿哥(Bug),叫"在我电脑上是好的呀". 有一种解决方式,叫"你去好好排查一下你自己的代码". 有一种控诉,叫"这绝不是后端的问题" ...

  3. 利用Chrome浏览器调试线上代码

    前言 之前调试前端bug都是在开发环境中做完并多次测试没有问题之后发布测试环境,验收合格之后发布生产.但生产环境偏偏会有和开发和测试环境不一致的情况,例如测试环境需要加密,而开发环境先不加密,测试环境 ...

  4. 利用chrome调试JavaScript代码

    看见网上很多人问怎么用chrome调试JavaScript代码,我也对这个问题抱着疑问,但是没有找到一篇能用的中文文章(可能我的google有问题),也不知道怎么点出一篇E文的,感觉作者写得不错,所以 ...

  5. Javascript系列： Google Chrome调试js代码(zz)

    你 是怎么调试 JavaScript 程序的?最原始的方法是用 alert() 在页面上打印内容,稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容.嗯~, ...

  6. Google Chrome调试js代码

    你 是怎么调试 JavaScript 程序的?最原始的方法是用 alert() 在页面上打印内容,稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容.嗯~, ...

  7. 解放双手：如何在本地调试远程服务器上的Node代码

    写在前面 谈到node断点调试,目前主要有三种方式,通过node内置调试工具.通过IDE(如vscode).通过node-inspector,三者本质上差不多.本文着重点在于介绍 如何在本地通过nod ...

  8. 如何利用Grunt生成对应的Source Map文件,线上代码压缩使用chrome浏览器便于调式

    如何利用Grunt生成对应的Source Map文件,线上代码压缩使用chrome浏览器便于调式 首先我们来说说为何要生成sourceMap文件呢?简单的说,sourceMap是为了压缩后的代码调式提 ...

  9. Google Chrome调试js代码,开发者工具之调试工具常用功能

    参考:Google Chrome调试js代码-http://www.open-open.com/lib/view/open1384785324165.html 重点:左下角一个{}括号图标按钮用于把杂 ...

随机推荐

  1. 球形空间产生器sphere（bzoj 1013）

    Description 有一个球形空间产生器能够在n维空间中产生一个坚硬的球体.现在,你被困在了这个n维球体中,你只知道球面上n+1个点的坐标,你需要以最快的速度确定这个n维球体的球心坐标,以便于摧毁 ...

  2. 33个好用的图片轮显 jquery图片轮显

    原文发布时间为:2011-05-28 -- 来源于本人的百度文章 [由搬家工具导入] 我个人还是喜欢 jquery.recycle，比较通用。因为由美工设计好的轮显结构，如果套用下面，就感觉不是很方便 ...

  3. javascript草稿

    原文发布时间为:2011-06-01 -- 来源于本人的百度文章 [由搬家工具导入]   @MyHelper.Script("jquery-1.6.1.min.js", Url)  ...

  4. 让Dropdownlist既有静态项又有动态项或者既能有编辑项又能绑定数据源

    原文发布时间为:2008-10-27 -- 来源于本人的百度文章 [由搬家工具导入] protected void Page_Load(object sender, EventArgs e) //Dr ...

  5. APP漏洞扫描用地址空间随机化【转】

    转自:http://www.cnblogs.com/alisecurity/p/6141575.html 前言 我们在前文<APP漏洞扫描器之本地拒绝服务检测详解>了解到阿里聚安全漏洞扫描 ...

  6. SQL语句的执行顺序（转载+不同意见）

    MySQL的语句一共分为11步,如下图所标注的那样,最先执行的总是FROM操作,最后执行的是LIMIT操作.其中每一个操作都会产生一张虚拟的表,这个虚拟的表作为一个处理的输入,只是这些虚拟的表对用户来 ...

  7. (22)python PhantomJS

    下载地址 https://bitbucket.org/ariya/phantomjs/downloads/ 安装 解压后把bin目录下的phantomjs.exe文件复制到C:\Python27\Sc ...

  8. java8 之CompletableFuture -- 如何构建异步应用

    什么是Future 接口 很多场景下,我们想去获取线程运行的结果,而通常使用execute方法去提交任务是无法获得结果的,这时候我们常常会改用submit方法去提交,以便获得线程运行的结果. 而sub ...

  9. codevs——1169 传纸条（棋盘DP）

    2008年NOIP全国联赛提高组  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond 题解  查看运行结果     题目描述 Description 小渊和小 ...

  10. 转：Java并发编程：volatile关键字解析

    Java并发编程:volatile关键字解析 Java并发编程:volatile关键字解析 volatile这个关键字可能很多朋友都听说过,或许也都用过.在Java 5之前,它是一个备受争议的关键字, ...