目录

一、Fiddler 是什么

二、为什么要学习 Fiddler

三、Fiddler 安装与环境配置

(一)下载安装

(二)PC 端配置

(三)手机端配置

四、Fiddler 界面详解

(一)工具面板

(二)会话面板

(三)监控面板

(四)状态面板

五、Fiddler 抓包实战

(一)抓取 HTTP 请求

(二)抓取 HTTPS 请求

(三)手机 APP 抓包

六、Fiddler 高级功能应用

(一)设置断点

(二)模拟网络环境

(三)修改请求和响应数据

七、常见问题与解决方法

(一)抓不到包

(二)HTTPS 抓包失败

(三)Fiddler 运行卡顿

(四)断点设置无效

八、总结与展望


一、Fiddler 是什么

Fiddler 是一款强大且广受欢迎的 HTTP 调试代理工具,诞生于 2003 年 10 月 6 日 ,最初由微软 Internet Explorer 开发团队的前程序经理 Eric Lawrence 编写,2012 年 9 月 12 日,被 Telerik 收购。它犹如一位 “网络交通警察”,矗立在客户端和服务器之间,对两者之间的 HTTP 和 HTTPS 通讯进行全面的监控、记录与分析。

当你在浏览器中输入一个网址,或者手机上的 APP 进行数据请求时,这些请求都会先经过 Fiddler。它会详细记录下每一次通讯的细节,包括请求的 URL、请求头信息(如 User - Agent、Cookie 等)、请求体数据、响应状态码、响应头以及响应体内容等。这些信息对于开发者、测试人员以及网络工程师来说,就像是一把把解开网络问题谜团的钥匙。

例如,在开发一个电商网站时,当用户点击商品详情页出现加载异常,开发人员可以通过 Fiddler 查看请求和响应数据,判断是请求参数错误、服务器响应异常,还是网络传输过程中出现丢包等问题。Fiddler 可以设置断点,让通讯在特定时刻暂停。就好比在一场接力比赛中,你可以随时喊停,检查接力棒(数据)是否传递正确,运动员(程序)的状态是否良好。通过断点,你可以修改请求或响应的数据,模拟各种网络场景和业务情况,进行更深入的调试和测试 。

二、为什么要学习 Fiddler

在如今这个数字化时代,各类软件和网站层出不穷,而它们的背后,是错综复杂的网络交互。Fiddler 作为一款强大的 HTTP 调试代理工具,其重要性不言而喻,尤其在前端开发和软件测试等工作场景中,发挥着关键作用。

在前端开发领域,掌握 Fiddler 抓包技能十分必要。前端开发的核心是构建用户界面并与后端进行数据交互 。当你精心编写了一段代码,满心期待着网页能够完美呈现,却发现页面加载缓慢,或者某些功能无法正常使用,这时 Fiddler 就派上用场了。比如,你可以利用 Fiddler 分析 AJAX 请求和响应。假设你开发的电商网站商品列表是通过 AJAX 请求动态加载的,当列表出现数据显示错误或加载不完整时,通过 Fiddler 抓包,你能清晰看到请求的 URL 是否正确,请求参数是否准确传递,以及服务器返回的 JSON 数据结构是否符合预期。通过分析这些细节,你可以迅速定位是前端代码中请求逻辑错误,还是后端接口返回的数据有误,从而大大提高开发效率。又比如,在优化网页性能时,Fiddler 的 Statistics 面板能提供每个请求的响应时间、大小等详细数据,帮助你找出哪些资源加载耗时过长,进而有针对性地进行优化,如压缩图片、合并 CSS 和 JavaScript 文件等,提升用户体验。

对于软件测试工作来说,Fiddler 更是不可或缺的利器。在功能测试中,测试人员需要确保软件的各项功能符合预期。当发现软件出现异常时,Fiddler 可以帮助测试人员确定问题出在前端还是后端。例如,用户在注册页面输入信息后点击提交,却提示 “注册失败,请稍后重试”,这时通过 Fiddler 抓包,查看请求和响应数据。如果请求参数正确,而响应状态码为 500,说明很可能是后端服务器内部错误;若请求参数缺失或错误,那可能就是前端数据验证和提交环节存在问题。在性能测试方面,Fiddler 可以模拟不同的网络环境,如 2G、3G、4G 以及 WiFi 等,测试软件在不同网络条件下的响应速度和稳定性 。通过模拟弱网环境,测试人员可以发现软件在网络不佳时是否存在数据加载缓慢、页面崩溃等问题,提前为用户可能遇到的网络情况做好准备。在安全测试中,Fiddler 能帮助测试人员检查软件在数据传输过程中的安全性,如是否对敏感信息进行了加密传输,防止数据被窃取或篡改。

三、Fiddler 安装与环境配置

(一)下载安装

Fiddler 的官方下载地址为:https://www.telerik.com/download/fiddler。在该页面,你可以根据自己的操作系统选择对应的版本进行下载。以 Windows 系统为例,点击 “Download For Windows” 按钮,下载安装包。

下载完成后,找到安装包并双击运行。在安装向导界面,点击 “Next” 进入下一步;阅读许可协议,勾选 “I accept the agreement” 后点击 “Next”;选择安装路径,可使用默认路径,也可点击 “Browse” 自定义路径,然后点击 “Next”;选择开始菜单文件夹,一般保持默认即可,继续点击 “Next”;最后点击 “Install” 开始安装。安装过程可能需要一些时间,请耐心等待,安装完成后点击 “Finish” 完成安装。

(二)PC 端配置

打开 Fiddler 软件,首先进行 HTTPS 配置。点击菜单栏中的 “Tools”,选择 “Options”,在弹出的窗口中切换到 “HTTPS” 选项卡。勾选 “Decrypt HTTPS traffic”,表示允许 Fiddler 解密 HTTPS 流量,这样才能查看 HTTPS 请求的详细内容。如果还想忽略服务器证书错误(在测试环境中有时很有用,但在正式环境中需谨慎使用,因为这可能存在安全风险),可勾选 “Ignore server certificate errors (unsafe)”。点击 “Actions”,选择 “Trust Root Certificate”,在弹出的提示框中都点击 “Yes”,完成证书信任操作,这一步是为了让系统信任 Fiddler 的根证书,从而能够正常解密 HTTPS 流量。

接着进行 Connections 配置,同样在 “Options” 窗口中切换到 “Connections” 选项卡。确保 “Fiddler listens on port” 后面的端口号为 8888(这是 Fiddler 的默认端口,也可根据需求修改,但要确保该端口未被其他程序占用)。然后勾选 “Allow remote computers to connect”,表示允许远程计算机连接到 Fiddler,这样手机等设备才能通过代理连接到 Fiddler 进行抓包 。配置完成后点击 “OK” 保存设置,此时可能会弹出一个提示框询问是否允许远程连接,点击 “确定” 即可。

(三)手机端配置

要让手机与 Fiddler 建立连接进行抓包,首先手机和电脑需要处于同一局域网内,即连接到同一个 WiFi 网络。

对于 iOS 系统的手机,打开手机的 “设置”,点击 “无线局域网”,点击当前连接的 WiFi 右侧的 “i” 图标,进入 WiFi 详情页面。在页面下方找到 “配置代理” 选项,选择 “手动”。在 “服务器” 一栏输入电脑的 IP 地址(可在电脑上通过按下 Windows+R 键,输入 “cmd” 打开命令提示符窗口,输入 “ipconfig” 命令,查找 “IPv4 地址” 获取),在 “端口” 一栏输入 Fiddler 设置的端口号 8888 ,然后点击左上角的 “返回” 保存设置。

完成代理设置后,还需要安装 Fiddler 证书。打开手机的 Safari 浏览器,在地址栏输入电脑的 IP 地址和 Fiddler 端口号,格式为 “http://[电脑 IP 地址]:8888”,例如 “http://192.168.1.100:8888”。进入该页面后,找到 “FiddlerRoot certificate” 链接并点击下载证书。下载完成后,打开手机的 “设置”,点击 “通用”,选择 “VPN 与设备管理”(不同 iOS 版本可能名称略有不同),在 “描述文件” 中找到刚才下载的 Fiddler 证书,点击安装并按照提示输入手机密码进行安装。安装完成后,还需要信任该证书,进入 “设置” - “通用” - “关于本机” - “证书信任设置”,在 “企业级应用” 中找到 Fiddler 证书并打开开关信任该证书。

对于安卓系统的手机,打开手机的 “设置”,找到 “WLAN” 选项,点击当前连接的 WiFi,在弹出的菜单中选择 “修改网络”。在网络设置页面中,勾选 “显示高级选项”,将 “代理” 设置为 “手动”。在 “服务器主机名” 中输入电脑的 IP 地址,“服务器端口” 输入 8888,然后点击 “保存”。

同样,安卓手机也需要安装 Fiddler 证书。打开手机浏览器,输入 “http://[电脑 IP 地址]:8888”,下载 Fiddler 证书。下载完成后,根据手机系统不同,安装证书的路径也有所不同。一般在 “设置” - “安全”(或 “隐私与安全” 等类似选项) - “从存储设备安装”(或 “安装证书” 等类似选项)中找到下载的证书进行安装。安装完成后,即可使用 Fiddler 抓取手机上的网络请求数据。

四、Fiddler 界面详解

当你成功安装并配置好 Fiddler 后,打开软件,映入眼帘的是一个功能丰富的界面,它主要由工具面板、会话面板、监控面板和状态面板等部分组成,每个部分都各司其职,下面为你详细介绍。

(一)工具面板

工具面板位于 Fiddler 界面的上方,包含了一系列常用功能的快捷按钮 ,这些按钮就像是你在操作 Fiddler 时的得力助手,熟练掌握它们能大大提高你的工作效率。

  • 重新请求(Replay):点击该按钮,可以重新发送当前选中的 HTTP 请求。在测试接口的稳定性或者验证某些修改是否生效时,这个功能非常实用。比如,你修改了请求头中的某个参数,想看看修改后的请求会得到怎样的响应,就可以点击重新请求按钮。假设你正在测试一个获取用户信息的接口,原本请求头中没有携带用户认证的 Token,响应返回 “未授权” 的错误信息,当你添加 Token 后,点击重新请求,就能看到接口返回正确的用户信息。
  • 删除会话(Remove):用于删除当前选中的会话。当会话面板中积累了大量无用的会话信息,影响你查找关键数据时,就可以使用这个按钮删除不需要的会话。例如,你在测试一个电商网站时,进行了多次商品搜索操作,产生了很多搜索请求的会话,当你想要专注分析商品详情页的请求时,就可以删除搜索相关的会话。
  • 继续执行(Go):在设置了断点的情况下,点击此按钮可以让暂停的请求或响应继续执行。比如,你在请求发出前设置了断点,修改了请求参数后,点击 “继续执行”,请求就会带着修改后的参数发送到服务器 。
  • 流模式 / 缓冲模式(Stream/Buffering Mode):流模式下,Fiddler 会即时将 HTTP 响应的数据返回给应用程序,更接近真实浏览器的性能,时序图也更准确,但不能控制响应;缓冲模式下,Fiddler 直到 HTTP 响应完成时才将数据返回给应用程序,这种模式可以控制响应,修改响应数据,但有时时序图会出现异常。在测试网页性能时,如果想要模拟真实的网络传输情况,就可以选择流模式;如果需要对响应数据进行修改和调试,缓冲模式则更为合适。
  • 解码(Decode):Fiddler 抓取到的某些请求或响应数据可能是经过编码的,点击 “解码” 按钮,Fiddler 会自动对数据进行解码,以便你查看其原始内容。比如,当你抓取到一个采用 gzip 编码的响应时,点击解码按钮,就能看到解压后的正常文本内容。
  • 保留会话(Keep All Sessions):默认情况下,Fiddler 在一段时间后会自动清除一些旧的会话。点击 “保留会话” 按钮后,所有的会话都会被保留下来,不会被自动清除,方便你进行后续的分析和回顾。
  • 监控指定进程(Any Process):点击这个按钮,会弹出一个下拉菜单,你可以选择只监控特定进程的网络请求。例如,你只想监控 Chrome 浏览器的网络请求,就可以在菜单中选择 Chrome 进程,这样 Fiddler 就只会捕获 Chrome 发出的 HTTP 请求,避免其他进程的干扰。
  • 寻找(Find):用于在会话面板中查找特定的会话。点击该按钮,会弹出一个查找对话框,你可以输入关键词,Fiddler 会在会话列表中快速定位包含该关键词的会话。比如,你想查找所有与某个特定接口相关的请求,就可以在查找框中输入接口的 URL 关键词 。
  • 保存会话(Save):可以将当前捕获到的会话保存为.saz 文件格式。.saz 文件包含了所有会话的详细信息,包括请求和响应数据、请求头、响应头等等。保存会话文件后,你可以在需要的时候重新加载这些会话进行分析,或者与团队成员分享这些抓包数据 。
  • 切图(Take Screenshot):点击该按钮,Fiddler 会截取当前浏览器页面的屏幕截图。在分析网页请求时,有时候结合页面截图能更直观地理解请求和响应的内容。例如,你发现某个图片加载失败,通过切图可以查看页面布局以及图片应该出现的位置,再结合对应的图片请求会话进行分析。
  • 计时(Time Sessions):点击这个按钮,Fiddler 会对当前选中的会话进行计时,显示请求从发送到接收到响应所花费的时间。这个功能对于性能测试非常重要,你可以通过计时功能快速找出哪些请求耗时较长,进而分析原因进行优化。
  • 打开浏览器(Browser):点击此按钮会打开默认浏览器,并自动使用 Fiddler 作为代理。这样,你在浏览器中进行的所有网络请求都会被 Fiddler 捕获,方便进行抓包和调试。
  • 清除 IE 缓存(Clear Cache):点击该按钮可以清除 IE 浏览器的缓存。在测试网页时,有时候缓存会影响测试结果,清除缓存后可以确保每次请求都是最新的数据 。
  • 编码 / 解码工具(TextWizard):点击后会弹出一个文本编码 / 解码工具窗口,你可以在这个窗口中对文本进行各种编码和解码操作,如 Base64 编码、URL 编码等。当你需要手动构造请求数据或者分析一些特殊编码的数据时,这个工具就派上用场了。
  • 弹出控制监控面板(Tearoff):点击此按钮可以将监控面板分离出来,以独立窗口的形式显示,方便你同时查看多个面板的内容或者在不同屏幕上进行操作。
  • MSDN(MSDN Search…):点击该按钮会打开 MSDN(Microsoft Developer Network)搜索页面,你可以在其中搜索相关的技术文档和资料,获取更多关于开发和调试的信息。
  • 帮助(Help):提供 Fiddler 的帮助文档和相关资源链接。当你在使用 Fiddler 过程中遇到问题或者想了解某个功能的详细用法时,可以点击帮助按钮查找答案 。

(二)会话面板

会话面板位于 Fiddler 界面的左侧,是 Fiddler 的核心部分之一,它就像是一个网络请求的 “记录簿”,Fiddler 抓取到的每一条 HTTP 请求(每一条称为一个 session)都会显示在这里,主要包含了请求的 ID 编号、状态码、协议、主机名、URL、内容类型、body 大小、进程信息、自定义备注等信息。

  • 查看会话信息:每一行代表一个会话,从左到右依次展示了各种关键信息。“#” 列显示抓取的请求 ID 顺序和类型图标,ID 从 1 开始递增,按照页面加载请求的顺序排列;“Result” 列展示 HTTP 响应结果状态码,比如 200 表示请求成功,404 表示页面未找到,500 表示服务器内部错误等;“Protocol” 列显示当前请求会话所使用的协议,常见的有 HTTP 和 HTTPS;“Host” 列展示请求地址的主机名或域名(有时也会包含主机名和端口号);“URL” 列显示从服务器请求资源的文件路径,有时还包含 GET 请求的具体参数;“Body” 列展示响应内容的大小,单位为字节,也就是响应主体(Response Body)中的字节数;“Caching” 列显示请求的缓存过期时间或缓存控制 header 等值,即响应头中 Expires 和 Cache-Control 相关信息;“Content-Type” 列展示响应内容的类型,以及编码类型,比如 text/html 表示 HTML 页面,application/json 表示 JSON 数据;“Process” 列显示发送此请求的程序与进程 ID,例如 chrome:1604,表示该请求是由 Chrome 浏览器进程 ID 为 1604 的进程发出的;“Comments” 列允许用户给请求会话添加备注文本信息,方便后续分析和标记;“Custom” 列允许用户通过脚本设置自定义字段 。
  • 筛选会话信息:在实际使用中,会话面板可能会显示大量的会话,这时就需要对会话进行筛选,以便快速找到需要的信息。你可以通过在每一列的标题上右键点击,使用 “Search this column(搜索此栏)” 功能,根据每一个栏位的特性来进行条件搜索。比如在 “URL” 列右键选择 “Search this column”,然后输入 “product”,就可以快速筛选出所有 URL 中包含 “product” 关键词的会话,这些会话可能与商品相关,方便你分析商品相关的网络请求 。还可以使用 “Flag duplicates(重复会话标志)” 功能,标记列中的相同项并将相同项背景滤为绿色。例如在 “URL” 这一栏上右键选择 “Flag duplicates”,那么就会在当前列中存在重复 URL 的数据上打上一个绿色的背景,帮助你快速发现重复请求。此外,Fiddler 还支持通过命令行进行更复杂的筛选操作,比如在命令行输入 “?baidu”,可以筛选出所有包含 “baidu” 关键词的会话;输入 “=200” 可以筛选出所有响应状态码为 200 的会话。

(三)监控面板

监控面板位于 Fiddler 界面的右侧,是 Fiddler 最核心的功能之一,它主要包含了一些辅助标签工具栏,拥有 10 个小标签,通过这些标签,你可以对会话请求和响应进行全方位的监控和分析,让网络数据的细节无所遁形。

  • Statistics(数据统计):这个标签用于查看请求的性能数据,进行统计与分析。它能显示 Http 或 Https 请求的性能和其他数据分析,如 DNS 解析时间,即从请求域名到获取 IP 地址所花费的时间,这个时间如果过长,可能是 DNS 服务器配置有问题或者网络连接不稳定;TCP/IP 建立连接的时间(TCP 三次握手的时间),这是客户端和服务器建立可靠连接的过程所花费的时间;SSL 连接的时间(针对 https 请求),如果 SSL 连接时间长,可能是证书验证过程出现问题。还会展示请求起始时间、响应结束时间、握手时间、等待时间、路由时间、TCP/IP 传输时间等。例如,当你点击一个 HTTP 请求会话时,在 Statistics 标签中可以看到该请求的性能数据,包括请求总数、请求包大小、响应包大小等。通过 “Show chart” 按钮,可以把请求的数据以饼图的形式显示,直观地展示返回的各种类型数据的大小统计以及 HTTP 状态码统计等信息,方便你快速了解网络请求的整体情况,找出性能瓶颈。
  • Inspectors(请求解包):可以对抓到的请求包查看详细内容。当你在会话列表中双击某一个会话请求,就会自动跳转到 Inspectors 选项卡。它分为上下两个部分,上半部分是 HTTP Request(请求)展示,下半部分是 HTTP Response(响应)展示。在请求部分,“Headers” 以层级的形式来显示 HTTP 请求头部的相关内容信息,包括用户使用的浏览器、请求携带的 cookies、以及发送请求的域名等;“TextView” 以文本的形式展示请求内容;“SyntaxView” 查看具体的请求体或者附带的键与值;“WebForms” 可以通过它看到 url 提交的相关参数信息;“HexView” 以 16 进制进行查看请求;“Auth” 查看请求数据权限;“Cookie” 查看请求 cookie 信息;“Raw” 原生查看 http 请求;“JSON” 以 JSON 格式展开查看请求信息(如果请求数据是 JSON 格式的话);“XML” 以 xml 格式展开查看请求信息(如果请求数据是 XML 格式的话)。在响应部分,也有类似的多种查看方式,“TransformerHeaders” 以层级方式来展示 HTTP 响应头部信息;“TextView” 以文本方式来展示 HTTP 响应正文信息;“SyntaxView” 以语法高亮来展示 HTTP 响应正文信息;“ImageView” 以图片的形式来展示响应信息(前提是你选择的会话是一个图片响应);“HexView” 以 16 进制来查看响应信息;“Webview” 以 html 编译显示之后的形式来查看响应结果;“Auth” 查看响应权限;“Caching” 查看响应缓存相关信息;“cookie” 查看响应 cookie 信息;“Raw” 以原生格式展示响应信息;“JSON” 以 json 展示响应信息;“xml” 以 xml 展示响应信息。通过这些不同的查看方式,你可以深入了解请求和响应的每一个细节,快速定位问题。
  • AutoResponder(文件代理):也叫自动拦截请求或者自动响应器,可以把想要的服务器上返回的文件使用本地的文件做代理,用于拦截某一请求,并进行重定向到本地的资源、使用 Fiddler 的内置响应、自定义响应等操作。例如,当线上出现问题时,你可以使用这个功能将线上返回的文件在本地做修改,模拟不同的响应情况,看看问题是否解除,从而快速定位线上 bug。此功能启用后,可以将某一请求的响应结果替换成指定的资源,可以是本地文件,也可以是 Fiddler 内置的各种 HTTP 响应。比如,你可以设置让某个请求返回一个本地的 JSON 文件,模拟服务器返回特定数据的情况,在不影响用户体验的前提下进行测试和调试 。
  • Composer(构造器):主要用于前后端接口联调,可以将条目拖到 Composer 然后进行模拟执行,伪造请求,不写 js 实现跟服务器交互,类似 Postman 的功能。比如,你在开发一个新的接口时,可以在 Composer 中构造请求,设置请求方法(GET、POST 等)、请求头、请求体等信息,然后点击 “Execute” 按钮发送请求,查看服务器的返回值,测试接口的正确性和功能是否符合预期 。
  • Log(日志):使用 Fiddler 的日志记录功能,记录了 Fiddler 运行过程中的各种信息,包括请求和响应的详细数据、错误信息等。当出现问题时,你可以查看日志来了解具体发生了什么,辅助你进行问题排查。
  • Filters(过滤器):提供强大的过滤功能,可以帮助你只显示关心的请求或者隐藏掉不关心的请求。比如,你可以在 “User Filters” 中启用过滤功能,然后在 “Hosts” 文本框内输入需要标记或过滤的域名,多个域名使用 “;” 分号分割,这样 Fiddler 就会只显示或隐藏与这些域名相关的会话。你还可以根据请求类型、响应状态码等多种条件进行过滤,快速筛选出需要分析的数据。
  • Timeline(时间轴):用于网站性能分析,当一个网站有多个请求时,选中查看 Timeline 可以查看请求详情。它以时间轴的形式展示各个请求的发起时间、响应时间等信息,让你直观地了解网站加载过程中各个请求的时间顺序和耗时情况,从而找出影响网站性能的关键请求,进行针对性的优化 。
  • Session Inspector(会话检查器):可以查看会话的详细信息,包括请求和响应的头信息、cookie 信息等,与 Inspectors 标签有些类似,但在展示方式和侧重点上可能会有所不同,为你提供另一种查看和分析会话的视角。
  • Performance(性能):提供影响 web 性能的简单选项。例如,若选中 “simulate modem speeds”,它会设置所有后续 session 的 flag,把 request-trickle-delay 标志设置为 300,所有上传数据延迟 300ms/kb,若把 response-trickle-delay 标志位设为 150,会使所有下载数据延迟 150ms/kb,用于模拟低速网络环境,测试网站在不同网络条件下的性能表现;若选中 “disable caching”,将会删除所有 If - None - Match 和 If - Modified - Since 请求头,并添加 Pragma:no - cache 请求头,选中该项还会删除响应中的所有 Expires 头,并把 Cache - Control 响应头设置成 no - cache,用于测试网站在禁用缓存情况下的表现 。
  • Comparer(比较器):可以对两个或多个会话进行比较,对比它们的请求和响应数据,找出差异。比如,你在测试一个接口的不同版本时,可以使用 Comparer 来比较不同版本接口的请求和响应,快速发现接口的变化和可能存在的问题 。

(四)状态面板

状态面板位于 Fiddler 界面的底部,虽然面积不大,但却包含了很多重要的状态信息,时刻向你汇报着 Fiddler 的工作状态和当前网络请求的一些基本情况。

  • Capturing:显示 Fiddler 是否处于捕捉状态,开启状态下会显示 “Capturing”,关闭状态则不显示。你可以用快捷键 F12 切换或者直接点击该区域进行切换,此操作与菜单栏中 File→Capture Traffic 的效果是一致的。默认情况下,只有当这里显示 “Capturing” 时,Fiddler 才会捕获请求。例如,当你在进行抓包操作时,如果发现没有捕获到请求,首先就可以检查这里的状态是否为开启。
  • All Processes:这里有 All Processes、Web Browsers、Non - Browser、Hide All 几个选项,用于显示当前捕捉哪些进程的通讯,但前提是被捕获的进程必须使用 HTTP 代理:127.0.0.1:8888。“All Processes” 表示捕获所有进程的请求;“Web Browsers” 表示捕获 Web 浏览器的请求(这里的 Web 浏览器一般特指 IE 浏览器,不过在实际使用中,其他浏览器如果设置了代理也能被捕获);“Non - Browser” 表示捕获非 Web 浏览器的请求;“Hide All” 表示隐藏所有请求。比如,当你只想捕获浏览器的网络请求时,就可以选择 “Web Browsers” 选项,这样 Fiddler 就只会关注浏览器发出的请求,避免其他进程的干扰 。
  • 断点:这个空白小区域用于显示当前断点设置状态,通过鼠标点击可以切换断点状态。有三种状态:不设置断点、所有请求在断点处被暂停(即请求之前断点,当这个状态启动时,发送的请求就会卡在断点处,你可以在断点处修改请求参数等信息)、所有响应在断点处被暂停(也就是说服务器已经返回请求的数据了,但是被 Fiddler 在中间卡住了,还没有到客户端这一边,此时你可以修改响应数据)。例如,在调试一个登录接口时,你可以在请求之前设置断点,修改登录的用户名和密码参数,测试不同参数下接口的响应情况。
  • 数字 / 数字:显示当前共捕获了多少 session,如 “300”,表示共捕获了 300 个。如果选择了 session

五、Fiddler 抓包实战

(一)抓取 HTTP 请求

以访问百度为例,向你展示如何使用 Fiddler 抓取 HTTP 请求,并分析请求和响应数据。

打开 Fiddler,确保其处于捕获状态(底部状态栏显示 “Capturing”)。然后打开浏览器,在地址栏输入百度的网址https://www.baidu.com,并按下回车键。此时,Fiddler 的会话面板中会迅速出现一系列会话,这些就是浏览器与百度服务器之间的 HTTP 通讯记录。

在会话面板中,找到与百度请求相关的会话(通常是第一个,其 “Host” 列显示为 “www.baidu.com”),点击选中它。在右侧的监控面板中,切换到 “Inspectors” 标签,这里可以查看请求和响应的详细信息。

在请求部分,“Headers” 标签展示了 HTTP 请求头的详细内容。其中,“GET / HTTP/1.1” 表示这是一个 GET 请求,请求的资源是根目录;“Host: www.baidu.com” 指定了请求的主机名;“User - Agent” 包含了浏览器的信息,如使用的浏览器类型、版本以及操作系统等,百度服务器可以根据这些信息返回适合该浏览器和系统的内容;“Accept” 表示浏览器能够接受的响应内容类型,如 “text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,/;q=0.8,application/signed - exchange;v=b3;q=0.7”,说明浏览器可以接受 HTML、XML 等多种类型的内容 。“WebForms” 标签如果有数据,会显示表单提交的数据,但由于这是一个简单的 GET 请求访问首页,这里可能没有具体数据;“Raw” 标签则展示了原始的 HTTP 请求内容,包含所有的请求头和请求行,方便查看完整的请求信息。

在响应部分,“Headers” 标签展示了 HTTP 响应头。“HTTP/1.1 200 OK” 表示响应状态码为 200,说明请求成功;“Content - Type: text/html; charset=utf - 8” 表示响应内容的类型是 HTML,字符编码为 UTF - 8;“Server” 显示了服务器的类型,如 “BWS/1.1”,这可以让我们了解百度服务器的一些技术信息 。“TextView” 标签以文本形式展示了响应体的内容,也就是百度首页的 HTML 代码,通过查看这些代码,可以了解网页的结构和内容是如何生成的;“ImageView” 标签如果响应是图片,会显示图片内容,但这里是网页请求,所以不适用;“Raw” 标签展示了原始的 HTTP 响应内容,包括响应头和响应体,完整呈现了服务器返回的数据。

(二)抓取 HTTPS 请求

HTTPS 请求由于数据传输过程中的加密,抓取时需要进行特殊配置。

首先,确保 Fiddler 已经进行了前面提到的 HTTPS 配置,即点击菜单栏中的 “Tools”,选择 “Options”,在弹出的窗口中切换到 “HTTPS” 选项卡,勾选 “Decrypt HTTPS traffic”,并点击 “Actions”,选择 “Trust Root Certificate”,完成证书信任操作。

以访问淘宝为例,打开浏览器,输入淘宝网址淘宝。此时 Fiddler 会话面板中会出现与淘宝相关的 HTTPS 会话。在会话面板中找到对应的会话,点击它,在右侧 “Inspectors” 标签下查看请求和响应信息。可以看到,与 HTTP 请求类似,同样可以查看请求头和响应头的各项信息,如请求头中的 “User - Agent”“Cookie” 等,响应头中的 “Content - Type”“Server” 等。不同的是,由于 HTTPS 的加密特性,数据在传输过程中是加密的,但通过 Fiddler 的配置,我们可以看到解密后的请求和响应内容,就像在查看 HTTP 请求一样 。

(三)手机 APP 抓包

以抖音 APP 为例,详细说明如何通过 Fiddler 抓取手机 APP 的数据包。

确保手机和电脑处于同一局域网内,并且手机已经按照前面介绍的方法配置了代理,即打开手机的 “设置”,点击 “无线局域网”,点击当前连接的 WiFi 右侧的 “i” 图标,进入 WiFi 详情页面,在页面下方找到 “配置代理” 选项,选择 “手动”,在 “服务器” 一栏输入电脑的 IP 地址,在 “端口” 一栏输入 Fiddler 设置的端口号 8888 。同时,手机也已经安装并信任了 Fiddler 证书。

打开 Fiddler,确保处于捕获状态。然后在手机上打开抖音 APP,进行一些操作,如刷视频、搜索内容、点赞等。Fiddler 的会话面板中会实时显示抖音 APP 与服务器之间的通讯会话。

在会话面板中找到抖音相关的会话(可以通过 “Host” 列中的抖音域名,如 “aweme - sso.snssdk.com” 等信息来判断),点击选中会话,在右侧 “Inspectors” 标签下分析请求和响应数据。在请求部分,可以查看请求头中的设备信息(如设备型号、操作系统版本等,通过 “User - Agent” 等字段体现)、登录的用户信息(可能通过 “Cookie” 或者自定义的认证头信息体现)以及请求的具体参数(在 “WebForms” 或者 “JSON” 等标签下查看,根据请求数据格式而定) 。在响应部分,可以查看响应的视频数据(如果是视频请求,在 “ImageView” 或者视频格式相关的查看方式下查看)、用户信息(如个人资料、粉丝数等)、推荐内容等,通过分析这些数据,可以了解抖音 APP 的网络通讯机制,如数据如何请求、服务器如何响应、数据格式等,对于 APP 开发、测试以及数据分析都有重要意义 。

六、Fiddler 高级功能应用

(一)设置断点

断点功能是 Fiddler 的一大亮点,它就像是一个智能的交通信号灯,能让你在网络请求的关键节点暂停,以便进行深入的调试和分析。

设置断点主要有两种方式,分别是全局断点和单个断点。

设置全局断点有两种方法,一种是通过菜单栏进行操作,点击 “Rules”,选择 “Automatic breakpoints”,然后有 “Before Requests” 和 “After Responses” 两个选项。选择 “Before Requests”,则会在所有请求发送到服务器之前设置断点,此时请求会被拦截在 Fiddler 中,你可以对请求进行修改,如修改请求头、请求参数等,然后再决定是否发送到服务器;选择 “After Responses”,则会在服务器响应之后,Fiddler 将响应传回给客户端之前设置断点,这时你可以修改响应数据,如修改响应头、响应体等 。另一种设置全局断点的方法是使用快捷键,按下 F11 键可以快速设置请求前断点,按下 Alt+F11 键可以设置响应后断点。

单个断点则是用命令行的形式来设置,特点是只拦截某个特定的请求。在 Fiddler 的命令行中,输入 “bpu 域名”(例如 “bpu www.baidu.com”),就只会对配置的域名添加断点,访问其他域名的请求可以正常进行,不会被拦截。这种方式非常适合在众多请求中,针对某个特定的接口或域名进行调试。如果要取消单个请求前的断点,在命令行输入 “bpu” 即可;取消单个响应后的断点,输入 “bpafter” 。

断点在实际应用中有很多场景。比如在开发一个电商网站的搜索功能时,你怀疑搜索接口的请求参数有问题。通过设置请求前断点,你可以拦截搜索请求,查看和修改请求参数,比如将搜索关键词从 “手机” 改为 “电脑”,然后观察服务器的响应,判断是请求参数导致的问题还是服务器端的逻辑问题。在测试一个需要用户登录的应用时,设置响应后断点,你可以修改服务器返回的登录状态信息,将原本的 “登录成功” 改为 “登录失败”,测试客户端在不同登录状态下的界面展示和功能逻辑是否正确,如是否弹出正确的错误提示,是否阻止用户进入需要登录才能访问的页面等 。

(二)模拟网络环境

在不同网络环境下测试应用的性能和稳定性是非常必要的,而 Fiddler 提供了方便的模拟网络环境功能,让你无需实际处于不同的网络中,就能测试应用在各种网络条件下的表现。

Fiddler 模拟网络环境主要是通过限速来实现的,启用方法如下:点击 “Rules”,选择 “Performances”,勾选 “Simulate Modem Speeds”,即可模拟调制解调器的速度,让网络变慢 。这是一种简单的模拟低速网络的方式,适合测试应用在较差网络条件下的加载速度和响应情况。

如果需要更精确地控制网络速度,可以点击 “Rules” - “Customize Rules”(快捷键 Ctrl + R)打开 Fiddler ScriptEditor,或者直接点开右侧主页签的 FiddlerScript。在文件中找到 “m_SimulateModem” 标志位,相关代码如下:


if (m_SimulateModem) {

// Delay sends by 300ms per KB uploaded.

oSession["request-trickle-delay"] = "300";

// Delay receives by 150ms per KB downloaded.

oSession["response-trickle-delay"] = "150";

}

这里的 “request-trickle-delay” 表示每上传 1KB 数据延迟的毫秒数,“response-trickle-delay” 表示每下载 1KB 数据延迟的毫秒数。你可以根据需要修改这两个值来调整上传和下载速度。例如,将 “request-trickle-delay” 改为 “100”,“response-trickle-delay” 改为 “50”,则上传速度会加快,下载速度也会相应变化。通过这种方式,可以模拟不同带宽的网络环境,如 2G、3G、4G 网络等 。

此外,还可以设置网络环境的随机参数,使得网络带宽不是恒定为一个低速的值,更接近真实网络环境的波动。在代码中加入以下函数来生成随机整数:


static function randInt(min, max) {

return Math.round(Math.random() * (max - min) + min);

}

然后修改 “m_SimulateModem” 代码块如下:


if (m_SimulateModem) {

// Delay sends by a random value between 100 and 200ms per KB uploaded.

oSession["request-trickle-delay"] = "" + randInt(100, 200);

// Delay receives by a random value between 1 and 50ms per KB downloaded.

oSession["response-trickle-delay"] = "" + randInt(1, 50);

}

这样在模拟网络环境时,上传和下载的延迟时间会在设定的范围内随机变化,更好地模拟真实网络的不稳定性 。

(三)修改请求和响应数据

在开发和测试过程中,有时需要修改请求和响应数据,以满足不同的测试需求或调试问题,Fiddler 提供了强大的修改请求和响应数据的功能 。

修改请求数据时,可以先设置请求前断点。如前文所述,通过菜单 “Rules” - “Automatic breakpoints” - “Before Request”(或者按 F11 键)设置全局请求前断点,或者在命令行输入 “bpu 域名” 设置单个请求前断点。设置好断点后,当请求被拦截时,在会话面板中选中对应的请求,在右侧的 “Inspectors” 标签下,选择 “Raw” 选项卡,即可看到原始的请求数据,在这里可以对请求数据进行修改,比如修改请求头中的 “User - Agent” 信息,模拟不同的浏览器访问;修改请求体中的参数,测试不同参数组合下服务器的响应 。修改完成后,点击 “Run to Completion”(继续执行)按钮,修改后的请求就会被发送到服务器。

以登录接口为例,假设正常的登录请求体是{"username":"test","password":"123456"},你怀疑密码加密方式有问题,想要测试明文密码登录的情况(仅用于测试和调试,实际应用中严禁此类操作),可以设置请求前断点,将请求体修改为{"username":"test","password":"test"},然后继续执行请求,观察服务器的响应,判断问题所在 。

修改响应数据同样需要设置断点,这里可以设置响应后断点。通过菜单 “Rules” - “Automatic breakpoints” - “After Response”(或者按 alt+F11 键)设置全局响应后断点,或者在命令行输入 “bpafter 域名” 设置单个响应后断点。当响应被拦截时,在会话面板中选中对应的请求,在 “Inspectors” 标签下的 “Raw” 选项卡中修改响应数据。如果响应数据是经过编码的,如 gzip 编码,可能需要先点击 “response body is encoded.click to ecode” 进行解码,然后再修改数据 。修改完成后,点击 “Run to Completion” 将修改后的响应返回给客户端。

例如,在测试一个新闻应用时,服务器返回的新闻列表中包含广告信息,你想测试去掉广告后的界面展示和用户体验,就可以设置响应后断点,在响应数据中删除广告相关的内容,然后查看客户端展示的新闻列表是否符合预期 。

七、常见问题与解决方法

在学习和使用 Fiddler 的过程中,你可能会遇到一些常见问题,这里为你提供相应的解决方法,帮助你顺利使用 Fiddler。

(一)抓不到包

  • 问题描述:开启 Fiddler 后,在浏览器或手机 APP 上进行操作,但 Fiddler 的会话面板中没有显示任何请求。
  • 解决方法:首先,检查 Fiddler 的捕获状态,确保底部状态栏显示 “Capturing”,若未显示,可点击该区域或按 F12 键开启捕获。其次,确认代理设置是否正确。对于浏览器,检查浏览器的代理设置是否指向 Fiddler(通常为 127.0.0.1:8888);对于手机 APP 抓包,检查手机的代理设置,确保手机和电脑处于同一局域网,且代理服务器为电脑 IP,端口为 Fiddler 设置的端口号 8888 。另外,若抓的是 HTTPS 请求,需确保 Fiddler 已进行 HTTPS 配置,即勾选 “Tools” - “Options” - “HTTPS” 中的 “Decrypt HTTPS traffic”,并安装信任 Fiddler 证书。同时,检查是否设置了过滤条件,导致请求被过滤掉,可查看右侧的 “Filters” 选项,若勾选了 User Filters 相关选项,点击 “Actions” 取消勾选。若问题仍未解决,可能是端口冲突,可检查是否有其他程序占用了 Fiddler 使用的 8888 端口,如有,可修改 Fiddler 的监听端口 。

(二)HTTPS 抓包失败

  • 问题描述:按照配置步骤进行了 HTTPS 抓包设置,但仍无法抓取 HTTPS 请求,或抓取到的内容显示异常。
  • 解决方法:确认证书安装和信任情况。对于 PC 端,在 Fiddler 中点击 “Tools” - “Options” - “HTTPS”,点击 “Actions” - “Trust Root Certificate”,确保证书被系统信任;对于手机端,在手机上安装 Fiddler 证书后,在 iOS 系统中需进入 “设置” - “通用” - “关于本机” - “证书信任设置”,开启 Fiddler 根证书的完全信任状态;安卓系统需在证书安装后,确保系统信任该证书 。若证书没问题,检查 Fiddler 版本是否过低,建议升级到最新版本,以确保对 HTTPS 抓包的兼容性。此外,若目标 APP 启用了 SSL Pinning 或双向认证,Fiddler 可能无法直接抓取其 HTTPS 流量,此时可尝试使用支持绕过 SSL Pinning 的工具,如 Sniffmaster(抓包大师) 。

(三)Fiddler 运行卡顿

  • 问题描述:使用 Fiddler 时,发现软件运行缓慢,响应不及时,抓包过程卡顿。
  • 解决方法:关闭不必要的日志记录功能,如点击 “Rules”,取消勾选 “Log requests” 等相关日志选项,减少 Fiddler 记录的数据量,从而提升运行速度。若会话面板中积累了大量历史会话,可定期清理,点击 “Remove” 按钮删除不需要的会话。另外,检查电脑性能,若电脑内存不足或 CPU 使用率过高,也可能导致 Fiddler 卡顿,可关闭其他占用资源较多的程序 。

(四)断点设置无效

  • 问题描述:设置了断点,但请求没有在断点处暂停,或者断点设置后影响了正常的网络请求。
  • 解决方法:确认断点设置方式是否正确。对于全局断点,检查 “Rules” - “Automatic breakpoints” 中的设置,确保选择了正确的断点类型(“Before Requests” 或 “After Responses”);对于单个断点,检查命令行输入是否正确,如 “bpu 域名” 格式是否准确。若设置无误,可能是由于其他规则或脚本影响了断点功能,可检查是否编写了自定义脚本影响了断点,若有,可暂时注释相关脚本代码进行排查 。同时,确保 Fiddler 没有处于异常状态,可尝试重启 Fiddler 后重新设置断点 。

八、总结与展望

Fiddler 作为一款强大的 HTTP 调试代理工具,为前端开发和软件测试等工作提供了极大的便利。通过本文,我们全面学习了 Fiddler 的相关知识,包括它是什么、为什么要学习、安装与环境配置、界面详解、抓包实战、高级功能应用以及常见问题与解决方法。

我们了解到 Fiddler 能全方位监控、记录和分析客户端与服务器之间的 HTTP 和 HTTPS 通讯,其安装和配置过程虽有一些细节,但只要按照步骤操作,就能顺利完成。Fiddler 丰富的界面功能,从工具面板的快捷操作,到会话面板的详细记录,再到监控面板的深入分析以及状态面板的实时状态展示,每个部分都紧密协作,帮助我们更好地理解和处理网络请求。

在抓包实战中,无论是 HTTP 请求、HTTPS 请求还是手机 APP 抓包,Fiddler 都能精准捕获数据,让我们清晰地看到网络通讯的细节。而设置断点、模拟网络环境、修改请求和响应数据等高级功能,更是为开发和测试工作打开了新的思路,极大地提高了工作效率和质量。

然而,技术的发展永无止境,Fiddler 也在不断更新和完善。未来,随着网络技术的飞速发展,如 5G、物联网等技术的普及,网络通讯将变得更加复杂和多样化。Fiddler 有望在功能上进一步拓展,例如对新的网络协议和加密技术提供更好的支持,提高抓包的准确性和效率。同时,在与其他开发和测试工具的集成方面,也可能会有更多的创新,为开发者和测试人员提供更加便捷、高效的工作流程。

对于读者来说,希望大家在掌握本文所介绍的 Fiddler 知识和技巧后,能在实际工作中不断实践和探索。在前端开发中,利用 Fiddler 优化网页性能、调试接口,提升用户体验;在软件测试中,充分发挥 Fiddler 的作用,进行全面的功能测试、性能测试和安全测试,确保软件的质量和稳定性。相信通过不断地学习和实践,大家能在网络开发和测试领域取得更大的突破,创造出更加优秀的软件和应用。

Logo

技术共进,成长同行——讯飞AI开发者社区

更多推荐