在Fiddler中添加自定義HTTP方法列并高亮顯示

Fiddler 是一款強大的 Web 調試代理工具，允許開發者檢查和操作 HTTP 流量。一個常見需求是自定義 Web Sessions 列表，添加顯示 HTTP 方法（GET、POST 等）的列，并通過顏色區分不同方法。本文將指導你如何在 Fiddler 中添加一個 HTTPMethod 自定義列，并為 POST 請求設置紅色背景、GET 請求設置綠色背景。

為什么要自定義 Fiddler？

Fiddler 的 Web Sessions 列表提供了 HTTP 請求和響應的詳細信息，但默認列可能無法滿足所有需求。例如，你可能希望快速區分 GET 和 POST 請求，并讓 POST 請求在調試表單提交或 API 調用時更顯眼。通過添加自定義列和高亮顯示，你可以優化調試流程，提高效率。

解決方案：使用 FiddlerScript 和 BindUIColumn

我們將使用 FiddlerScript（基于 JScript.NET 的腳本引擎）來添加自定義列并實現顏色高亮。BindUIColumn 方法適合提取 HTTP 方法，而 OnBeforeRequest 鉤子可用于根據方法設置顏色。

步驟 1：打開 FiddlerScript 編輯器

1. 啟動 Fiddler（Fiddler Classic 或 Fiddler Everywhere）。
2. 點擊菜單欄的 Rules > Customize Rules（或按 Ctrl+R），打開 CustomRules.js 文件。

步驟 2：添加自定義 HTTPMethod 列

我們使用 BindUIColumn 屬性定義一個名為 HTTPMethod 的列，通過自定義函數提取每個會話的 HTTP 方法。

在 CustomRules.js 中添加以下代碼：

public static BindUIColumn("HTTPMethod", 80)
function CalcMethodCol(oS: Session) {if (oS != null && oS.oRequest != null && oS.oRequest.headers != null) {return oS.oRequest.headers.HTTPMethod; // 返回 GET、POST 等}return "N/A"; // 無效會話的默認值
}

• 說明：
  • BindUIColumn("HTTPMethod", 80) 定義列名 HTTPMethod，寬度為 80 像素。
  • CalcMethodCol 函數為每個會話（oS）計算列值。
  • oS.oRequest.headers.HTTPMethod 獲取 HTTP 方法（如 GET、POST）。
  • 添加了空值檢查，避免異常并返回 "N/A"。

步驟 3：高亮 POST 和 GET 請求

為 POST 和 GET 請求設置不同背景色，我們修改 OnBeforeRequest 函數，根據 HTTP 方法設置會話顏色。

在 CustomRules.js 中添加或更新以下代碼：

public static RulesOption("高亮 POST 請求")
var m_HighlightPost: boolean = true;static function OnBeforeRequest(oSession: Session) {if (m_HighlightPost && oSession.HTTPMethodIs("POST")) {oSession["ui-color"] = "red"; // POST 請求背景設為紅色} else if (m_HighlightPost && oSession.HTTPMethodIs("GET")) {oSession["ui-color"] = "green"; // GET 請求背景設為綠色}
}

• 說明：
  • RulesOption("高亮 POST 請求") 在 Rules 菜單中添加一個可切換選項，控制高亮功能。
  • m_HighlightPost 是一個布爾標志，用于啟用或禁用高亮。
  • OnBeforeRequest 在處理每個請求前運行。
  • oSession.HTTPMethodIs("POST") 檢查是否為 POST 請求，oSession["ui-color"] = "red" 將背景設為紅色。
  • GET 請求同樣被設置為綠色。
  • ui-color 屬性控制 Web Sessions 列表中的背景顏色。

步驟 4：保存并測試

1. 保存 CustomRules.js 文件。
2. Fiddler 通常會自動重新加載腳本。如未生效，重啟 Fiddler 或重新打開 Customize Rules。
3. 發起一些 HTTP 請求（例如瀏覽網頁、提交表單，或使用 curl 發送 GET 和 POST 請求）。
4. 在 Web Sessions 列表中檢查：
   • 新增的 HTTPMethod 列應顯示方法（如 GET、POST）。
   • POST 請求顯示紅色背景，GET 請求顯示綠色背景。

示例效果

應用腳本后，Web Sessions 列表可能如下：

• GET /index.html：HTTPMethod 列顯示 GET，行背景為綠色。
• POST /submit-form：HTTPMethod 列顯示 POST，行背景為紅色。
• 無效會話：HTTPMethod 列顯示 N/A，無顏色。

故障排除

如果列或顏色未按預期工作，嘗試以下步驟：

• 列值為空：確認 oS.oRequest.headers.HTTPMethod 可訪問。添加調試日志檢查值：

  FiddlerObject.log("HTTP 方法: " + oS.oRequest.headers.HTTPMethod);
  

  在 Log 面板查看輸出。

• 顏色未生效：驗證 oSession.HTTPMethodIs("POST") 是否正常工作。測試一個已知的 POST 請求（如表單提交）。

• 腳本錯誤：檢查 Log 面板中的語法錯誤，修復 CustomRules.js 中的問題。

• Fiddler 版本：確保使用最新版本的 Fiddler Classic 或 Fiddler Everywhere，腳本支持可能因版本而異。

為什么選擇 BindUIColumn？

最初嘗試使用 AddBoundColumn 配合 @method 或 @request.Method，但這些方法有時因字段不可用或版本差異導致值為空。BindUIColumn 更可靠，因為它通過自定義函數顯式控制列值，確保兼容性和穩定性。

結論

通過在 Fiddler 中添加 HTTPMethod 自定義列和高亮顯示，你可以更高效地分析 HTTP 流量。BindUIColumn 結合 OnBeforeRequest 的方法為 Fiddler 的功能擴展提供了強大支持。這對調試 API、Web 表單或復雜 Web 應用尤為有用。

你可以進一步擴展腳本，例如為 PUT、DELETE 等方法添加支持，或調整顏色以適應個人偏好。祝調試愉快！

---

于 2025 年 5 月 8 日在 Fiddler Classic 上測試。對于 Fiddler Everywhere，請參考官方文檔確認腳本差異。

最后效果查看：