调试之Fiddler修改返回结果Response

菜鸟老黑的经验：调试之Fiddler修改返回结果Response

2016.06.24 18:28 34600浏览

 字号

前段时间和后端调试数据，后端会返回一些未知的数据的，出现带标签的数据极少，那么就要模拟，去改数据库，怎能么办呢？相当麻烦，据说Fiddler可以修改返回的数据，但是在网上找了很多教程也没用，都太坑了，于是就苦逼的改了下数据库，来模拟，太麻烦了啊。最近闲了，也带了几个实习生让他们来研究。指明了方向之后，终于出结果了，所以啊，人不逼自己不知道自己多牛b啊。

场景：在前端调试数据ajax接口时候，为了测试一些后端返回的特殊数据结构对页面和客户端的影响，需要造一些假数据，来测试，例如xss、长数据、不同字段类型（数组、字符串、数字）等等。

方案：

1、node实现假数据接口（学习成本高，但是一劳永逸）；

2、让后端帮忙修改（不太现实，沟通成本高）；

3、通过网络代理截获返回的数据进行修改

……

还有很多，我就不举例子了，我今天重点要说的就是第三种Fiddler来实现目的，其他代理工具也可以，但是我喜欢fiddler。

好吧废话不多说，这就开始。

这种方案的有点就是，即时成本低、不需要打扰后端、即时修改即时测试、可以打断点等等。

下载fiddler的最新版本；

运行fiddler之后测试要调试的页面是否可以捕获，刷新页面后左边列表会实时显示目前http请求的条目。如图红色部分

测试成功，开始断点捕获数据

点击菜单栏按钮【Rules】—【automatic Breakpoints】-【After Response】如图

选择这一项的意思是我要在请求返回后修改返回结果

当然你也可以在下方黑色输入框里输入 Bpafter XXX （xxx是你要测试的地址哦）

ok 点击右边的【Inspector】选项卡；

这个时候开始刷新页面，你会发现页面卡着不动，Fiddler左边的转台框http请求前出现红色框框，这个时候说明配置成功；

我们找到我们需要修改的接口，当然首页也行，我不修改首页，这个时候我在命令行中输入【go】命令放行，直到我要的接口出来

我要修改的接口是【getall】如图，点击选中，看右边下方的框框，点击黄色箭头指向的按钮，【Transformer】，记住他的编码格式，默认下【chunked Transfer-Encoding】是选中的，去掉之后下方【HTTP Compression】选中在【GZIP Encoding】上的，没有的话最好，要记住选项，我们在这里统一勾选【no Compression】意思是不压缩，如果不点你的代码没办法修改是乱码的。修改完之后又要点回来的，重新压缩。

然后点击【Textview】可以修改了，看下面图片；

ok，这个时候看页面是否已经被改！

bingo！！！

很简单吧，其实难得地方主要是你的断点控制，JS必须伴随着接口一起放行，不然会报错的。当然你修改css，或者html等等，都不需要的。试试吧。