Fiddler 使用指南

Fiddler的功能

1. 监控HTTP流量
2. 查看截获的请求内容, 伪造请求
3. 测试网站性能(网站优化)
4. 解密HTTPS回话
5. 三方插件

Fiddler使用

1. 流模式 (实时返回数据) 更接近浏览器本身的行为
2. 缓冲模式 (所有数据全部获取之后才返回)

使用场景

1. 开发环境HOST配置
2. 前后端接口调试
3. 线上bugfix
4. 性能分析和优化
   • fiddler会提供请求的实际图, 清晰明了网站需要优化的部分

fiddler 工具栏

1. 备注 短信信息图标 对捕捉到的回话添加备注

2. replay 回放按钮 重新请求 R快捷键

3. X 清空监控面板(ctrl+x)

4. GO 请求的时候设置断点 让断点继续往下走

   • 结合状态栏
   • 设置断点: webbrowser 右边点击一下(红色) 箭头朝上表示发送的时候 朝下表示响应的时候
   • 点击GO, 继续往下执行

5. stream模式切换 (默认是缓冲模式)

   • 流模式和缓冲模式的切换

6. decode 解压请求 Keep:all sessions 保持回话

   • 保存越多占用内存越大

7. Any Process 过滤请求

   • 比如指向看到chrome的请求 点击 鼠标中心移动到chrome上捕获一下

8. find 查找 对需要查找的进行颜色高亮

9. save 对当前的回话进行保存

   • 鼠标拖动 选中一块区域
   • save 保存为sazz文件
   • file -> recent archives -> 选中文件加载进来

10. 截图 保存 5s之后进行截图

11. 计时器 点击一下计时 再点击一下显示时间 再点击清0

12. 快速打开浏览器

13. Clear Cache 清除IE浏览器的缓存

14. TextWizard 编码解码

    • base64
    • url-encode/decode
    • html-encode/decode

15. TearOff 分离面板 右侧面板分离

    
    fiddler工具栏.png

fiddler 状态栏

image.png

1. 褐色区域控制台 (输入各种命令)

   • 输入help 查看常用命令

2. cature 控制fiddler是否工作

   • 点击一下 fiddler就不工作了
   • 是否让fiddler工作

3. Web Browsers 过滤回话来源

   • WebBrowsers 只查看浏览器的请求
   • 或者查看来自于其他来源

4. 记录当前回话的数量和回话的地址

5. 选中某一会话后: 访问的url地址

fiddler 监控面板

1. statistics 数据统计

   • 请求性能上的指标(分析优化web性能)
   • 关注RTT数据: 往返时间 请求发送到响应结束

2. inspectors 对请求解包

   • 查看请求和响应的详细内容

     
     image.png

3. AutoResponder 文件代理

   • 截获文件
   • 将该请求文件拖到右侧面板中
   • 右侧底部 rule editor 第二栏控制请求响应状态码
   • 或者选择find a file 选择本地的一个文件
     AutoResponseder.png

4. composer 前后端的接口联调

   • 将请求拖入
   • 查看请求的参数

   • 修改请求参数进行请求调整 execute进行伪造请求执行

     
     前后端联调 请求伪造

5. log 日志面板

6. timeline

   • 相当于浏览器中的http watch
   • 选中一块区域的请求 查看timeline, 进行网站性能分析

   • 性能优化的关键点

     
     Timeline面板分析

Fiddler 文件 文件夹代理

1. HOST配置
   • 需求: 让远程文件指向本地
   • Tools->Hosts->enabled激活功能
   • 本地ip 域名地址 添加到文件中
     • 192.168.123.1 www.baidu.com 本地服务器 远程服务器 , 然后保存文件
     • 禁用host 1. enabled去掉 save 2.关闭Fiddler软件禁用

   • 上述: 将一个域名下的所有文件进行映射到一个IP地址下

     
     本地文件代理

2. 文件替换(只想映射一个文件)

   • HOST是所有文件都进行映射
   • autoResponder 场景 定义线上场景bug 进行文件替换
     • 线上某一个文件除了问题的时候
     • 将该文件映射到本地, 修改看是否有问题
   • 左侧选中文件拖到AutoResponder中 (步骤)
     • Exact 精准匹配 也支持正则表达式
     • find a file
     • 替换规则 然后保存save
     • 还可以替换成一些响应吗

3. Fiddler请求模拟, 前后端接口调试

   • Composer 面板中 GET请求:
     • 输入请求网址和请求参数
     • Execute
   • POST请求:
     • 请求参数放在RequestBody中
     • id=confidence&name=zhangsan&age=20
   • 配置ReuestHeader
     • 按照key:value的形式进行模拟伪造

4. Fiddler网路限速

   • 关注事件: onBeforeRequest

     //发送请求的时候限速3s
     oSession('request-trickle-delay') = "3000"
     
     // 响应延迟 模拟低速
     oSession('response-trickle-delay') = "3000"
     

限速追踪

Fiddler插件 插件官网

1. Fiddler 代码格式化插件 (JavaScript Formatter)

   • 鼠标右击左侧栏中的回话 -> Make Javascipt Pretty -> 右侧响应SystaxView

   • TrafficDiffer 对比两个不同的回话

     • differ 在右侧面板中
     • 往里面的两侧中各拖入一个请求回话
     • 进行对比分析 (对于优化, 对比两个序列)

2. Fiddler http代理插件

   • 第三方插件: Willow
     • 快速管理host文件
     • 进行可视化管理
     • 可视化限速