在Fiddler中添加自定义HTTP方法列并高亮显示

在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，请参考官方文档确认脚本差异。

最后效果查看：