Fiddler (七) AutoResponder 前端工程师快速调试

前端工程在工作中,经常需要去调试 HTML, CSS 或者Javascript 文件,     Fiddler 中的AutoResponder 功能,可以把要调试的文件保存到本地进行调试,这大大减少了在线调试的困难。 起码能提高5倍的效率

如果你不熟悉Fiddler 的用法,可以参考我其他的Fiddler 文章

阅读目录

案例一: 如何调试服务器上的HTML/CSS或者Javascript文件

一般情况下是这么做的:  前端工程师先在本地修改好一个JS文件, 这个时候他并不能确保他的修改是对的。 他需要把Javascript文件,部署到测试环境上或者生产环境上。 然后测试和验证。

如果修改不对,还需要重新修改,如下图所示

这么做有很大的缺点.

1. 部署非常浪费时间

2. 容易影响测试环境或者开发环境的稳定性

3. 可能需要大量的修改和验证, 非常繁琐,非常浪费时间。

如果使用Fiddler Responseder 就可以直接本地修改,直接验证就可以了。 不需要部署。  起码可以提高5倍的效率

案例二: 生产环境上的调试

如果生成环境上的JS出现了问题, 那么调试JS是非常麻烦的, 你不能把生产环境搞挂了。使用Fiddler Responsder 无需修改生成环境上的文件,能轻松帮你搞定。

Fiddler AutoResponder 的工作原理

Fiddler 本身是个代理

第一步: 找到你要调试的文件并且下载

假设发现页面中的摸个文件出了问题, (html/css/javascript/git)都行。  我们先把出问题的文件下载到本地.

第二步: 设置Fiddler - autoResponder

第三步:  直接修改本地的文件,就可以调试

设置好Fiddler AutoResponsed 后,你只需要修改本地机器上的文件, 然后刷新浏览器。 这样你就能看到效果了。

总结

Fiddler AutoResponsed 除了调试外, 还有很多有趣的用法, 后续会写一些新的用法

时间: 2024-08-27 06:49:41

Fiddler (七) AutoResponder 前端工程师快速调试的相关文章

假装前端工程师(一)Icework + GitHub pages 快速构建可自定义迭代开发的 react 网站

icework + gh-pages 超快部署超多模版页面 项目地址:https://github.com/yhyddr/landingpage效果地址:https://yhyddr.github.io/landingpage 前言 GitHub 账号 与它的 pages 服务 不需要任何准备的东西,服务器?域名?前端工程师? 都不需要!只需要你有就能够享受到建立自己网站的乐趣. 飞冰 现在搭配飞冰,还能让你一键生成你喜欢的页面:最最主要的是,你的这个项目是一个 React App,你可以边学前

前端工程师如何快速的开发一个微信JSSDK应用

亲们,订阅号出来已经很久了,作为一个前端工程师或者全栈工程师,你是不是错过了什么?大概许多攻城狮同砚还没有反应过来订阅号怎么回事,就马上要被微信的应用号秀一脸了.在应用号还没有正式出来之前,我们赶紧一起来看看怎样给自己的订阅号加个网页功效吧. 一.订阅号网页与平凡的HTML5网页的区别 可能会有很多同学还没有弄清楚普通的HTML网页与订阅号网页的差别,我在这里简朴的说明一下. 订阅号的网页就是微信的网页,普通的网页是W3C范例下的网页. 订阅号的网页通常是以遵守W3C的网页规范为前提的,但是也有

太原中软:前端工程师的知识体系

下图是前端工程师图解: 前端开发的核心是HTML + CSS + JavaScript.本质上它们构成一个MVC框架,即HTML作为信息模型(Model),CSS控制样式(View),JavaScript负责调度数据和实现某种展现逻辑(Controller). HTML 1.标签的分类 - 标签表示一个元素 按性质划分: Block-Level和Inline-Level 按语义划分: Headings: h1, h2, h3, h4, h5, h6 Paragraphs: p Text Form

web前端工程师应该会的9个软技能

做为一名web前端工程师(http://www.maiziedu.com/course/web-px/),往往我们可能只专注于修炼自己的内功,而忽视了软技能.硬技能决定你是否能得到工作,而软技能能够表明你是否适合这份工作和适应工作环境等.所有的公司都有属于自己的文化,并努力将这些文化传承下去,所以他们必须确保每一位新员工能够适应这个环境. 许多硬技能很容易获得并可很快的提高,而软技能由于和你性格等联系紧密,可想要改变他们是一件很困难和缓慢的事情.这里有七个核心的软技能,适用于大多数的企业,它们不

我的职业是前端工程师

作为 GitHub 知名的 md 程序员,我很高兴宣布,已经在 GitHub 上 Release 第七本电子书. 在我来深圳之前的项目里,我们是一个全功能团队,我从实习生开始了职业生涯.在这一个团队里,每个人都是一个全栈工程师,即要编写前端的 JavaScript 代码,又要会后台使用 Java 或者 Scala 来对 API 进行编程. 而最近在深圳的一年工作里,我是一个前端+ 移动应用开发(混合应用方向)工程师 .2017 年年初的时候,看完村上的<我的职业是小说家>,便有了这个系列的文章

WEB前端开发快速入门教程

目前web产品交互越来越复杂,用户使用体验和网站前端性能优化这些都得靠web前端工程师去做,web前端工程师是设计加开发的综合体,web前端工程师是在开发人员中最直接面向产品,面向用户的设计人员,一个开发团队的成果是要靠web前端工程师去展现,因为用户不会去关心后台的处理有多么强大 :在设计人员中web前端工程师是直接面向开发人员的设计人员,向开发人员以一种计算机语言的方式传递其设计理念,web前端工程师在整个团队中是很关键的. 所以一名合格的web前端工程师必须得掌握HTML.CSS和Java

什么是前端工程师?前端工程师需要掌握什么技能?

什么是前端工程师?前端工程师需要掌握什么技能? 前言 前端工程师是一个出现了10年左右,而颇受重视则是最近这五六年的事情.受到重视到前端从业人员井喷,也就是这一两年而已.因为前端工程师这个职位出现得太晚,导致各大学校均没有系统的相关教学,我们所熟知的各个大牛均是自我研究自我学习的.而随着google推出v8引擎以来,尤其是gmail对ajax的应用,再随着jquery的出现,解决了各大浏览器的兼容问题,而nodejs则将js推向服务器端,javascript从一个边角料的语言变成了一个性能强劲,

淘宝前端工程师:国内WEB前端开发十日谈

转自:http://www.jianshu.com/p/8cf2df3fdbf2 一直想写这篇“十日谈”,聊聊我对Web前端开发的体会,顺便解答下周围不少人的困惑和迷惘.我不打算聊太多技术,我想,通过技术的历练,得到的反思应当更重要. 我一直认为自己是“初级”前端开发工程师,一方面我入道尚浅,只有短短几年,另一方面我自知对技术的钻研并不深入,可能是由于环境的原因,当然最重要的是,我幸运的参与到互联网崛起的浪潮之巅.时势造就了一批技能薄弱但备受追捧的“弄潮者”,这在很大程度上影响我们对“技术本质”

web前端工程师入门须知

先说下web前端工程师的价值,目前web产品交互越来越复杂,用户使用体验和网站前端性能优化这些都得靠web前端工程师去做web前端工程师是 设计加开发的综合体,web前端工程师是在开发人员中最直接面向产品,面向用户的设计人员,一个开发团队的成果是要靠web前端工程师去展现,因为用户不 会去关心后台的处理有多么强大 :在设计人员中web前端工程师是直接面向开发人员的设计人员,向开发人员以一种计算机语言的方式传递其设计理念,web前端工程师在整个团队中是很关键 的. 在我眼中一名合格的web前端工程