家都知道在前端开发过程中，为加快网站静态资源加载速度都会对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. 星际战争（bzoj 3993）

    Description 3333年,在银河系的某星球上,X军团和Y军团正在激烈地作战.在战斗的某一阶段,Y军团一共派遣了N个巨型机器人进攻X军团的阵地,其中第i个巨型机器人的装甲值为Ai.当一个巨型机 ...

  2. HDU3001 Travelling

    Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submission( ...

  3. WML标签速查手册 wap标签

    原文发布时间为:2010-08-19 -- 来源于本人的百度文章 [由搬家工具导入] WML标签速查手册(转)比较方便便于速查   结构相关标签 语法及属性 <wml> <wml x ...

  4. 只能运行一个程序，禁止运行多个相同的程序 C#

    原文发布时间为:2009-04-06 -- 来源于本人的百度文章 [由搬家工具导入] Program.cs 里面改成如下： static void Main()        {            ...

  5. ToolTip特效 JavaScript 盗取厦门人才网的特效

    原文发布时间为:2009-05-17 -- 来源于本人的百度文章 [由搬家工具导入] 源代码：http://www.xmaspx.com/Services/FileAttachment.ashx?At ...

  6. git使用代理clone加速

    不设置代理10kb/s不到....,设置后,500kb/s左右跑- 开shadowsocks,代理127.0.0.1:1080 编写一个脚本 /YOUR PATH/gitproxy.sh #!/bin ...

  7. 牛客网 牛客小白月赛2 C.真真假假-String遍历比较

    C.真真假假 链接:https://www.nowcoder.com/acm/contest/86/C 这个题真的是无敌的水,但是自己写前面的string数组的时候,里面的这些头文件要用双引号(&qu ...

  8. 牛客网 牛客小白月赛2 A.数字方阵-反魔方阵，梁邱构造法

    天坑未补... 水一波博客,再不写博客就咸成鱼干了,只写题不写题解,过一段时间就忘了自己学过什么了. 最近重点就是把开学以来写的题补出来,没学的就滚去学会啊(= =),填一下坑... 从这篇博客开始, ...

  9. extern "C"解析

    转自大牛的解析(非常具体详细)http://www.cnblogs.com/skynet/archive/2010/07/10/1774964.html 我做个简单的标注方便以后自己查看: 在用C++ ...

  10. Codeforces 912E Prime Gift（预处理 + 双指针 + 二分答案）

    题目链接 Prime Gift 题意  给定一个素数集合,求第k小的数,满足这个数的所有质因子集合为给定的集合的子集. 保证答案不超过$10^{18}$ 考虑二分答案. 根据折半的思想,首先我们把这个 ...