Fiddler4 使用教程：从入门到精通

什么是 Fiddler？

Fiddler 是一个功能强大的 Web 调试代理工具，它就像一个“中间人”，位于你的浏览器（或任何需要联网的应用程序）和互联网之间，所有进出的网络数据包都会经过 Fiddler，Fiddler 可以捕获、查看、修改、重放这些数据包。

主要用途：

• 调试 Web 应用：检查前端发送的请求和后端返回的响应，分析 API 接口。
• 性能分析：查看请求的耗时、响应大小，定位性能瓶颈。
• 抓包分析：获取网站或 App 的请求数据，用于学习、测试或安全分析。
• Mock 数据：模拟后端服务，返回自定义的假数据，方便前端独立开发。
• 请求/响应修改：篡改请求参数或响应内容，用于测试或绕过某些限制。

安装与首次启动

1. 下载：从 Fiddler 官网 下载并安装，安装过程基本一路“Next”即可。
2. 信任证书：
   • 首次启动时,Fiddler 会提示你安装根证书。这一步非常重要，否则 Fiddler 无法解密 HTTPS 流量。
   • 点击 Yes，按照提示完成证书安装。
   • 在 Windows 10/11 上，可能需要手动将证书导入到“受信任的根证书颁发机构”存储区。
3. 配置浏览器代理：
   • Fiddler 默认会自动设置系统代理，让所有流量都通过它，通常无需手动配置浏览器。
   • 你可以在 Fiddler 的右下角看到代理状态，如果显示 Capturing，表示正在抓包。

Fiddler 界面核心区域

Fiddler 的界面主要分为四个部分：

1. 工具栏：

   • Capture Traffic (F6)：开启/关闭抓包，关闭后，浏览器将无法上网。
   • Composer (Ctrl+9)：手动构造、修改和发送 HTTP 请求。
   • AutoResponder (Ctrl+R)：设置规则，自动匹配请求并返回本地文件或自定义响应。
   • Filters (Ctrl+F)：过滤不需要的请求，让列表更清晰。
   • Timeline：以时间线视图展示所有请求，直观显示页面加载性能。

2. 会话列表：

   • 这是 Fiddler 的核心区域，列出了所有捕获到的网络请求。
   • 列信息：
     • 请求的序号。
     • Result：HTTP 状态码，如 200 (成功), 404 (未找到), 500 (服务器错误)。
     • Protocol：使用的协议，如 HTTP/1.1, HTTP/2, HTTPS。
     • Host：请求的目标域名。
     • URL：请求的具体路径。
     • Body：请求体的大小。
     • Caching：缓存状态。
     • Content-Type的类型，如 application/json, text/html。

3. 请求/响应详情：

   • 在会话列表中点击任意一条请求,下方会显示其详细信息。
   • Headers 标签页：显示请求和响应的头部信息，这里包含了 Cookie、User-Agent、Referer 等关键信息。
   • TextView 标签页：以文本形式显示请求体或响应体，对于 JSON 或 XML 格式的数据，这里最直观。
   • HexView 标签页：以十六进制格式显示数据，用于调试二进制文件。
   • ImageView 标签页：如果响应是图片，会直接在这里显示。
   • Auth 标签页：显示认证信息。

4. 状态栏：

   显示连接数、已抓取请求数、选中请求的详细信息等。

核心功能详解与实战

抓取和分析一个网页的请求

1. 开启抓包：确保工具栏上的 Capture Traffic 按钮是高亮状态。
2. 访问网页：在浏览器中打开你想要分析的网站，https://www.baidu.com。
3. 查看请求：回到 Fiddler，你会看到会话列表中出现了大量请求，第一个请求是 HTML 文档，后续是 CSS、JS、图片等资源。
4. 分析请求：
   • 点击列表中的 www.baidu.com 请求。
   • 在下方的 Headers 标签页，你可以看到：
     • 请求行：GET / HTTP/1.1 (方法是 GET，路径是根目录)。
     • 请求头：Host: www.baidu.com, User-Agent: ... (你的浏览器信息), Accept: ... (接受的响应类型)。
   • 在 TextView 标签页，你可以看到百度首页的 HTML 源码。
5. 分析响应：
   • 点击列表中的 www.baidu.com 请求，Fiddler 默认显示的是请求信息，点击旁边的 << Response 标签页，或者直接在列表中双击，查看响应。
   • 在 Headers 标签页，你可以看到：
     • 状态行：HTTP/1.1 200 OK (状态码 200 表示成功)。
     • 响应头：Content-Type: text/html; charset=UTF-8 (响应类型是 HTML)，Content-Length: ... (响应大小)，Set-Cookie: ... (服务器设置的 Cookie)。
   • 在 TextView 标签页，你可以看到服务器返回的完整 HTML 内容。

过滤请求，快速定位目标

当访问一个复杂的网页时,请求列表会非常庞大，使用 Filters (Ctrl+F) 可以精准过滤。

• 打开 Filters 窗口。
• 启用过滤器：勾选 Enable Filters。
• 常用过滤规则：
  • 显示特定主机：在 Hide 选项卡下，选择 Show only the following hosts，然后输入域名，如 api.example.com，这样只会显示与该域名相关的请求。
  • 按状态码过滤：在 Hide 选项卡下，选择 Show only the following results，然后勾选你关心的状态码，如 4xx (客户端错误) 和 5xx (服务器错误)。
  • 按关键词过滤：在 Hide 选项卡下，选择 Show only sessions containing，输入 URL 或响应中的关键词，如 login 或 error。

手动构造并发送请求 (Composer)

当你想测试一个 API 接口，或者模拟某个操作时，Composer 非常有用。

1. 打开 Composer (Ctrl+9)。
2. 构造请求：
   • 方法：选择 GET、POST、PUT、DELETE 等。
   • URL：输入完整的请求地址，如 https://api.example.com/users/123。
   • Headers：点击 Headers 标签页，添加或修改请求头，添加 Content-Type: application/json 和 Authorization: Bearer your_token。
   • 请求体：如果是 POST 或 PUT 请求，在 TextView 或 JSON 标签页中输入请求体数据。
3. 执行请求：点击 Execute 按钮，Fiddler 会将这个请求发送出去，并在会话列表中显示，你可以像分析普通请求一样分析它的响应。

Mock 数据与请求重放 (AutoResponder)

这个功能可以让你摆脱对真实后端服务的依赖,方便前端调试。

1. 打开 AutoResponder (Ctrl+R)。
2. 启用规则：勾选 Enable rules。
3. 添加规则：
   • 点击 Add Rule。
   • 匹配条件：
     • Matches：使用通配符匹配 URL。*\api\user\* 会匹配所有以 /api/user/ 开头的请求。
     • Content-Type：根据响应内容类型匹配。
   • 响应动作：
     • Return file from cache...：从本地文件返回响应，你可以准备一个 JSON 文件（如 mock_user.json），让请求返回这个文件的内容。
     • Generate automatic response...：直接在 Fiddler 中编辑响应内容，可以设置状态码、响应头和响应体。
4. 应用规则：设置好规则后，所有匹配的请求都会被 Fiddler 拦截，并返回你预设的响应，而不会真正发送到服务器。

修改请求或响应

这是 Fiddler 最强大的功能之一，可以实时修改网络数据。

1. 修改请求：
   • 在会话列表中找到目标请求。
   • 选中它,然后在右侧的 Headers 或 TextView 标签页中直接修改请求头或请求体。
   • 修改完成后,点击工具栏上的 Reissue Request (黄色闪电图标)，Fiddler 会将修改后的请求重新发送到服务器。
2. 修改响应：
   • 选中目标请求,切换到 << Response 标签页。
   • 在 TextView 标签页中修改响应内容。
   • 点击工具栏上的 Break on Response (红色按钮)，然后刷新页面，当请求返回时，Fiddler 会暂停，并弹出一个编辑窗口，让你实时修改响应内容，修改后点击 Run to Completion 继续执行。

高级技巧与常见问题

• 设置系统代理：Fiddler 自动代理失效，可以手动设置，Fiddler 的 Tools > Options > Connections 页面会显示代理地址（如 0.0.1:8888），你可以手动将系统代理设置为此地址。
• HTTPS 解密问题：HTTPS 请求显示为灰色，或者无法查看内容，通常是证书问题，请确保已正确安装 Fiddler 根证书，并且在浏览器中信任了它，有时，某些安全软件（如 360、火绒）会阻止 Fiddler 注入证书，需要将其添加到白名单。
• 保存/加载会话：可以通过 File > Save > Sessions As... 将当前捕获的所有请求保存为 .saz 文件，方便后续分析或分享，也可以直接拖拽 .saz 文件到 Fiddler 窗口中打开。
• 性能分析：使用 Timeline 视图，可以直观地看到每个请求的排队时间、DNS 查找时间、TCP 连接时间、服务器处理时间等，帮助快速定位性能瓶颈。

注意事项

1. 法律与道德：Fiddler 是一个强大的工具，请务必在合法合规的范围内使用，不要用它来抓取、分析或破解你不拥有权限的网站或服务，这可能会违反法律或网站的服务条款。
2. 敏感信息：在抓包和分享会话文件时，注意脱敏处理，不要泄露个人隐私、密码、Token 等敏感信息。
3. 性能影响：Fiddler 会消耗一定的系统资源，在抓包时可能会对浏览器性能产生轻微影响，完成调试后，建议关闭抓包功能。

希望这份详细的教程能帮助你掌握 Fiddler4 的使用！多加练习，你会发现它是你开发和调试工作中不可或缺的利器。