最近在工作中遇到需要修改接口数据来测试的情况,查阅了用fiddler工具修改数据的相关知识,整理如下:(所有截图均为自己实践过程中的截图,如有不对,欢迎指正)
利用Fiddler修改http数据的特性,通过重定向请求在本地,直接修改页面展示的数据。
步骤如下:
步骤1:
用Fiddler查看页面的数据流列表,找到这个js文件的session
例如:
(1)链接:
http://www.aliued.cn/wp-includes/js/comment-reply.js?ver=20090102
(2)
温馨提示:最好是没有缓存的返回内容(Result Code是200),这样可以进行下一步的保存。不是200页没关系,只要本地硬盘上有这个文件就好了。
步骤2:
将js文件保存到本地(如果本地已经有这个文件,可以跳过这步)
在js session上右键点击,选择save--response--response body..,将js文件的内容保存到本地。记住保存的文件路径,下面会用到这个保存下来的文件。
步骤3:
开启Fiddler的请求自动重定向功能:
打开AutoResponder标签设置,界面有两个复选框,第一个作用是开启或禁用自动重定向功能;第二个复选框勾上时,不影响那些没有满足我们处理条件的请求(如果没有勾选第二个,只勾选了第一个,其他没有符合处理条件的请求都会返回404,页面也会相应打不开,所以使用完这个功能,最好两个勾选都去掉)
(1)之前老版本的fiddler的截图如下:
(2)新版本的fiddler的截图如下:
文案描述不一致,都是同一个意思。
步骤4:
创建重定向规则,将目标是这个js的http请求重定向到本地文件
可以通过Add..按钮手动添加规则,也可以直接在session列表拖动过来,在左侧的session列表中选择第一步找到的session,拖动到autoresponse标签中,这样就创建了一个针对这个url的规则。
如下图,fiddler帮我们生成的规则是:
1、当URL为:http://www.aliued.cn/wp-includes/js/comment-reply.js?ver=20090102
2、返回200,使用和session 1一模一样的内容返回
(1)修改该规则,选择Find in file...,选择刚刚保存到本地的文件作为body内容
(2)刷新一下浏览器页面,查看session列表,如果像下面这样,这个session的底色是灰色的,则已经成功将这个请求重定向到本地文件了,如下图:
温馨提示:如果浏览器用的是Firefox,记得先清一下临时文件缓存,因为Firefox是真正的缓存,当判断文件的缓存还未过期时,就不会再发请求出 来,Fiddler就获取不到了。
步骤5:
在本地保存的js文件里加一句:alert(‘hello’)
刷新浏览器,看看效果,如果alert出来,那就成功了。
继续修改这个文件并测试,成功修复问题后,我们就可以发布修改后的文件了。
小结:自动重定向功能是Fiddler最实用的功能,这里的Rule可以自由地设定,可以使用搜索(默认)、精确匹配(EXACT)、正则表达式匹 配(REGEX)。
处理方式可以选择使用文件,也可以选择合适的时间暂停数据流(*bpu、*bpafter),人工干预。通过以上几个步骤,我们演示了 怎样将HTTP请求重定向到本地的文件,进行web调试。这种调试方式不需要发布到线上再验证,避免了修改不成功、对用户造成影响的风险,而且不需要搭建 复杂的开发服务器等开发环境,非常适合快速web调试。