Fiddler Everywhere是适用于macOS、Windows和Linux的安全且现代化的web调试代理。他可以捕获、检查、监视计算机与Internet之间的所有HTTP(S)流量、并且可以mock请求,并诊断网络问题,这种方法既简单又可节省大量时间和成本。这下再也不愁mac上抓包了。
![图片](https://img-blog.csdnimg.cn/2b4d270fa91b48cfa296566b0320847a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rWL6K-V55WM55qE6aOY5p-U,size_13,color_FFFFFF,t_70,g_se,x_16)
01 Fiddler Everywhere安装
下载
https://www.telerik.com/download/fiddler-everywhere
填写相关信息,下载软件
![图片](https://img-blog.csdnimg.cn/aadad5abac5c4878919d3b1e59c0b8cd.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rWL6K-V55WM55qE6aOY5p-U,size_20,color_FFFFFF,t_70,g_se,x_16)
安装
双击下载的exe文件图片,一路下一步
创建账号,完成邮箱激活,然后登录
![图片](https://img-blog.csdnimg.cn/81f48b771a8f4ff1a9221d46982da750.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rWL6K-V55WM55qE6aOY5p-U,size_20,color_FFFFFF,t_70,g_se,x_16)
登录成功后界面
![图片](https://img-blog.csdnimg.cn/db17953560754827a50f90908d8b7879.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rWL6K-V55WM55qE6aOY5p-U,size_20,color_FFFFFF,t_70,g_se,x_16)
02 基本设置
设置都点右上角的图片,进入设置界面
1、HTTPS 设置
![图片](https://img-blog.csdnimg.cn/9e1d89d4cc1d4c51a69f736b955b59d3.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rWL6K-V55WM55qE6aOY5p-U,size_20,color_FFFFFF,t_70,g_se,x_16)
![图片](https://img-blog.csdnimg.cn/04e83ebd325b48e39dd8c280bbe0ecb7.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rWL6K-V55WM55qE6aOY5p-U,size_18,color_FFFFFF,t_70,g_se,x_16)
![图片](https://img-blog.csdnimg.cn/70da7c41472b4bd0a79bb74112457966.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rWL6K-V55WM55qE6aOY5p-U,size_20,color_FFFFFF,t_70,g_se,x_16)
打开浏览器在百度搜索码同学
查看fiddler的session面板,可以看到https的请求捕获
![图片](https://img-blog.csdnimg.cn/2359bd0b09d84c35a353472d6c3b5fa8.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rWL6K-V55WM55qE6aOY5p-U,size_20,color_FFFFFF,t_70,g_se,x_16)
l 代理端口及远程设置(可以用来抓手机的)
![图片](https://img-blog.csdnimg.cn/01bcee30e5f14c0b9a263d21c954e664.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rWL6K-V55WM55qE6aOY5p-U,size_20,color_FFFFFF,t_70,g_se,x_16)
2、手机上的设置(安卓)
首先保证手机和Fiddler所在的电脑在同一个局域网内
查看Fiddler所在电脑ip
打开手机的wifi,长按wifi,修改网络
勾选显式高级选项,代理选择手动,依次填写服务器主机名和端口,服务器主机名就是电脑的ip,端口默认是8866
![图片](https://img-blog.csdnimg.cn/0b00b689969d40fe978656d11edf15c7.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rWL6K-V55WM55qE6aOY5p-U,size_12,color_FFFFFF,t_70,g_se,x_16)
在手机浏览器访问Fiddler的代理服务(10.0.0.9:8866),下载证书并安装
![图片](https://img-blog.csdnimg.cn/ad36d752aefa424caf339a3a3577e69f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rWL6K-V55WM55qE6aOY5p-U,size_12,color_FFFFFF,t_70,g_se,x_16)
03 请求信息查看
左侧选中要查看的请求信息,在右侧Inspections下,上半部分为请求发起的相关信息,下半部分为请求响应的相关信息
![图片](https://img-blog.csdnimg.cn/72c1a7d0b9f84804ba55f1b3a28e2010.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rWL6K-V55WM55qE6aOY5p-U,size_20,color_FFFFFF,t_70,g_se,x_16)
请求相关信息
Headers:请求头信息
Params:请求的查询参数
Cookies:cookie信息
Raw:文本形式展示请求的所有信息
Body:请求体,主要是请求参数,分为多种格式的Text/JSON/XML/Form-Data
响应相关信息
Headers:响应头信息
Cookies:cookie信息
Raw:文本形式展示响应的所有信息
Body:响应体,主要是响应内容,分为多种格式的Text/JSON/XML
你是哪一种格式的参数就会展示在哪一个标签下
04 过滤
在Fiddler Everywhere这个版本中过滤的地方非常多,通常情况下我们希望只显示我们的目标域名下的请求信息,否则请求太多不好找
请求的每一列都有过滤选项,比如我们只想抓取www.mtxshop.com下的请求信息,那么可以在URL列进行筛选过滤
![图片](https://img-blog.csdnimg.cn/ae4021567f034f1e9cabb6657cb1d309.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rWL6K-V55WM55qE6aOY5p-U,size_20,color_FFFFFF,t_70,g_se,x_16)
每一列都可以按照这种方式进行操作,过滤的方式有很多
![图片](https://img-blog.csdnimg.cn/36425a4d813641daa970c5b4d6e01422.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rWL6K-V55WM55qE6aOY5p-U,size_11,color_FFFFFF,t_70,g_se,x_16)
05 Composer请求调试
Fiddler Everywhere版本增强了请求调试的功能,可以针对某个请求进行测试,就像PostMan一样,那么接下来我们针对码同学VIP课程实战项目的微服务商城的【立即购买】接口进行测试
- 选中【立即购买】接口邮件,选择Edit in Composer,会自动打开Composer界面
![图片](https://img-blog.csdnimg.cn/1b9d48eb608d46468b65ee6aa8aad216.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rWL6K-V55WM55qE6aOY5p-U,size_20,color_FFFFFF,t_70,g_se,x_16)
- 在Composer界面,修改参数执行测试
![图片](https://img-blog.csdnimg.cn/f170011014c343dfbb451eb4faf450c0.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rWL6K-V55WM55qE6aOY5p-U,size_20,color_FFFFFF,t_70,g_se,x_16)
- 保存测试
![图片](https://img-blog.csdnimg.cn/e77c564797b34b23a3b8becdfbd3e1ed.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rWL6K-V55WM55qE6aOY5p-U,size_20,color_FFFFFF,t_70,g_se,x_16)
06 Mock响应数据
mock响应数据一般可以用于前端bug的验证中,模拟服务器返回特定信息来查看前端是否做出正常处理,我们依然采用上述接口来进行
- 设计mock场景,例如参数都正确的情况下,模拟服务器返回登录状态失效的情况,在本地创建一个文件,写下响应信息,如下:
{
“code”: “403”,
“message”: “登录状态已失效”
}
- 选择【立即购买】请求右键选择Add New Rule
![图片](https://img-blog.csdnimg.cn/e7fb2cd769624fd4be356b9b78c77ffb.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rWL6K-V55WM55qE6aOY5p-U,size_20,color_FFFFFF,t_70,g_se,x_16)
- 设置假的响应信息,点第2步的操作
![图片](https://img-blog.csdnimg.cn/511ae54cc1274f09a064287fbe4d9496.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rWL6K-V55WM55qE6aOY5p-U,size_20,color_FFFFFF,t_70,g_se,x_16)
- 开启自动响应,一定要开,否则没效果
![图片](https://img-blog.csdnimg.cn/fa361f50884f468cb2902ee23dc45a6d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rWL6K-V55WM55qE6aOY5p-U,size_20,color_FFFFFF,t_70,g_se,x_16)
- 页面再次发起立即购买操作,页面提示网络错误,模拟成功
![图片](https://img-blog.csdnimg.cn/719f4b55d89c40289aa5fac0c041f80a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rWL6K-V55WM55qE6aOY5p-U,size_20,color_FFFFFF,t_70,g_se,x_16)
- 前面5步只是写模拟一种本地文件的方式,实际上我们模拟更多的情况,比如响应状态码是401、响应延迟等等,那么在定位响应规则时都可以根据各自情况进行选择
![图片](https://img-blog.csdnimg.cn/ccf0f4d2c4374909a243e12e64c17b94.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rWL6K-V55WM55qE6aOY5p-U,size_20,color_FFFFFF,t_70,g_se,x_16)