帮助前端--更好的调试接口之Fiddler

前言

1. 有时候后台接口出现错误，但我们又不想配置Mock 或者 自定义json文件的时候
2. 当测试人员需要使用测试数据，而没有权限去更改数据的时候
3. 当想更加明确保证项目参数传输时候不会出现串改问题
4. 当想获取app或者手机端接口时候

介绍Fiddler

1. fiddler 是以代理web服务器的形式工作的，它使用代理地址:127.0.0.1，端
口:8888。当Fiddler退出的时候它会自动注销，这样就不会影响别的[程序]
如果Fiddler非正常退出，这时候因为Fiddler没有自动注销，会造成[网页]
无法访问。解决的办法是重新启动下Fiddler。

2. 想查看fiddler 到底进行了什么偷偷的配置如图

3. Fiddler 到底做了什么,他其实就像一个中间人,举个例子原本我们想去买瓶水,
但是太懒了就叫别人帮忙,这时候帮助我们买水的人就相当于fiddler,他知道我们
要买的那种水,并且还能帮我们把钱给老板,并且把水拿回来

4. 简单的说正常一个请求是从客户端,也就是我们用的浏览器,直接发送给服务
端,也就是我们要访问的链接内容,但现在有了fiddler,我们先从客户端给到fiddler,
fiddler在给到服务端,服务端再个fiddler,fiddler再给客户端

5. 根据三四条的解释我们大体可以勾勒出,当我们启动fiddler时候,他会默默在我
们局域网代理进行配置,具体的配置就如下图.
复制代码

配置电脑端Fiddler 抓取

1. 点击Tools ，选择Options，点击connections 进行如图配置

2. 配置抓取Https 请求

1. 点击Tools ，选择Options，点击Https 进行如图配置

2. 选择actions，选着第二项在桌面生成证书

3. 将桌面证书双击进行安装

配置手机端Fiddler 抓取

1. 保证手机和电脑在同一局域网（也就是同一个wifi）
2. 查看电脑ip 地址 win+r-》输入cmd-》输入ipconfig-》找到无线局域网适配
器 WLAN:Ipv4 地址。
3. 手机设置-》wlan设置-》选着wifi-》选择代理手动-》
4. 其中手机选项的主机名为本地电脑ip，端口为fiddler对应配置端口
5. 在手机浏览器输入,我们在fiddler看到的ip:端口,弹出手机安装证书,安装证书
复制代码

• 通过fiddler 产看ip

• 手机配置

• 配置接收手机的https 协议 电脑ip:端口号

链接手机后只抓app包请求

1.手机上设置代理后，这时候fiddler上抓到的是pc和app所有的请求，如果pc上打开网址，会很多，这时候就需要开启过滤功能了。
2.打开fiddler>Tools>Fiddler Options>HTTPS>...from remote clients only,勾选这个选项就可以了
from all processes :抓所有的请求
from browsers only ：只抓浏览器的请求
from non-browsers only :只抓非浏览器的请求
from remote clients only:只抓远程客户端请求**
复制代码

Fiddler 查看接口的请求和响应

1.Fiddler，比较常用的就是用来查看接口的请求和响应
2.这里我们将简单的了解，如何去分析一个接口，以及一个接口的请求和响应
复制代码

Get查看案例

1.以今日头条为例,进行GET 抓包讲解附上链接
'https://www.toutiao.com/search/?keyword=%E5%86%AC%E5%A4%A9'
2.上面的链接是在今日头条中搜索冬天的图片
3.去定位一个接口全靠经验和技巧,这里分享两个方法,第一种将这个fiddler全局
,打上断点(断点是什么后续会讲解),第二种利用谷歌浏览器的开发者工具,f12在
network去定位请求链接,利用fiddler指令去锁死该请求(具体操作看篡改篇章)
4.上面这两种我喜欢第一种,但是其实第二种最好
复制代码

案例展示

1.点击左侧接口连接,在右侧Inspectors(检查)
2.整个接口信息被分成上下两个部分,上面请求信息下面是响应信息
3.请求信息上的模块依次解释内容
    3.1.headers:请求头(请求头有啥可以看我的python入门到放弃章节有讲解)
    3.2.webfroms：请求参数信息表格展示(可以在这里做篡改,什么是篡改见篡改讲解)
    3.3.Auth:授权相关
    3.4.cookies:查看cookie详情
    3.5.raw:完整的请求体,里面可以查看请求头请求体
    3.6.json:查看json数据
    3.7.xml:查看xml文件的信息
4.响应信息的依次解释:
    4.1Transformer : 当我们想更改在页面显示的接口数据对客户端回包时候 使用             
    4.2.headers:响应头(请求头有啥可以看我的python入门到放弃章节有讲解)
    4.3.TextView/SyntaxView/ImageView/HexView/WebView 其中        
    TextView/SyntaxView/WebView都是回来的文本信息展示，ImageView 是图片信    
    息，HexView 十六进制，
    4.4.cookies:查看cookie详情
    4.5.raw:完整的响应体信息,里面可以查看响应体
    4.6.json/xml:展示对应格式信息
复制代码

常用功能

请求头中 -- webFrom成就篡改

具体这里以请求体raw信息分析

具体这里以响应raw信息做分析

模拟进行限速

1.点开Rules-》Customize Rules
2.ctrl+f 搜索一下m_SimulateModem ，进行参数配置后ctrl+s
3.配置后 Rules-》Performances-》Simulate Modem Speeds 选项进
行开启限速
4.点击Save Script后，之前勾选的Simulate Modem Speeds会被取消勾选，需要重
新再勾选回来
5.oSession["request-trickle-delay" ] = "300"；（每上传1KB延迟300ms）
  oSession["response-trickle-delay" ] = "150"；（每下载1KB延迟150ms）
复制代码

• 第一步

• 第二步

• 第三步

伪造响应数据

1.和篡改请求信息不同响应信息,只是为了做一些数据展示,我们通过更改响应信息,来变
相更改页面信息(但只是更改自己的页面信息)
2.两者比较请求更多是安全,响应的更多是展示
复制代码

具体操作

1.下面两种是给响应打上断点
2.打上断点后找到对应连接进行数据篡改这里以今日头条为例
3.我们测试的连接"https://www.toutiao.com/search/?keyword=%E5%86%AC%E5%A4%A9"
复制代码

• 点击这里两次图标编程这个形式

• 另一种菜单切换

• 打上响应断点后开始更改数据（要更改的数据正常显示如图）

• 开始通过fiddler 进行修改

• 修改后

利用autoResponse进行篡改

1.直接伪造 一个响应文件
复制代码

操作

1.找到接口链接点击view in Notepad 将整个响应体下载
2.更改响应文件
3.在autoResponse 上传修改后的响应文件
4.更改后ctrl+f5 重新刷新页面
复制代码

• 下载响应信息，下载后另存为txt格式

• 更改响应信息内容

• 点击autoResponse将要更改的信息拖进匹配规则并且进行配置