阅读本篇内容之前，建议先对基础熟悉下

本文内容纲要如下

1、模拟限速操作
2、篡改数据
3、重定向功能
4、发送自定义请求，模拟小型接口测试
5、APP端抓包

一、限速

背景：进行日常测试时通常网络情况都比较好（内网），所以有时会忽略在低速或网络状况不好的情况下系统页面的表现（前端是怎么处理的）

手机可以用2G、3G、4G，也是一种方式，但这都是网络模式，而Fiddler可以设置上传和下载的延时时间，这种控制非常灵活，可以帮助我们模拟低速网络情况下页面、APP的显示与交互情况，比如响应时间过长时是否有弹出网络不好的提示、页面crash以及显示错乱、session是否一致等

设置限速时间

（1）打开 【Rules—Customer Rules】，Ctrl+F搜索（m_SimulateModem），默认发送数据是300毫秒，接收数据是150毫秒，根据实际情况限速后进行保存（Ctrl+S）

PS：默认是300和150，大致模拟出来的带宽如下

上传带宽=(1*8/1000)/0.300≈0.053Mbps 
下载带宽=(1*8/1000)/0.150≈0.027Mbps

实际带宽是在计算所得的基础上乘2，也就是说

上传带宽=((1*8/1000)/0.300)*2.0≈0.106Mbps 
下载带宽=((1*8/1000)/0.150)*2.0≈0.053Mbps

（2）启用限速：Rules—Performance—Simulate Modem Speeds

限速设置.png

演示：对于发送数据（uploaded）每KB延迟30000毫秒，接受数据(downloaded)每KB延迟30000毫秒

(3) 重启
打开浏览器，访问百度，搜索python，页面加载非常慢，等全部加载完成时可以到Statistics查看时间

image.png

真实案例：
订单详情页面，有个添加备注按钮，在按钮点击时已经做了控制，将按钮置灰，避免用户重复点击，但最终忘记做低速测试了，导致线上出问题了
通过排查是button未做防重复点击导致低网速下插入多条记录，这种情况需要前后端一起控制，前端设置变量，按钮点击后记录状态

添加备注页面.png
未限速导致记录重复添加.png

PS：测试结束后记得取消限速

二、篡改数据

篡改分两种：

一种是修改请求数据，检查接口的处理情况，这种适用于不方便直接调接口，其不关心页面，只看接口处理是否正常，返回的数据对不对

比如 Harbor House官网注册页面 用户名限制的字符长度是2-20 ，把字符加到21以上，看效果，根据前端页面的预期结果是提示用户名超长了，而实际结果是注册成功了

注册页面用户名.png

于是去数据库查了下表结构，发现用户名字段的长度是50，所以重新注册下，字符超过50，看接口返回的信息，提示“信息输入有误”，OK，测试通过，说明接口在这块做了保护

字符超过数据表字段长度.png

用刚注册成功的用户名进行登录，提示“账号长度只能在2-20位字符之间”，登录失败
（引申：这些不会生效的数据，也会被称为脏数据，不改掉会影响到后续性能）

登录失败

在这里做个假设：
仍然是上面的例子，页面上注册时提示没成功，但实际数据库中已经保存数据了，这样就算bug了，前端不应该在用户捕获到超过长度的字符时还去调用接口

理论上前后端对于输入参数的限制应该保持一致，但实际上数据库字段长度是要比前两者多的，因为要留有富裕的空间作为优化

再比如注册页面对用户邮箱有进行验证，Fiddler中修改后查看服务端是否有验证，有兴趣的朋友可以自己去尝试下

修改页面请求值

构造请求数据，突破表单的限制，可以随意提交数据，避免页面JS和表单限制，从而影响相关调试（绕过前端）

1、设置断点：

Fiddler菜单栏->Rules->Automatic Breakpoints->选择Before Responses，
也就是发送请求之后，在Fiddler代理中转之前是可以修改请求数据的

2、观察inspector，页面内容出现变化后修改Body的Value值，然后点击 “Run To Complete“，回到浏览器查看响应结果

修改请求值.png

从案例分享中，可以知道运单号的长度需>=5，那么调试时就输入3个字符，看看页面的响应是否正常
图中获取不到提示，显示undefined，说明并没有调用接口

请求响应.png

另一种是修改返回包的数据，关心的是页面处理情况
比如理财app上显示金额，那么我们在测试时肯定要考虑金额的长度，此时可以通过篡改数据来看服务端返回不同的结果来看页面显示是否正常

修改页面响应结果（拦截响应数据，修改响应实体）

1、设置断点：

Fiddler菜单栏->Rules->Automatic Breakpoints->选择After Responses，
也就是服务器响应之后，但是在Fiddler将响应中转给客户端之前是可以修改响应的结果

2、观察inspector，页面内容出现变化（说明拦截成功）

抓包页面.png

3、切换到TextView，修改message，然后点击 “Run To Complete“，回到浏览器查看响应结果

页面响应结果.png

PS：可以试着将message信息改的很长，页面变形了，那就说明有问题了
如下页面是增加了滚动条

image.png

三、利用AutoResponder替换服务器的返回数据（即原资源）

AutoResponder：重定向功能，将HTTP请求重定向到本地的文件，进行调试。

1、比如 百度官网 logo，用户提出来要更新下，这时可以通过这功能实现，也就是不需要修改代码，就能预览换个logo图片文件的效果

在右上角选择AutoResponder页签，勾选Enable rules、Unmatched requests passthrough 两个选项，点击Add rule 按钮，在下方填写替换的规则，编辑好之后，点击保存

第一行填写地址完全匹配，也可以写正则表达式进行模糊匹配，也可以从左侧把请求数据拖过来
第二行填写要替换的内容，下拉框有很多选项可以选择， 比如201、302、404，502等status code

设置替换规则.png

设置好替换图片后点击重新访问百度，请求回来的数据已经是替换后的内容了

image.png

2、修改Response数据时超时
设置断点【After Response】之后，修改响应数据，来实现修改Response的内容，
但是这样容易造成请求超时

超时：客户端发送一个请求出去，如果在指定的时间内，没有返回，那么就不会再来处理这个请求了

假设修改内容的操作大于设置的超时时间，就算之后将断点放行，请求返回200，这个时候客户端也不会做任何处理，可以理解为修改的内容没有产生效果。

此时就可以利用AutoResponder的功能了，直接将修改之后的内容放到文件
步骤：
（1）查看该结果返回的数据内容及格式
选择请求，右击，Save -> Response -> Response Body ，保存响应体，可以是文本格式

保存响应体.png

（2）修改响应体的数据，如图修改title，重新发送请求，发现title和响应头部信息都已经更新

修改响应体的数据.png

PS：强制刷新Ctrl+F5，获取最新资源

四、发送自定义请求（request-builder）

Composer：一个小型、简易的接口测试工具，可以填接口地址，设置请求参数、填写响应结果，也可以修改相应的头信息（如添加常用的accept，host，referrer，cookie，cache-control等头部）后execute

1、比如 POST请求， Harbor House官网注册页面

先输入正常值，抓取请求数据，然后找到相应的请求，直接拖到Composer里面，然后在Copmposer中修改参数数据（此处为账号），点击Execute 就会产生一个新的请求，双击后可以看到返回的信息，提示账号已经存在

请求数据.png
提示信息.png

2、比如GET请求，百度搜索python

双击请求，切换到Webview

百度搜索请求

PS：如果是乱码，请求header那设置 Content-Type：charset=utf-8

五、APP端抓包

前置条件

1、手机和电脑在同一局域网（PC端可以设置wifi热点）
2、完成Fiddler的配置（允许远程连接），端口默认8888，然后重启Fiddler使其生效
Tools——>Options——>Connections，勾选Allow remote computers to connect

Fiddler配置.png

接下来在CMD命令窗口，查看Fiddler进程是否能正常监听8888端口，如果服务没有正常开启，可以尝试使用其他端口，端口修改的位置，如上图位置
以下两种方法都可以：
（1）执行 netstat -anop tcp
（2）执行 netstat -ano|findstr “8888”
PS：0.0.0.0:8888，4个0代表所有的ip都可以连接进来这个端口

查看端口.png

3、查看本机的IP
（1）命令行中输入：ipconfig 查看 IPV4

命令行中查看IP.png

（2）直接在Fiddler中查看

Fiddler中查看IP.png

4、手机配置代理（我用的iPhone手机）
（1）设置——>无线局域网——>选择wifi——>设置HTTP代理（输入IP，端口是Fiddler的代理端口8888）

手机设置代理.png

（2）打开手机浏览器Safiri下载证书 就可以抓取https的请求了

• 输入：http://本机的IP:8888，下载FiddlerRoot certificate
• 安装并进行验证

手机证书配置.png

5、操作app进行抓包

image.png

如果只想看移动端数据，也很简单，只需关闭pc端的代理就可以了（关闭Fiddler的“Capuring”开关）

关闭Fiddler的“Capuring”开关.png

答疑解惑：
有一次，公司办公，需要抓包，此时手机和电脑连的都是wifi，工具设置也没问题，就是抓不到包，后来发现是网络的问题
解决办法：电脑上安装热点，手机连电脑热点，之后就可以抓包了

PS：抓包之后记得关闭手机代理，以免手机上不了网

结束语

通过Fiddler可以抓取请求和响应参数，对参数进行分析，可以定位是前端还是后台问题。

案例一：
在测试登录接口时，输入了正确的手机号和密码，点击登录后，前端提示“请输入正确的用户名和密码”
如上案例，仅仅通过界面的提示信息，我们只能描述bug表象，但不能分析出问题原因。假设通过抓包发现是由于前端参数名错误或 参数值为空，从而导致后台报错。

案例二：
在列表页测试搜索接口时，输入商品一、二级类目，点击搜索，页面没有数据
通过抓包发现前端提交的二级类目参数与接口文档中的字段不一致

针对上述两种案例，测试人员就可以将bug指向前端开发人员，并将参数数据和接口文档中对应的报文数据以附件的形式上传，是不是可以提高bug的解决效率呢？同时也可以让开发对测试人员有个好印象（哇，这测试还是可以的，把原因找出来了），不是嚒！

Fiddler在实际的功能测试中有很大的作用
1、可以更好的了解某个业务中客户端和服务器端是通过哪些接口进行请求的，从而更好的了解代码逻辑（尤其对于新人来说，通过抓包和数据库的数据写入操作就能很快熟悉）；
2、可以通过响应数据判断哪里出现了问题
比如服务器挂了，导致前端报“服务器故障”，这时通过抓包发现响应数据返回502，这时我们可以手动去重启服务或是联系运维重启服务

image.png