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文件
     • 進行可視化管理
     • 可視化限速