做调试这几年我一直有个习惯凡是遇到接口报错、页面数据对不上、前端后端互相甩锅的情况第一件事不是跟着猜而是先把流量抓出来看。早期我用浏览器自带的开发者工具后来发现它只能看当前页面的请求换个客户端、换个环境就抓瞎了。直到用了Fiddler很多原本要反复联调才能定位的问题自己几分钟就能查清楚。Fiddler本质上是一个HTTP调试工具工作方式是监听本机和服务器之间的HTTP/HTTPS流量并允许你查看、修改、重放、保存这些请求。它不挑语言、不挑框架只要是走HTTP(S)协议的数据基本都能接管。对前端用来联调接口、后端用来排查线上问题、测试用来模拟异常场景都非常合适。这篇教程我会从安装讲起把界面、抓包、断点、修改响应这些高频用法全过一遍每个操作都配有场景说明尽量让你直接照着做就能上手。1. Fiddler到底能解决什么问题1.1 抓包到底是在抓什么很多人第一次接触抓包工具时会有个困惑请求是浏览器或者App发出去的服务器返回的数据也在代码里为什么还要用一个“中间人”工具来看我举一个实际场景。某天前端A同学说“接口返回了500”后端B同学说“本地测了没事”两边一吵谁都没法说服对方。这时候你打开Fiddler把请求一拦就能看到实际发出去了什么参数、服务器实际返回了什么状态码和响应体。这不靠猜不靠日志全部是现场数据。抓包的本质就是在客户端和服务器之间加一道“透明的观察窗口”。客户端以为自己在直接跟服务器通信实际上数据先经过Fiddler再由它转发给服务器服务器返回的数据也先经过Fiddler再回到客户端。你在这个窗口里能看到所有HTTP请求的六要素请求行、请求头、请求体、状态码、响应头、响应体。只要这六个信息都对齐了80%的联调问题都能直接定位。1.2 为什么不用浏览器开发者工具浏览器自带的开发者工具网络面板确实很好用但它有几个天然的局限第一它只能监听浏览器里的请求来自其他客户端的流量它管不了第二它只能看不能改最多右键复制一下第三它对本机其他进程发起的请求基本无感。Fiddler的做法完全不同。它启动后会在本机监听一个端口系统里凡是走HTTP协议的应用只要把流量指向这个端口就能被捕获。这意味着除了浏览器你还可以抓桌面软件、手机App、小程序模拟器的请求。而且Fiddler不光能看还能断点、改包、重放这个“能改”的能力是调试效率提升的关键。一个典型的例子前端要调试一个“登录失败时弹出错误提示”的页面而后端接口在正常环境下根本不会返回失败。最方便的做法不是让后端写一个测试用例而是直接用Fiddler把接口的响应改成一个自定义的错误JSON前端立刻就能在真实页面上看到渲染效果。这就是抓包工具区别于普通“查看工具”的价值。1.3 哪些场景最值得用它结合我自己的使用经验Fiddler最适合这么几类场景一是前后端接口联调。后端还没把某些异常分支做好前端要提前开发页面就用Fiddler伪造异常响应。二是线上问题排查。线上环境和本地环境数据不一致把线上请求抓下来看参数、看响应头、看实际返回内容很多问题一眼就明白。三是性能分析定位。一个页面加载慢到底慢在哪个请求上Fiddler的时间线能看到每个请求的耗时帮你快速定位慢接口或大图片资源。四是对接第三方接口。第三方回调的数据格式往往无法随意改动用Fiddler模拟回调通知比等真实触发省太多时间。这四类场景基本覆盖了日常开发中八成以上的调试需求。往下我会按照实际使用顺序把从安装到实战的完整流程走一遍。2. 安装与初始配置把第一屏调好2.1 下载安装与版本选择的经验Fiddler有几个版本我建议直接使用Fiddler Classic它对个人使用免费功能也最全面。安装过程本身很简单一路Next即可但有几个容易踩的坑提前说。第一安装路径不要带中文有些环境中中文字符会导致证书相关的后续操作出现诡异问题。第二如果你的计算机上已经占用了8888端口Fiddler安装后默认的监听端口会冲突。判断方法很简单用浏览器访问 http://127.0.0.1:8888如果页面显示的是一个Fiddler自带的提示页面说明端口正常。如果访问不通就需要在菜单Tools - Options - Connections里修改端口。第三特别提醒一下有些杀毒软件或系统防火墙会对Fiddler的端口监听行为弹窗提示。第一次启动时如果遇到安全提示需要放行它的监听操作否则会出现“Fiddler已经打开但浏览器就是抓不到包”的情况。2.2 HTTPS解密证书安装与原理很多新手装了Fiddler后第一反应是“我明明按了开始抓包页面也访问了为什么列表里全是Tunnel to这种条目看不到具体的内容”原因是现代网站大多使用HTTPS加密传输Fiddler要看到里面的明文内容必须安装并信任它生成的根证书。这个过程在技术上有专门的术语叫“中间人解密”通俗解释就是Fiddler给浏览器颁发了一张它自己签发的证书浏览器信任了这张证书之后Fiddler才能解包看到里面的数据。操作路径是菜单Tools - Options - HTTPS选项卡勾选Capture HTTPS CONNECTs和Decrypt HTTPS traffic然后点击右侧的Actions按钮选择Trust Root Certificate系统会弹窗询问是否信任证书选择是证书就装好了。这里面有一个新手最容易忽略的细节只勾选项、不点Trust Root Certificate。勾选选项只是告诉Fiddler“我要解密”但浏览器的信任列表里没有它的证书一样解密失败。装完之后建议重启一次Fiddler再访问任意网站测试如果会话列表里能看到类似“200 HTTPS”的条目而不是只有Tunnel说明解密生效了。注意证书安装成功后别在Fiddler菜单里随意执行“Remove Root Certificate”。有些时候你只是换个环境测试不小心把证书删了回头再抓HTTPS流量时就只能重新装一遍。我见过不少同事因为这个折腾了半天。2.3 捕获开关与端口配置Fiddler界面的左下角状态栏有一个显示为“Capturing”的按钮。点击它可以切换捕获开启或关闭。这个按钮非常重要因为在实际调试过程中你不可能抓所有流量系统后台任何程序发的HTTP请求都会飘进来列表会变得非常混乱。我的习惯是平时保持关闭状态需要时再打开捕获抓一两轮就关掉把精力集中在目标流量上。端口配置在Tools - Options - Connections里默认监听8888端口。这里除了修改端口还有一个“Allow remote computers to connect”选项如果你想抓真机App或者另一台电脑上的流量就需要勾选它。但这会涉及更多的网络配置建议新手先集中精力把本机的HTTPS抓包跑通移动端调试等基础扎实了再扩展。配置完成之后最基本的验证方法是打开Fiddler点左下角Capturing开启捕获然后随便访问一个非HTTPS的HTTP网站比如常见的http开头的站点。此时会话列表中会出现一系列条目点击任意一条右侧就能看到完整的请求头和响应内容。这一步跑通你就正式进入Fiddler的世界了。3. 界面布局与基础操作别被一堆按钮吓到3.1 主界面四块区域的用途Fiddler的默认界面看起来信息很多但拆开来看核心区域就四块。左上最大的区域是会话列表Web Sessions所有被捕获的HTTP请求都会在这里按时间顺序排列。每一行代表一个请求双击可以看到详细信息。右侧上半部分是请求检查器Inspectors当你点击列表中的某一条会话时这里会展示该请求的详细信息包括请求行、请求头、请求体。下半部分是响应检查器展示服务器返回的状态行、响应头和响应体。顶部有一排工具栏按钮常见的包括WinConfig配置Windows系统代理、Clear All清空列表、Find查找会话、Save保存会话、Replay重放请求。底部有一个黑色的命令行区域叫QuickExec可以输入快捷命令后面我会单独讲。第一次使用时我的建议是不要想着记住所有按钮只要先学会看“会话列表”和“Inspectors”这两个区域其余功能遇到需要时再慢慢熟悉。3.2 会话列表里那一堆条目的含义会话列表每一行看起来就是几个字段但读起来有讲究。字段包括ResultHTTP状态码、Protocol协议版本、Host主机名、URL请求路径、Body响应体大小、Content-Type内容类型、Process哪个进程发的请求。几个实践经验第一状态码的颜色有规律。2xx绿色3xx黄色4xx红色5xx深红凡是状态码不是2xx的条目一眼就能看出问题。第二左侧有一个圆形图标有的显示为地球标志说明这个请求走的是网络有的显示为一个类似软盘的图标说明它可能命中了本地缓存这类请求的响应可能不是真实的服务器返回。第三Host字段非常关键当你同时调试多个域名时按Host列排序可以快速把目标请求归拢到一起。还有一个小技巧列表上方有一个“Filters”按钮点击后进入过滤器设置界面你可以只显示某个Host、只显示某个进程、隐藏掉所有静态资源。这个操作对口令调中国的高噪声流量非常有帮助我后面在实战部分会详细展开。3.3 高频操作与快捷键别再做鼠标党如果你打算长期用Fiddler有几个快捷键值得记住能省很多操作时间CtrlX清空当前会话列表。F12开启或关闭捕获和左下角Capturing按钮效果一样。Enter查看选中的会话的详细内容。R重放选中的请求。Delete删除选中的会话。CtrlF在当前列表中查找包含特定关键字的会话。自定义列也是个很实用的功能。右键点击列表标题栏可以修改显示哪些字段。我一般会额外加一个“Response Code”的响应码列和“Timing”耗时列这样在排查慢请求时就不用点开Inspector看才知道花了几毫秒。清空列表这件事看着简单实际操作中很多人会忘。记住一个原则开始一次新的调试任务之前先CtrlX清空旧数据再F12开启捕获这样会话列表里就都是最新相关流量不会混入无关请求。这个小习惯能帮你节省大量筛选时间。4. 实战拆解从抓到改到重放4.1 用过滤器快速锁定目标流量先做一个最影响效率的操作配置过滤器。在会话列表上方点击Filters按钮勾选Use Filters然后在Host区域选择Show only the following Hosts输入你正在调试的域名。这样设置之后Fiddler只显示该域名的流量其他域名、后台进程的请求统统被隐藏。对于调试一个具体页面来说效果立竿见影列表里只剩目标接口的请求。再配合一个进阶设置在Filters下部的URL区域填写一个关键字例如/api/这样列表里只保留路径中包含/api/的请求。如果你的页面加载了图片、样式等静态资源想过滤掉它们可以在勾选“Hide if URL contains”后面填上诸如 .css|.js|.png 这样的条件。实际调试的时候我经常同时开启Host过滤和URL关键字过滤把流量缩小到两三个关键接口。信息越少干扰越小这是抓包调试的核心思路。很多人抱怨Fiddler难用多半是因为看到太多无关流量后自己先乱了阵脚。4.2 Inspector请求和响应的完整拆解选中一条会话后右侧的Inspectors区域会展示详细数据。它的查看模式有很多种新手只需要掌握三种Headers、JSON、Raw。Headers视图展示请求头和响应头的键值对列表。排查问题时我最常查看的请求头包括User-Agent客户端类型、Cookie身份信息、Referer来源页面、Authorization认证令牌如果有。响应头里重点看Content-Type返回类型、Content-Encoding是否压缩、Set-Cookie是否有服务端写入的Cookie。JSON视图是Fiddler非常实用的功能当响应体或请求体是JSON格式时它会自动格式化并按层级展示比看压缩成一行的原始文本直观太多。很多接口联调问题其实一眼就能在JSON视图里看出来字段名拼错了、值的类型不对、某个字段为null但前端没做判空。Raw视图展示的是未经任何处理的原始报文。当遇到某些奇怪的编码问题、或者需要确认请求的实际字节内容时就用Raw视图排查。还有一种场景也离不开Raw视图排查请求头顺序问题。虽然HTTP规范不要求头部顺序但个别服务器会有奇葩要求这时只有Raw视图才能看到真实的发送顺序。4.3 AutoResponder不需要后端也能改响应这个功能是我认为Fiddler最能提升联调效率的地方没有之一。它的核心作用是让指定的请求直接返回你预设好的响应而不真正请求服务器。常用于以下几种情况后端还没写好某个接口前端要提前开发页面线上环境某个接口数据异常你想看看改成正常数据后页面表现是否正常需要模拟各种异常响应502、超时、空数据看前端有没有做异常处理。操作方法是先让页面跑一遍把目标请求捕获到然后右键该请求选择“Save Response”把它的响应保存成一个本地文件并记住路径。再到AutoResponder选项卡勾选Enable Rules把刚才的请求拖拽进去在右侧的Rule Editor里选择文件最后勾选Unmatched requests passthrough点击Save。这样设置之后刷新页面时这个请求就会直接走本地的假数据。改文件内容后再刷新页面就会渲染新的结果整个过程不用后端参与。有一类特殊用法你想模拟一个完全不存在的接口。这时不需要预先捕获直接手动填写一个URL规则设置响应为文件或者自定义响应串。这在对接某些只在特定环境存在的回调接口时很实用。注意AutoResponder规则要避免把所有请求都拦截了否则页面会变得不完整所以才会让你勾选“Unmatched requests passthrough”把不匹配的请求放行。4.4 Composer手工构造请求Composer用于手动拼接和发送HTTP请求。某些场景下你需要模拟一个和现有请求类似但参数不同的请求就可以把已有的会话拖进Composer里修改。具体操作右键目标会话选择Replay Reissue and Edit这种方式会把请求原封不动带到Composer界面你可以直接改URL、改请求头、改请求体点Execute发送。这里分享一个参数修改的注意点。很多时候参数在请求体里但有些接口要求部分参数放在URL的query里。拖进Composer后要仔细看请求方法是GET还是POST。如果你是POST接口改了URL参数而忘了改请求体服务器大概率会返回参数缺失。另一个容易错的地方是Content-Type头改参数时别顺手删掉这个头尤其当请求体是JSON格式时Content-Type必须是application/json否则服务器解析不了。Composer还支持直接导入cURL命令。当你从其他工具或者同事分享的调试信息里拿到一个curl命令时切到Orchestrate选项卡在Request里粘贴点击Execute即可转换成Fiddler请求。实际排查问题时这个功能很常用来快速复现现场。4.5 断点拦截在流量经过时暂停Fiddler的断点功能类似调试代码时的断点可以在请求发出去之前或响应返回之前停下来让你修改数据再继续。启用请求断点菜单Rules - Automatic Breakpoints - Before Requests。启用响应断点Rules - Automatic Breakpoints - After Responses。实际操作中我更多使用响应断点因为它的典型场景是“我想看看页面在某个数据下会长什么样”或者“我想修改一个请求的响应头”。断点生效时会话列表中的对应条目会显示为一个红色的暂停图标并且内容的细节会在Inspectors里展示此时你可以随意修改数据修改完成后点击工具栏的“Run to Completion”按钮放行请求。一个提醒断点是对所有请求生效的开启后每个请求都会卡住页面会变得无法交互。所以实际调试时建议结合过滤器使用先用Filter把范围缩小到需要断点的请求再启用断点。我见过多次新手开着断点然后发现浏览器“死掉了”其实是所有请求都被卡在断点上。这种情况在底部状态栏看到红色Running字样时先别慌关掉断点再点Run to Completion逐个放行页面就能恢复。4.6 性能观察慢请求一查便知Fiddler在处理页面性能问题时也有两种常用视图。Statistics视图点击某条会话后右侧切换到Statistics选项卡会展示该请求的DNS解析耗时、TCP连接耗时、TLS握手耗时、服务端响应时间、内容传输时间等指标。重点关注“Server Processing Time”这一项它能区分出瓶颈在服务端还是网络传输。如果等待时间集中在服务端说明后端处理慢如果集中在接收响应内容上可能是返回体太大或者带宽受限。Timeline视图点击工具栏的“Timeline”按钮可以看到页面所有请求的时序瀑布图。每一条请求按时间顺序排布如果有某个请求阻塞了后续请求比如页面首屏依赖的关键请求瀑布图上能一眼看出来。这个视图特别适合定位“页面整体内容很快但首屏就是出不来”之类的问题。最近一次排查一个报表页面加载慢的问题我通过Timeline看到某个统计数据接口的请求被其他三个资源请求阻塞了进一步用Statistics发现该接口的TIME_WAIT连接需要重用定位到是在服务端没有开启连接复用导致的。如果没有Fiddler这类图谱纯靠肉眼几乎不可能发现这个关联。5. 进阶功能与日常效率技巧5.1 QuickExec命令行的几个高频命令Fiddler底部那个不起眼的黑色输入框其实是一个命令入口输入命令再按回车即可执行。掌握几个高频命令之后操作会快得多。清空列表输入 clear 再回车效果等同CtrlX。只显示某个主机名的请求输入 select host 域名比如 select host example.com会话列表立刻只剩该域名的流量。高亮特定请求输入 select 状态码比如 select 500所有状态码为500的请求会高亮显示。这在排查大量请求中的错误时很有用。按响应类型过滤输入 select image图片类请求会被高亮。QuickExec还支持一些更灵活的选择器语法只是日常用这几个就够高频了。很多人怕记不住命令我的建议是把它当成一个“临时过滤器”用因为它的优势是不需要切换到Filters选项卡去修改配置直接输入直接生效非常顺手。5.2 扩展点FiddlerScript的轻量自动化FiddlerScript是一个基于脚本的定制机制。你可以在FiddlerScript选项卡里修改脚本逻辑让某些操作自动执行。比如自动保存指定域名的响应到本地目录或者自动在响应头上添加一些调试标记。脚本入口在菜单FiddlerScript - Open FiddlerScript Editor。它看起来是一段基于C#语法的脚本新手看到可能有点畏惧但其实对大多数人来说不需要改逻辑只要能看懂两个常用钩子就可以OnBeforeRequest在请求发出去之前执行可以用来修改请求头、修改URL。OnBeforeResponse在响应返回之后执行可以用来修改响应内容、提取关键字。举个例子我想让所有请求都带上一个自定义的请求头可以在OnBeforeRequest里加上一句 oSession[X-My-Token] debug123。然后保存脚本之后每个通过Fiddler的请求都会自动附带这个头。这在模拟特定环境、或者联调某些需要固定认证头的接口时很有用。我不建议普通人直接大改脚本容易把Fiddler本身的解密逻辑破坏掉。稳妥的做法是先备份默认脚本再改新增的几行遇到问题就恢复备份。5.3 会话保存、分享与二次分析调试过程中的会话数据是可以保存下来给同事分析的。操作是选中多条会话后File - Save - Selected Sessions保存为.saz文件。同事收到后在Fiddler直接双击这个文件就能看到完整的捕获内容包括请求、响应、时间线等信息。还有一种导出格式是纯文本导出后可以用其他工具做二次分析。我自己经常把某个页面的一整轮交互过程导出成纯文本日志附在问题单里发给后端同学比截图、口语描述都要精确得多。这里有一个整理数据的经验保存会话之前先在列表中把无关请求删掉再把有代表性的会话重命名。操作是在会话上右键选择Notes写上一句“这是登录接口返回500的现场”。这样保存下来的saz文件即使一周后翻出来看也能马上知道每条记录的含义。前端联调、问题回放、交接工作这套习惯都很有用。6. 常见问题与排查实录6.1 问题速查表我整理了一份面向新手的常见问题速查表问题、可能原因、处理办法按列对应。遇到问题时可以直接对照排查。现象可能原因处理办法打开了Fiddler但浏览器没有请求出现捕获开关未开系统代理设置不对点击左下角Capturing开启捕获到Tools - Options - Connections确认端口设置只能看到Tunnel to条目HTTPS解密未开启证书未信任勾选HTTPS解密选项并点击Actions里的Trust Root Certificate重新信任能抓到自己浏览器的包但抓不到某个桌面软件的流量该软件未走系统代理有的应用会忽略系统代理设置把Fiddler设置为上游协议代理再调整该应用的网络连接配置页面提示“您的连接不是私密连接”Fiddler证书未被当前浏览器信任或证书过期重新安装并信任Fiddler根证书重启Fiddler后再试修改了AutoResponder规则但刷新后不生效未勾选Unmatched requests passthrough或者规则URL不匹配检查规则是否启用、规则里的URL是否精确匹配请求尝试拖拽会话重新生成规则请求响应内容显示为乱码内容通常经过gzip或br压缩在Inspectors里将Response Content-Type切换为对应的解码视图多数情况下会自动解码无法解时用Raw视图查看原始字节Fiddler 能抓包但页面加载很慢断点功能被意外开启检查Rules里的Breakpoints是否关闭确保没有请求被断点卡住端口8888被占用其他程序占用了默认监听端口修改为其他未被占用的端口比如8877然后重启Fiddler6.2 证书相关的排查实录证书问题是新手遇到最多的一类。我见过的最典型场景是HTTPS选项都勾上了证书也弹出信任窗口点过确认了但重启后依然只能抓到连接信息看不到内容。这种时候先别急着卸载重装按照顺序检查三步。第一步到Tools - Options - HTTPS确认“Capture HTTPS CONNECTs”和“Decrypt HTTPS traffic”都处于勾选状态。第二步打开系统的证书管理工具搜Fiddler关键字看证书是否确实存在于受信任的根证书颁发机构列表中。如果不在说明刚才的信任确认可能被系统或者安全软件拦截了需要重新执行一次信任操作。第三步确认Fiddler自身是否在监听试试访问http://127.0.0.1:8888来验证。还有一个容易被忽略的老问题Fiddler如果本身运行在某个受限账户下证书安装会不彻底。这种情况在团队公用电脑上时有发生解决办法是使用管理员身份启动Fiddler再重做一次证书信任流程。6.3 抓不到包时的经验性排查“明明开了Fiddler浏览器却像没事人一样”这个现象多数情况下是浏览器没有走Fiddler的监听链路。理解这个原因首先要明白Fiddler的工作机制它通过修改系统的HTTP代理设置把浏览器请求导向自己。但如果浏览器没有走系统代理或者某种安全策略覆盖了系统代理设置就出现了抓不到包的情况。排查思路先在Fiddler里确认WinConfig或者系统代理开关是打开的然后再看浏览器的代理设置是否指向了127.0.0.1:8888。值得一提的是出于安全考虑某些浏览器在启动时如果检测到系统代理被修改会给出提示并自动恢复原始代理配置。此时不要硬来要么手动在浏览器设置里指定代理服务器为127.0.0.1:8888要么使用Fiddler的脚本扩展去适配。如果你同时使用了多种网络代理类软件更要留意冲突。这个问题没有一次性的完美解药经验就是“开这个闭那个保证同一时间只有一个程序在控制系统代理”。能守住这个原则抓包成功率能有九成以上。7. 日常使用中的几个习惯建议我对Fiddler的使用习惯是从“出了问题才打开”变成了“日常调试默认开着但只在需要时开启捕获”。这两个状态差别很大。后者的核心是用过滤器保持会话列表干净需要抓谁的时候再打开捕获一两轮抓到后立刻关闭。这样既不会漏掉关键请求也不会被无关流量淹没。另外一个建议是把Fiddler和接口文档的流程联动起来。联调一个模块前先把接口文档里的预期请求体和响应体看一眼然后用Fiddler抓到的实际报文跟文档比对一边过一边标出差异。很多联调返工都是因为实际报文和文档不一致。这个习惯坚持下来联调效率能提升明显。最后如果你手头有多个项目在跑给每个项目单独保存一份Filters配置和AutoResponder规则。切换项目时直接加载对应的配置不用每次重新输入域名和规则节省的零碎时间累计起来也很可观。Fiddler的这些配置都支持导入导出存放在本地换电脑时迁移也很方便。工具说到底是为解决问题服务的。从安装、配置、抓到第一條HTTPS流量到现在能熟练修改响应、构造请求、分析性能你只要把上面这些操作各跑通一两遍就能培养出对HTTP流量的敏感度。以后不管是接口对接、线上排查、性能优化都会比从前快上很多。