做前端或接口调试的时候，最头疼的莫过于打开浏览器的 Network 面板。结果发现请求列表铺天盖地，想找的那个关键接口淹没在 css、图片、字体文件里。说实话，这活干多了就会明白，单纯的勾选“XHR”或者“Fetch”往往不够用，还需要一套组合拳式的过滤技巧。

那么，怎么才能在火狐的 Network 面板里，像老手一样快速锁定目标？这里有一套从粗筛到精排的五个实用步骤。

一、按请求类型与协议精准筛选

这是最基础但也最实用的一步。当页面同时加载 API、图片、字体和 CSS 文件时，手动滚动查找效率太低。直接利用面板内置的类型过滤，能瞬间裁掉大量干扰项。

操作很简单：打开开发者工具的 Network 标签页，在顶部的过滤栏右侧，找到那个向下的箭头，点一下，展开类型过滤菜单。

重点来了：比如你只关心前端和后端数据交换的接口，那就 只勾选 XHR 和 fetch，把图片、CSS、JS、字体文件这些干扰项全去掉。

如果想再精确一点，比如只想看走 HTTPS 协议的请求，直接在过滤栏输入 scheme:https，列表里就只剩下符合这个协议规则的条目了。排查安全或跨域问题的时候，这一招非常管用。

二、使用关键词组合过滤器匹配 URL 与参数

很多项目接口的 URL 都带着版本号、环境标识或者动态 ID，比如 /api/v2/usersrole=admin。手动在请求列表里找这种带参数的路径，确实有点瞎眼睛的意思。这时候，火狐内置的搜索语法就能派上用场了。

直接在过滤栏里输入完整的路径或关键词，比如 /api/v2/usersrole=admin，工具会自动高亮所有匹配的请求。

更进一阶的玩法是 组合查询：

• 筛选某个域名下、POST 请求中、返回 500 错误的问题接口，可以一口气输入 domain:api.example.com method:POST status:500，三个条件同时命中，结果一步到位。
• 处理结构相似的路径（比如订单取消接口 /order/*/cancel），用通配符 * 或者 path:/order/*/cancel 就能一把全抓住。
• 想验证某个接口是否返回了 JSON 格式，使用 response-header:content-type=application/json 即可。

三、基于响应内容与大小范围动态过滤

经常遇到一种情况：某个接口返回了意料之外的错误，或者一个图片文件大得离谱，拖慢了整个页面。你没法一个个点开去看响应体，那样太慢了。直接用过滤能力来扫描，快很多。

比如怀疑某个大文件没压缩，输入 size:>500kb，所有超过 500KB 的请求就会被拎出来。

想看响应体里有没有“error”字眼？输入 response-body:"error" 就能高亮那些包含 error 的请求。

如果服务端返回的是 JSON 结构，且里面有个 code 字段，你想快速找到所有 5xx 错误，可以直接上正则：response-body:/^{.*"code":5.*/。这个思路对于抓接口报错尤其省事。

四、自定义请求标记与颜色标注辅助追踪

有时候我们要跨多个页面刷新来跟踪同一个接口的行为，比如登录态的刷新、轮询的心跳、第三方 SDK 的上报。这类接口在每次页面重载后，位置都会变，肉眼很难追踪。这时候手动标记一下，就很省事了。

右键点击目标请求行，选择“标记此请求”，它旁边会出现一个默认的蓝色圆点。再右键一下，可以在菜单里换成 红、绿、黄 几种颜色，方便你做不同类别的区分。

更妙的是，你可以在过滤栏直接输入 marked:red，只显示那些被打上红色标记的请求。就算页面刷新了几次，这些标记还在，不会被清掉。

想清除某个标记，右键选择“清除标记”就行，或者在过滤栏加个负号 -marked，临时排除所有标记项。

五、启用请求拦截并设置断点式过滤

这是比较进阶的用法，主要用在模拟异常场景。比如你想看看某个接口超时了会怎么处理，或者把请求里的参数篡改一下再发出去，靠普通的请求记录是不够的，得用拦截机制。

在 Network 面板右上角找到“阻止”图标（一个方块带斜杠），点开它，会弹出一个拦截规则面板。点击“添加阻止规则”，输入你想拦截的匹配模式。

比如输入 /api/v3/payment*，所有匹配这个路径的请求都会被立即拦截并暂停。这时候请求行会显示 blocked 状态，旁边会出现一个“编辑并继续”按钮——你可以在这个节骨眼上修改请求头、请求体甚至 URL，再发送出去。

如果玩得更深一点，还能用正则表达式。比如想拦截所有发往 Google API 并且携带了密钥的请求，可以写 ^https://.*.googleapis.com/.*key=.*，用来防止密钥泄露或在测试环境中模拟外部服务不可用。不过要小心，别拦截了不该拦的核心请求，导致页面功能区瘫了。

这五步操作，从简单的勾选过滤，到精准的关键词组合，再到正则扫描和断点拦截，基本覆盖了日常开发调试中遇到的绝大多数场景。用得熟了，在火狐的 Network 面板里找东西，真的可以快人一步。

《夸克》非常好用的免费AI浏览器

下载APP查看