Chrome DevTools 如何只保留某类网络请求

调接口、排查前端报错或核对页面请求时，Network 面板往往同时出现文档、脚本、图片、字体和接口数据。想只看某一类请求，最稳的做法是先选 Fetch/XHR，再在过滤框组合关键词、属性或正则，而不是反复滚动列表。

官方地址：https://developer.chrome.com/docs/devtools/network/

结论很简单：打开 DevTools 的 Network，清空旧记录后重新触发目标操作，先点 Fetch/XHR，再用 domain:、状态码、字符串、正则和负向条件缩小范围。最后必须点开请求核对 Headers、Payload 和 Response，过滤结果才算可信。

先把 Network 记录范围收干净

在 Chrome 中按 Command + Option + J（macOS）或 Control + Shift + J（Windows、Linux）打开开发者工具，点击 Network。如果列表里已经有很多内容，先点工具栏的 Clear，然后刷新页面，或者重新点击一次会发起接口的按钮。

如果打开面板后列表为空，不代表页面没有请求，通常只是请求发生在 DevTools 打开之前。重新加载后，底部计数和请求表才具有本次排查的参考价值。需要跨刷新保留记录时，再勾选 Preserve log，但普通定位建议先从干净列表开始。

用 Fetch/XHR 先筛掉静态资源

确认列表已经重新记录后，点击过滤栏中的 Fetch/XHR。这一步会把关注点集中到脚本发起的接口请求，图片、CSS、字体等资源不再占据主要位置。若看不到类型按钮，点击 Filter 展开 Filters 工具栏；要同时观察脚本请求，可以按住 Command 或 Control 再点 JS。

类型筛选不是“只显示返回 JSON 的请求”的同义词，它依据资源类型归类。某些由脚本触发但返回文档或下载内容的请求，仍需要结合 Name、Type 和响应内容判断。

用 Filter 组合出目标请求

在 Filter 输入框里输入普通字符串，例如 api/user，DevTools 会保留 URL 或请求名称中能匹配到的行。需要按域名收窄时使用 domain:api.example.test；按响应状态筛选可以使用 status-code:404。这些条件适合定位某个服务、某次失败或某个接口前缀。

排除条件写在关键词前加减号，例如 -analytics 可以隐藏名称中包含 analytics 的行。多个条件可以连续输入；需要匹配多种路径时，可使用正则表达式，例如 /api\/(user|order)/。正则要用斜杠包住，且应先用短字符串确认方向，再升级到复杂表达式。

打开请求详情确认过滤没有误导

过滤后的列表只是视图，不会阻止请求，也不会改变请求参数。点击一行目标请求，在详情面板分别查看 Headers 的 URL、方法和状态码，查看 Payload 的提交内容，再用 Response 确认返回体。需要知道是哪段脚本触发时，查看 Initiator。

确认目标无误后，可以右键请求，在 Copy 菜单中选择 Copy all listed as cURL、Copy all listed as fetch 或 Copy all listed as HAR (sanitized)。带敏感数据的 HAR 可能包含 Cookie、Authorization 等信息，分享给同事前应优先使用 sanitized 版本。

常见问题

为什么点了 Fetch/XHR 后仍然有少量非接口请求？

资源类型是分类线索，不是业务语义保证。继续看 Name、Type 和 Response；如果目标是某个服务，叠加 domain: 会更准确。

过滤框输入普通文字和正则有什么区别？

普通文字适合快速包含匹配；正则适合同时表达多条路径或后缀，但写错表达式可能让列表为空，建议先清空并用短词复核。

为什么刷新后之前的请求不见了？

没有勾选 Preserve log 时，页面重新加载会重置记录。若只是排查一次操作，清空后重新触发更容易判断；若要比较多次跳转，再开启 Preserve log。

实际使用时，可以把流程固定成“Clear—重新触发—Fetch/XHR—Filter—点开详情—再导出”。这样既能快速只保留某类网络请求，也不会把一个看似匹配的列表行误当成已经验证过的接口。