反骨仔

一个业余的 .NET Core 攻城狮

0%

09 Fiddler 前端快速调试

Fiddler 中的 Auto Responder 功能可以把要调试的文件保存到本地进行调试,这大大减少了在线调试的困难。

测试工程师在做测试的时候,也需要服务器返回 一 些特殊的数据来做测试,使用 AutoResponder 功能来伪造测试数据,能大大减少测试工程师的工作量。

9.1 如何在服务器上调试 JavaScript 文件

前端开发工程师在日常工作中,经常会发现服务器上某个 css 文件或者 JavaScript 文件有问题 。

一般情况下,遇到这种情况时是这么做的:前端工程师先在本地修改好 JS 文件,这个时候他并不能确保他的修改是对的:他需要把 JS 文件部署到测试环境上,然后测试和验证;如果修改得不对,还需要重新修改、 重新部署。

image-20210109015812145

缺点:

  1. 部署非常浪费时间
  2. 容易影响测试环境或者开发环境的稳定性
  3. 可能需要大量的修改和验证,非常繁琐,非常浪费时间

9.2 Fiddler AutoResponder 的工作原理

使用 Fiddler 可以替换自动返回的一个伪造的 HTTP 响应 。这跟之前介绍的下断点修改 HTTP 响应差不多 ,只不过 AutoResponder 是自动的,操作更方便,

image-20210109020127382

9.3 Fiddler 在线调试 JavaScript 文件

线上环境有一个 JavaScript 文件出了问题,我们可以利用 Fiddler 来快速调试,具体操作步骤如下(整个步骤需要重试) 。

  1. 网页 http://www.cnblogs.com/liqingwen/ 使用 了 一个 JS 文件 TankPageFooter.js ,先把这个 JS 文件保存在本地。
  2. 编辑本地的 JavaScript 文件,将其中的代码改为:
1
2
3
4
$().ready()
{
$('.site-title").html("update by Fiddler AutoResponder!!!!! tank xiao");
};
  1. 启动 Fiddler,在浏览器中打开 http://www.cnblogs.com/liqingwen/,我们可以看到Fiddler 抓到 了 这个
    JavaScript 的 HTTP 请求,应该是:http://files.cnblogs.com/liqingwen/TankPageFooter.js
  2. 在 Fiddler 中,找到 http://files.cnblogs.com/files/liqingwen2/TankPageFooter.js 这个请求,然后将其拖曳到 AutoResponder 中。

image-20210109021832668

  1. 在 RuleEditor 中单击“ Find a file . . . ”,选择本地 JavaScript 文件的路径。

  2. 选中“ Enable rules” ,激活规则。选中“ Unmatched requests passthrough”,放行不匹配的 HTTP 请求

  3. 单击“ Save“按钮

  4. 你只需要修改本地机器上的文件,然后刷新浏览器,这样你就能看到效果了

image-20210109022240661

image-20210109022255392

image-20210109022312418

9.4 浪漫的程序员

Fiddler AutoResponder。

9.5 替换网页中的图片

Fiddler 替换掉网页中的图片。

  1. 启动 Fiddler,打开浏览器访 问 https://blog.669.icu/
  2. 在浏览器中把一张图片保存到本机中,命名为 fanguzai.jpg。

image-20210109022506020

  1. 用画图工具编辑 fanguzai.jpg 。

  2. 在 Fiddler 中,找到这个图片的 Sesssion,并且拖曳到 AutoResponder 中。

  3. 在 RuleEditor 中,单击“ Find a file … . ”,选择本地的 fanguzai.jpg 。 选中“ Enable rules ”,激活规则,选中“ Unmatched requests passthrough ”,并且单击“ Save "按钮。

image-20210109022559935

image-20210109022613710

  1. 刷新浏览器,可以看到网页中的图片己经被替换了

image-20210109022638712

参考

  • 《HTTP抓包实战》