使用chrome调试前端线上代码

家都知道在前端开发过程中，为加快网站静态资源加载速度都会对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选项勾选取消即可查看压缩文件，如图

时间： 2024-10-27 11:22:38

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

阿里2014前端线上笔试题目（答案待补充）

题目及部分答案转载自 WEB前端开发(www.css119.com) No.1 下图绿色区域的宽度为100%,其中有三个矩形,第一个矩形的宽度是200px,第二个和第三个矩形的宽度相等.请使用 css3 中的功能实现它们的布局. 已知 html 结构是: <div>  <div>column 1</div>  <div>column 2</div>  <div>column 3</div> </div> 答案:

阿里校招：前端线上笔试题--计算鼠标在页面某个区域内的停留时长

校招:阿里前端笔试题收到笔试通知后恶补了几天阿里前端历年笔试题,巧的是这道题今年有同学做过,而且发到了北邮人bbs上(看来临阵磨枪还是有用的),现在贴上当时提交的代码. 水平有限,有错误烦请指点. 题目: <div class='mod-spm'data-spmid='123'> <divclass='child_a'></div> <divclass='child_b'></div> <divclass='child_c'><

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

题目: 请让页面中的一个元素(10px*10px)围绕坐标(200, 300) 做圆周运动: <html> <head> <style type="text/css"> .item{ width:20px; height:20px; border-radius:10px; background: blue; position: absolute; }/*border-radius圆角半径*/ #point{ left:95px; top:295px;

Google Chrome调试js代码

你 是怎么调试 JavaScript 程序的?最原始的方法是用 alert() 在页面上打印内容,稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容.嗯~,用这两种土办法确实解决了很多小型 JavaScript 脚本的调试问题.不过放着 Chrome 中功能越发强大的开发者工具不用实在太可惜了.本文主要介绍其中的 JavaScript  断点设置 和 调试 功能,也就是其中的 Sources Panel(以前叫 Scripts).如果你精通 Eclip

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

首先我们来说说为何要生成sourceMap文件呢?简单的说,sourceMap是为了压缩后的代码调式提供方便,比如线上的JS文件已经压缩了,但是线上比如说有bug,但是代码已经是压缩后的,对于开发并不好调式,所以想生存一个对应的Map文件,然后使用chrome浏览器在源文件未压缩的JS文件下调式. 那么Map文件到底是什么呢?简单的来讲它就是记录信息,记录一些为压缩之前的js文件的位置,及压缩后的文件对应未压缩之前的文件,对应第几行第几列的那些代码! 在讲解使用grunt生存Map文件之前,我们

前端开发调试线上代码的两款工具

用过 Charles 和 Fiddler 这两款,记录如下. 一.Charles Charles 界面简单直观,易于上手,数据请求控制容易,修改也简单,抓取数据的开始暂停也方便.支持 win,mac,linux. 1. 安装前提Charles 需要有 Java 环境,请提前下载安装 JDK.JDK 已经 8 了. 根据自己的系统选择对应的JDK.我的是 win7,双击安装,一直下一步就哦了.在命令行窗口输入以下命令,出现截图所示就表示 JDK 安装成功了 2. 下载 Charles Charle

PhpStorm+xdebug远程调试Linux机器上的代码

一.背景介绍: 最近在了解网址导航项目,为了能够更加深入地了解被测对象,所以我选择了查看网址导航代码的方式进行,但是只是生硬地查看php源代码是比较生涩的,我希望能够通过IDE工具进行代码单步调试来了解整个网址导航的功能实现. 为了达成以上目的,我选择了phpstorm+xdebug来远程调试Linux上的代码.与之前白松分享的phpstorm+xdebug调试方法不同的是,前者调试的Webserver是在本地环境搭建了php+apache调试的,而我要面对的问题有: 1.网址导航的代码是部署在

通过 Chrome 调试运行在 IOS-safari 上的页面

引自 http://www.cnblogs.com/kelsen/p/6402477.html 本文重点讨论如何在 Windows 系统中通过chrome 浏览器调试运行在 iPhone/iPad Safari 浏览器中的网页.如果你有一台 iMac/MacBook,可忽略该文档.iMac 环境下,直接通过 USB 将 iphone 与 iMac/MacBook 链接,之后在 iMac/MacBook 中打开 Safari 进入调试模式,即可对运行在手机中的页面进行调试.详情见:Using We

chrome调试webview

手机:关于手机/版本号连续点击7次/开发者模式/usb调试模式 chrome:输入about:inspect 防止防火墙墙ip 远程调试需要FQ的wifi 否则无法在about:inspect所开窗口打开dev-tools 以下两篇文档供参考,有些方法未验证. 移动端Web开发调试之Chrome远程调试(Remote Debugging) 在智能手机还未普及时,移动设备的调试处处是alert的,这估计是最常用的办法了.以前很多时候为了预览页面在移动设备上的效果,需要先将页面上传到测试服务器,再将