使用Fiddler提高前端工作效率 (实例篇)

在上一篇(介绍篇)中,我们对Fid">dler Web Debugger有了简单的接触,也许你已经开始在用Fiddler进行HTTP相关的调试,在这一篇,我们将通过一个实例了解Fiddler的神奇魔法。

在我们前端开发的日常工作中,发现服务器上某个css/javascript文件有问题,需要修改,那真是家常便饭。通常,我们需要将文件进行修改,然后重新发布再验证,这样就很容易影响到生产环境的稳定性。更普遍的做法是,我们在开发环境中修改文件并验证,然后发布到生产环境。虽然安全,却比较繁琐。而利用Fiddler的可以修改HTTP数据的特性,我们就非常敏捷地基于生产环境“修改——验证——发布”。

假设我们发现这个页面有问题,需要修改所引用的js文件(http://www.aliued.cn/wp-includes/js/comment-reply.js?ver=20090102)。

第一步:用Fiddler查看页面的数据流列表,找到这个js文件的session

tip: 最好是没有缓存的返回内容(Result Code是200),这样可以进行下一步的保存。不是200也没关系,你只要本地硬盘上有这个文件就好了。

第二步:将js文件保存到本地(如果本地已经有这个文件,可以跳过这步)

在这个js session上右键点击,选择“Save – Response –Response Body…”,将js文件的内容保存到本地。记住存的位置,下面我们会用到这个保存下来的文件。

第三步:开启Fiddler的请求自动重定向功能

打开AutoResponder标签设置。有没有看到界面上有两个复选框?第一个的作用是开启或禁用自动重定向功能,我们就可以在下面添加重定向规则了。第二个复选框框勾上时,不影响那些没满足我们处理条件的请求。

第四步:创建重定向规则,将目标是这个js的HTTP请求重定向到本地文件

我们可以通过“Add…”按钮手动添加规则,不过这个URL已经出现在我们的session列表中,可以直接拖动过来。在左侧的Session列表中选择第一步找到的session,拖动到AutoResponse标签中。这样就创建了一个针对这个URL的规则。

Fiddler帮我们生成的规则是:

当URL为:http://www.aliued.cn/wp-includes/js/comment-reply.js?ver=20090102返回200,使用和Session 4一模一样的内容返回

我们需要修改这个规则,

选择“Find a file…”,就可以选择本地的文件作为返回的body内容。

选择我们刚刚保存下来的文件。

刷新一下浏览器页面,看一下session列表,如果像下面这样,这个session的底色是灰色的,那么恭喜你,你已经成功将这个请求重定向到本地文件了!

tip: 如果浏览器用的是Firefox,记得先清一下临时文件缓存,因为Firefox是真正的缓存,当判断文件的缓存还未过期时,就不会再发请求出来,Fiddler就获取不到了。

第五步:修改本地文件,进行测试

我们在本地的js文件中加一句alert(‘hello’)

刷新浏览器,看看效果,如果alert出来,那就成功了。

继续修改这个文件并测试,成功修复问题后,我们就可以发布修改后的文件了。

小结:自动重定向功能是Fiddler最实用的功能,这里的Rule可以自由地设定,可以使用搜索(默认)、精确匹配(EXACT)、正则表达式匹配(REGEX)。处理方式可以选择使用文件,也可以选择合适的时间暂停数据流(*bpu、*bpafter),人工干预。通过以上几个步骤,我们演示了怎样将HTTP请求重定向到本地的文件,进行web调试。这种调试方式不需要发布到线上再验证,避免了修改不成功、对用户造成影响的风险,而且不需要搭建复杂的开发服务器等开发环境,非常适合快速web调试。

延伸阅读:

Fiddler使用帮助来源:http://www.aliued.cn/?p=2581

时间: 2025-01-30 01:43:02

使用Fiddler提高前端工作效率 (实例篇)的相关文章

使用Fiddler提高前端工作效率 (介绍篇)

1. Fidhttp://www.aliyun.com/zixun/aggregation/16504.html">dler 是什么? Fiddler是用C#编写的一个免费的HTTP/HTTPS网络调试器.英语中Fiddler是小提琴的意思,Fiddler-Web-Debugger就像小提琴一样,可以让前端开发变得更加优雅. Fiddler是以代理服务器的方式,监听系统的网络数据流动.运行Fiddler后,就会在本地打开8888端口,网络数据流通过Fiddler进行中转时,我们可以监视HT

五点方法有效的提高SEO工作效率

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 不仅是公司的SEOER和个人站长都觉得每天的时间都很紧促,每天的时间都不够用但晚上总是觉得自己这一天什么都没干就结束了.说白了就是工作效率的问题,本人是在公司从事SEO工作的每天的工作时间差不多是12个小时.每天要维护的站差不多是15个左右.怎么在最短的时间完成了工作并且能真正的影响排名呢?今天和大家分享一下. 一.学会化整为零 我想博客外链

8个提高数据分析工作效率的技巧

我刚和一位老友恢复了联系.她一直对数据科学很感兴趣,但10个月前才涉足这一领域--作为一个数据科学家加入了一个组织.我明显感觉到她已经在新的岗位上学到了很多东西.然而,我们聊天时,她提到了一个至今在我脑海里都挥之不去的事实或者说是问题.她说,不论她表现如何,每一个项目或分析任务在令经理满意之前都要做好多次.她还提到,往往事后发现原本不需要花这么多时间! 听起来是不是很像你的遭遇?你会不会在得出像样的答案之前反复分析很多次?或者一遍又一遍地为类似的活动写着代码?如果是这样的话,这篇文章正好适合你.

XP五大快捷键有效提高站长工作效率

http://www.aliyun.com/zixun/aggregation/34065.html">WindowsXP中文全称为视窗操作系统体验版.是微软公司发布的一款视窗操作系统.它发行于2001年10月25日,原来的名称是Whistler. 微软最初发行了两个版本,家庭版(Home)和专业版(Professional).家庭版的消费对象是家庭用户,专业版则在家庭版的基础上添加了新的为面向商业的设计的网络认证.双处理器等特性.且家庭版只支持1个处理器,专业版则支持2个.字母XP表示英

利用Ant和Eclipse有效地提高部署工作效率

读者定位为具有 Java 和 Ant 使用经验的开发人员. 读者可以学习到如何使用 Ant 解决一些多用户开发环境中,根据不同的目标环境编译成不同部署包的问题. 工作场景 现在有一个 web 项目,是多人进行开发的,通过 CVS 来管理.另外该项目还有一些测试人员,他们测试部署在测试服务器上的应用程序,发现 bug 后通过 bug 管理系统通知开发人员,在开发人员修复 bug 并经过本地测试后,由专门的人负责检出(check out)代码,编译打包后部署到测试服务器上. 该项目的成员小A就是负责

虚子雨:SEO经验谈之如何提高SEO工作效率

大家好,我是虚子雨.最近一直在思考一个问题:如何让自己的SEO提高效率?相信大家也在为这个问题所困扰.很多的朋友会问一些非常简单的问题,而且大家是知道答案的,但是就是因为自己心中不确定想找一个人来确定一下自己心中的想法,例如SEO每天要做些什么这个问题我的回答一般会是做外链和内容,但是对于不同的人来说侧重点就有所不同了,有的朋友会认为外链很重要,于是大部分时间是在做外链,而且会想方设法的把外链做好,权重高,收录快.而如果大家侧重站内的用户体验的话,就会用心的编辑站内的文章,给用户最想要的东西,帮

分享提高推广工作效率的一点粗浅方法

中介交易 SEO诊断 淘宝客 云主机 技术大厅 大家都知道,一开始疯男哥哥是在影楼工作,推广也只推广一家公司,一家网站.而现在哥哥走出影楼做旭天网络顾问了,虽然我负责的还是影楼网络推广,但是整个工作流程和原来却完全不同了.现在不再是推广一家公司,一家网站,而是要负责多家公司和多家网站的推广优化工作.这一变动对我影响很大,一开始感觉很是茫然,有一种力不从心的感觉,并稍微郁闷.百度CEO李彦宏了解到了我的情况,他对我说,重复的工作一定要系统化.流程化.老李的话对我来说犹如晴天霹雳.当头棒喝,于是我马

WPS Office 2012组合公式帮你提高工作效率

WPS表格可以进行数据计算.分析和整理,当使用一些比较复杂的公式的时候,以前许多人都会找现成的公式来使用,甚至做成模板反复使用.比如,计算个人所得税和从身份证中提取性别.出生日期信息,是固定的公式,就会从网上下载他人的文件,复制出较长的公式到自己的表格中使用. WPS的"组合公式"功能就替大家想到了解决的办法,把这些常用的公式集成在WPS表格软件中,用户可以直接调用公式进行计算,而不必再去"苦苦"查询"记忆中的公式",大大提高了工作效率. 今年九

傲游十个功能帮你提高工作效率

  读过一篇文章--"10 Google Chrome Extensions for Boosting Your Productivity"(<可以提高你工作效率的十款Chrome浏览器插件>)之后,加深了对chrome的了解.不过明显作者对在白领上班族中十分流行的傲游浏览器不甚了解,这十个Chrome需要依赖插件实现的功能几乎被包括在了傲游的原生功能中,仅有几个和社交网络及Google本身服务紧密相关的功能傲游没有触及.下面就来与各位分享傲游的这10个功能,希望能够带给各