Fiddler 中的 Auto Responder 功能可以把要调试的文件保存到本地进行调试,这大大减少了在线调试的困难。
测试工程师在做测试的时候,也需要服务器返回 一 些特殊的数据来做测试,使用 AutoResponder 功能来伪造测试数据,能大大减少测试工程师的工作量。
9.1 如何在服务器上调试 JavaScript 文件
前端开发工程师在日常工作中,经常会发现服务器上某个 css 文件或者 JavaScript 文件有问题 。
一般情况下,遇到这种情况时是这么做的:前端工程师先在本地修改好 JS 文件,这个时候他并不能确保他的修改是对的:他需要把 JS 文件部署到测试环境上,然后测试和验证;如果修改得不对,还需要重新修改、 重新部署。
缺点:
- 部署非常浪费时间
- 容易影响测试环境或者开发环境的稳定性
- 可能需要大量的修改和验证,非常繁琐,非常浪费时间
9.2 Fiddler AutoResponder 的工作原理
使用 Fiddler 可以替换自动返回的一个伪造的 HTTP 响应 。这跟之前介绍的下断点修改 HTTP 响应差不多 ,只不过 AutoResponder 是自动的,操作更方便,
9.3 Fiddler 在线调试 JavaScript 文件
线上环境有一个 JavaScript 文件出了问题,我们可以利用 Fiddler 来快速调试,具体操作步骤如下(整个步骤需要重试) 。
- 网页 http://www.cnblogs.com/liqingwen/ 使用 了 一个 JS 文件 TankPageFooter.js ,先把这个 JS 文件保存在本地。
- 编辑本地的 JavaScript 文件,将其中的代码改为:
1 | $().ready() |
- 启动 Fiddler,在浏览器中打开 http://www.cnblogs.com/liqingwen/,我们可以看到Fiddler 抓到 了 这个
JavaScript 的 HTTP 请求,应该是:http://files.cnblogs.com/liqingwen/TankPageFooter.js - 在 Fiddler 中,找到 http://files.cnblogs.com/files/liqingwen2/TankPageFooter.js 这个请求,然后将其拖曳到 AutoResponder 中。
-
在 RuleEditor 中单击“ Find a file . . . ”,选择本地 JavaScript 文件的路径。
-
选中“ Enable rules” ,激活规则。选中“ Unmatched requests passthrough”,放行不匹配的 HTTP 请求
-
单击“ Save“按钮
-
你只需要修改本地机器上的文件,然后刷新浏览器,这样你就能看到效果了
9.4 浪漫的程序员
Fiddler AutoResponder。
9.5 替换网页中的图片
Fiddler 替换掉网页中的图片。
- 启动 Fiddler,打开浏览器访 问 https://blog.669.icu/
- 在浏览器中把一张图片保存到本机中,命名为 fanguzai.jpg。
-
用画图工具编辑 fanguzai.jpg 。
-
在 Fiddler 中,找到这个图片的 Sesssion,并且拖曳到 AutoResponder 中。
-
在 RuleEditor 中,单击“ Find a file … . ”,选择本地的 fanguzai.jpg 。 选中“ Enable rules ”,激活规则,选中“ Unmatched requests passthrough ”,并且单击“ Save "按钮。
- 刷新浏览器,可以看到网页中的图片己经被替换了
参考
- 《HTTP抓包实战》