作者：极客小俊
公众号同名: 一个把逻辑思维转变为代码的技术博主
Fiddler辅助标签工具栏 详解
Fiddler中辅助标签工具栏算是用得比较多的，因为经常要在这里查看抓取数据包的详细信息!
接下来我就详细拆分辅助标签工具栏的各个区域来讲解!
Statistics 性能统计
用于查看请求的性能数据,统计与分析, 也就是说它就是对当前请求的性能分析数据
当你点击一个HTTP请求会话的时候，就可以看到Statistics里面有关于当前HTTP请求的性能以及数据分析!
例如: 一些TCP/IP的连接时间，DNS的解析时间、资源消耗、各个国家的请求网络带宽对比等信息
如图
如果你是一个专业的前端开发者，这些数据就应该重点关注一下!
Inspectors 请求与响应数据查看
你有没有想过在Fiddler中如何快速查看http请求与响应报文呢?
其实当我们在会话列表中双击某一个会话请求就会自动跳转到Inspectors选项卡
也就是当抓包成功之后, 就可以在左侧窗口中选择你要查看的地址来进行查看抓取的http信息数据， 当选择了相应的地址之后，在右侧选项卡中 选择Inspectors(检查器), 然后再点击一下Raw就可以按照原生形式来进行查看到相应的http请求报文与http响应报文, 分为上下两个部分，上半部分是请求头部分，下半部分是响应头部分。
如图
对于每一部分,提供了多种不同格式查看每个请求和响应的内容, Inspectors选项卡中还有其他的
Inspectors选项卡上半部分HTTP请求内容的子集选项卡如下表
| 名称 | 含义 |
|---|---|
Headers |
以层级的形式来显示HTTP请求头部的相关内容信息 |
TextView |
以文本的形式展示 |
SytaxView |
查看具体的请求体 或者附带的键与值 |
WebForms |
可以通过它看到url提交的相关参数信息 |
HexView |
以16进制进行查看请求! |
Auth |
查看请求数据权限 |
Cookie |
查看请求cookie信息 |
Raw |
原生查看http |
JSON |
以JSON格式展开查看请求信息! |
XML |
以xml格式展开查看请求信息! |
Inspectors选项卡下半部分HTTP响应内容 的子集选项卡如下表
| 名称 | 含义 |
|---|---|
Transformer |
|
Headers |
以层级方式来展示HTTP响应头部信息 |
TextView |
以文本方式来展示HTTP响应正文信息 |
SyntaxView |
以语法高亮来展示HTTP响应正文信息 |
ImageView |
以图片的形式来展示响应信息, 前提是你选择的会话是一个图片响应 |
HexView |
以16进制来查看响应信息 |
Webview |
以html编译显示之后的形式来查看响应结果 |
Auth |
查看响应权限 |
Caching |
查看响应缓存相关信息 |
cookie |
查看响应cookie信息 |
Raw |
以原生格式展示响应信息 |
JSON |
以json展示响应信息 |
xml |
以xml展示响应信息 |
AutoResponder 自动拦截请求
AutoResponder也叫做自动响应器
它允许你拦截指定规则的请求，并把响应结果重定向到一个本地资源 或 直接使用Fiddler内置的资源，从而代替服务器来自定义一个你想要的响应。 说白一点就是篡改响应
这个功能在我们做开发测试的时候也是非常有用的 ，使用它我们可以不影响用户体验的前提下进行测试!
举个例子🍐 当我们请求百度页面的时候, 抓取到其中一个百度logo图片会话,最后把这个图片会话响应给替换成其他资源!
首先我们可以在Fiddler中的Inspectors结合会话列表找到这个图片的连接资源URL地址: 可能有多个
例如
然后切换到AutoResponder选项卡, 在Rule Editor规则编辑中填入要请求的资源地址和替换成的响应，最后点击save保存一下, 就可以了!
温馨提醒 最好要把以下这3个复选框勾上!🙂
Enable Rules(启用规则)
Accept all connects(接受所有连接)
Unmatched requests passthrough(不匹配的请求传递)
如图
那么下一次你再次请求百度页面的时候,如果再次遇见到这个百度logo图片的资源地址，那么请求就会被中间层的Fiddler所劫持并篡改成为我们设置的某个响应资源，并返回给客户端, 明白了吧, 这个响应不是从服务器回来的，而是我们人为篡改的!
注意测试的时候，最好使用去缓存刷新来测试, 浏览器快捷键shift+F5
效果如图
Fiddler其实还有很多内置的响应规则，根据实际情况和需求来决定如何测试
如图
我们还可以自定义编辑响应也就是Edit Response
举个例子🍐 我们可以直接编辑服务器返回响应信息的详细内容,然后再返回给客户端
如图
效果如下
响应都可以随便篡改 Fiddler还有什么事情不能做的!😁😁
总之通过这种中间截获的手段并篡改响应资源的手法就可以实现很多资源响应的修改，你也可以修改html、css、js等资源都是可以的 ,这极大方便了我们做开发模拟请求和响应测试!😄😄
Composer 设计请求发送到服务器
它可以允许我们自定义请求报文来发送到服务端，当然也可以手动创建一个新的请求，也可以从会话列表中拖拽一个现有的请求去发送!
在Parsed(解析模式)下我们只需要提供简单的URL地址就可以了, 并且还可以在RequestBody中去定制一些属性，例如模拟浏览器消息头User-Agent
但是Composer通常在我们开发项目当中用于接口测试 也是经常用于测试一些api接口的最好方法!
当然有时候也可以通过Composer来校验后端接口的严谨,从而跳过一些前端的限制,去直接访问后端代码的逻辑!
Composer下还有几个子集选项卡:Parsed、Raw、Scratchpad、Options
具体解释如下表:
| 选项卡 | 描述 |
|---|---|
Parsed |
表示已经被解析的整个HTTP请求,包括请求行,请求头和请求体,说通俗一点也就是最直观的看到Request请求的详细展示 |
Raw |
按照真实原生HTTP请求标准来进行展示的格式! |
Scratchpad |
可以存储已经收集好的HTTP请求，可存储多个不同的请求, 你可以理解为请求回放功能， 鼠标连续点击三次即可选中要选择的请求来进行发送! |
Options |
设置一些请求选项 |
其中options中的设置项如下表:
| 名称 | 描述 |
|---|---|
| Inspect Session | 检查会话，当开启此功能并重放的时候，会自动跳入Inspectors功能模块，进行检查HTTP请求和响应。 |
| Fix Content-Length header | 当使用POST请求进行重放的时候，如果没有Content-Length的请求头，Fiddler会自动加上此请求头，如果有但是请求正文大小错误，则它会自动修正。默认勾选。 |
| Follow Redirects | 会自动重定向301，302的请求。 |
| Automatically Authenticate | 自动进行身份认证，包括认证NTLM，http 401，http 407 |
| UI Options | 此功能是在原有的Fiddler功能选项里面，将Composer这个功能弹出一个浮动窗口，如果不需要直接关闭这个窗口就会恢复原样。 |
| .................................................. |
我们用得最多的也就是Parsed(详细展示请求结构)
如图
举个例子🍐 我们用图灵机器人来测试一个POST请求的智能聊天对话接口!
图灵机器人接口信息
| 接口信息 | 描述 |
|---|---|
| http://openapi.turingapi.com/openapi/api/v2 | 接口地址 |
| 请求方式 | HTTP POST |
| 请求参数 | 请求参数格式为 JSON |
参数格式
{
"perception": {
"inputText": {
"text": "聊天文字"
},
},
"userInfo": {
"apiKey": "申请的key",
"userId": "随机32位字符串"
}
}
文档说明 https://www.kancloud.cn/turing/www-tuling123-com/718227
操作流程
那么使用Fiddler调试一个POST请求并带有json格式的数据，我们可以打开Composer面板, 在Composer面板中的第一个下拉框中选择POST请求方式,然后输入请求接口的地址!
在Request Headers中也可以输入一些请求头信息，也可以不输入，它会帮你自动生成
然后在Request Body中输入请求的JSON数据
最后点击Execute(执行),若在会话列表中看到结果返回200表示操作成功！
如图
这个时候,我们就可以在Inspectors里面查看到请求响应的结果了!
如图
如果返回的JSON数据格式不清楚，其实你可以拿到一些数据格式化网站上去格式化一下就可以了
如图
再举个例子🍐 我们再请求一个GET请求
如图
这样就可以返回数据了!
以上这些都是测试的第三方接口，如果是你自己写的api接口也是可以这样子来测试的!
总而言之:Composer可以帮助你去发送数据包,帮助你去做一些接口测试,帮助你去做一些平常没办法做到的一些测试!☺️
Filters 请求过滤器
Filters本意就是过滤的意思, 它的主要作用就是用来过滤请求用的， 要知道有的时候 会话列表中或存在大量的请求会话, 那么有些时候会根据用户的条件进行一个会话筛选, 也就是说通过过滤规则来过滤掉那些不想看到的请求!
Filters选项卡也是在我们抓包过程中使用频率非常高的，其中功能也比较多，这里我把它内部的功能逐一拆解分成7个部分来进行讲解!
如图
1.Hosts 这是Filters对主机的过滤规则设置!
如图
我们使用Filters的时候就必须要勾选左上角的Use Filters(选择过滤器)开启过滤器, 勾选了之后Filters选项卡会出现绿色对钩, 记住这个勾选之后，过滤器才会生效
并且这里还有两个请求过滤条件:Zone和Host
Zone(区域): 下拉列表中可以选择如下:
show only Intranet Hosts(只显示局域网的请求)
show only Internet Hosts(只显示广域网的请求)
如图
那么这到底代表什么意思呢？
举个例子🍐 我们来请求baidu试试!
如图
如果设置为了show only Intranet Hosts 那么外网的请求会话是无法获取到的,智能获取内网请求
如果设置为了show only Internet Hosts那么相反也智能获取外网的请求，而内网的请求是无法获取到的!
平常如果我们没有其他特殊需求的情况下Zone都被默认设置为了No Zone Filter(不用区域过滤)
注意:各位要留意 Intranet(内网) 和 Internet(因特网) 这两个单词很多人容易搞混!
Host(主机):下拉列表中可以选择如下:
如图
含义解释:
Hide the following Hosts(隐藏下列指定的主机的请求)
show only the following Hosts (仅显示以下指定主机的请求)
Flag the following Hosts(标记以下主机)
举个例子🍐 比如说: 我设置其中一个show only the following Hosts (仅展示以下指定主机的请求) 那么会话列表中只会出现我所指定的主机请求会话，其他一概不显示!
注意: 这里设置之后 要点击一下Actions中的Run Filterset now(运行过滤)
如图
另外两个根据自己需求设置就行了, 平常没特殊需求我们也是设置的No Host Filter
2.Client Process 这是对客户端进程的一些过滤设置!
如图
其中有三个复选框:
show only traffic from (仅显示当前客户端指定进程的请求)
show only Internet Explorer traffic (仅显示Internet Explorer请求)
Hide trafficfrom Service Host (对服务主机隐藏请求)
举个例子🍐 我仅显示ie浏览器的请求会话,其他浏览器的请求会话一概不显示!
如图
看到了吧，这对某一些需求上还是有一定帮助的!
3.Request Headers 这是对请求头的一些过滤规则
如图
其中有几个复选框功能如下表:
| 名称 | 描述 |
|---|---|
show only if URL contains |
仅展示当前URL中包含指定内容的请求会话 |
Hide if URL contains |
隐藏当前URL中包含指定内容的请求会话 |
Flag request with headers |
用头标记请求, 标记带有特定header的请求，如果在web session列表中存在该请求,会加粗显示。 例如，我想突出显示header信息中带有token字段的URL请求,即可以勾选上这项,并在后面输入：token。 |
Delete request headers |
删除请求头, 也就是说在请求的过程当中会删除指定的Header字段。我们在进行测试时非常有用，比如说去掉URL中的Content-Type信息 |
set request header |
设置请求头, 也就是说可以在请求头中自定义请求头信息，前面输入字段，后面输入值, 这就是我们可以进行自定义请求头内容 |
| ..................................................................... |
举个例子
例如: 勾选show only if URL contains只会显示指定包含这个内容的 响应会话
如图
例如: 勾选set request header然后我们自定义一个header头信息 然后去发送一个请求
如图
然后我们可以在Inspectors中查看到请求头就有我们所自定义的头信息了, 有的时候做一些特殊调试还是能够起很大帮助的!
如图
4.Breakpionts 断点设置
这个功能有的时候也非常重要!
功能解释如下表:
| 功能 | 描述 |
|---|---|
Break request on Post |
针对所有POST请求设置断点。 |
Break request on GET with query string |
给所有带参数的 GET 请求设置断点 |
Break on XMLHttpRequest |
针对所有Ajax请求设置断点。 |
Break response on Content-type |
针对响应报文中header字段中，Content-Type属性匹配成功的请求设置断点 |
| .............................................................................................. |
关于请求断点后面单独拿一章节来说!
5.Response Status Code(请求状态码过滤)
这一部分的功能，很简单就是看状态码进行会话的过滤
如图
功能解释如下表:
| 功能 | 描述 |
|---|---|
Hide success(2xx) |
隐藏响应状态码为2xx的URL请求，如：响应状态码为200的URL请求将隐藏掉 |
Hide non-2xx |
隐藏响应状态码不是2xx的URL请求。 |
Hide Authentication demands(401,407) |
隐藏认证（响应状态码为：401 407）的URL 请求。这些响应需要用户进一步确认证书，authentication demands是认证需求的意思。 |
Hide redirects(300,301,302,303,307) |
隐藏重定向（响应状态码为：300，301，302，303，07）的URL请求。 |
Hide Not Modifield(304) |
隐藏不是缓存的状态码（304）的URL请求, 因为304是请求的资源从上次起没有发生变更返回的状态码。 |
| ............................................................................................. |
举个例子
我们勾选Hide success(2xx) 返回的请求会话中是不会包含2xx状态码的请求
6.Response Type and Size (根据响应类型和大小进行过滤)
如图
Show all Content-Type 这一项比较常用, 意思为显示所有指定Content-Type类型的请求
其中的选项描述如下表:
| 功能 | 描述 |
|---|---|
Show only IMAGE/* |
仅显示响应类型为图片的请求, 即响应header中Content-Type=IMAGE/的请求，*为通配符 |
Show only HTML |
仅显示响应类型为HTML的请求。 |
Show only TEXT/CSS |
仅显示响应类型为text/css的请求。 |
Show only SCRIPTS |
仅显示响应类型为Scripts的请求 |
Show only XML |
仅显示响应类型为XML的请求。 |
Show only JSON |
仅显示响应类型为json的请求。 |
Hide IMAGE/* |
隐藏所有响应类型为图片的请求。 |
| .............................................. |
其他功能项如下表
| 功能 | 描述 |
|---|---|
Hide smaller than |
隐藏小于指定大小响应结果的请求,大小可以在 Inpsectors 中响应结果部分的 Transformer 中查看 |
Hide larger than |
隐藏大于指定大小响应结果的请求 |
Time HeatMap |
时间的热图。 |
Block script files |
阻止返回正常JS文件。如果响应是脚本文件，那么响应 404。 |
Block image files |
阻止返回正常图片文件。如果响应是图片文件，那么响应 404 |
Block SWF files |
阻止返回正常SWF文件。如果响应是SWF 文件，那么响应 404。 科普一下swf(shock wave flash)：是Macromedia公司的目前已被adobe公司收购）公司的动画设计软件Flash的专用格式 |
Block CSS files |
阻止返回正常CSS文件。如果响应是 CSS 文件，那么响应 404 |
| .............................................. |
举个例子 比如我们禁止掉页面上的css js 等资源看看请求的结果是什么样子的!
如图
效果
那么此时请求的页面将会失去css 、js、图片等资源, 让他们都响应为404状态
以上这些功能可以测试一些资源等加载失败的情况下页面的展示情况, 前端必备哦!
7.Response Header (根据响应头信息进行过滤)
如图
功能详解如下表:
| 功能 | 描述 |
|---|---|
Flag responses that set cookies |
会话列表的响应中有cookies信息的加上标识斜体 |
Flag responses with headers |
会话列表里标记响应中带有特定header的请求 即加粗。 |
Delete response headers |
会话列表里删除响应信息中，就是说没有发给客户端之前就把这些响应头删除掉! |
Set response header |
在响应中添加header字段, 也就是自定义响应头信息，再发给客户端 |
| ............................................................................ |
小结 有些新手朋友在使用Fiddler的时候出现抓包失灵的情况，可能就是你在Filters选项卡中勾选了什么东西才导致的! 所以使用过滤器要注意一下!
如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
如果以上内容有任何错误或者不准确的地方，🤝🤝欢迎在下面 👇 留个言指出、或者你有更好的想法，欢迎一起交流学习❤️❤️❤️❤️❤️
