← 全部文章

前端窗口

一个无需 DevTools 的 network 面板 —— JustZix 的 Network 标签页

16 5月 2026 · 作者 JustZix Team

DevTools 的 Network 面板有一个顽固的缺陷:它只在打开时才记录。刷新一下、忘了先把它打开,你需要的那个请求就没了。JustZix 的 Output Console 有一个Network 标签页,它活在页面内部,通过 chrome.webRequest 捕获流量,并保有一个后台缓冲区 —— 因此它能看到在你打开窗口之前就已发出的请求。下面讲它如何工作以及它适合用在哪里。

捕获是如何工作的:chrome.webRequest

Network 标签页不会在页面代码里去钩 fetch 或 XMLHttpRequest。它使用 chrome.webRequest —— 一个浏览器级别的 API,扩展通过 webRequest 这个 manifest 权限接入它。这意味着它在浏览器层观察请求,和网络栈所在的是同一个地方。

实际后果就是那个头号特性:一个后台缓冲区。扩展为该标签页持续记录请求。当你打开 Output Console 时,Network 标签页里早已填满了你到来之前发生的事情。没有「为了捕获而刷新」的折腾。

打开 Network 标签页

从 JustZix 悬浮按钮菜单打开 Output Console,或用 Ctrl+Alt+K 作为 TEMP 窗口打开,然后切换到 Network 标签页。它的徽标显示实时请求计数。因为有缓冲区,即便是几分钟前加载的页面,列表也不会是空的。

每一列的含义

每个被捕获的请求是一行。各列:

Method、status 和 URL 告诉你发生了什么。Size 和 duration 告诉你它有多昂贵。Remote address 和 Initiator 告诉你它去了哪里、是谁发起的 —— 当你在追查一个不是自己写的请求时,这两列最要紧。

上下文相关的过滤栏 —— 三行

Output Console 的过滤栏是上下文相关的;在 Network 标签页上它展开成三行控件:

1. 资源类型 —— 一行复选框:document、script、stylesheet、image、xhr/fetch、font 等等。把你不关心的类型取消勾选。在调试一个 API?只保留 xhr/fetch,图片和字体的噪音就消失了。
2. HTTP 状态类别 —— 一行按类别的复选框:2xx、3xx、4xx、5xx。取消勾选 2xx 和 3xx 就只看失败的。
3. 大小 + 时长 + 域名 —— 两个范围滑块(0–100000,时长以毫秒计)外加一个域名过滤字段。

这些复选框行带有全选 / 全清快捷操作,所以你可以清空全部再勾上你想要的那一种类型,或者反过来 —— 不必手动点过十个框。

滑块与域名过滤器

范围滑块把模糊的怀疑变成精确的查询:

• 时长滑块 —— 设一个最小值,只有慢请求能留下。把它拖到 2000 毫秒,你就得到一份所有耗时超过两秒的清单。
• 大小滑块 —— 对字节数同理。设一个下限,超大的负载 —— 那张未优化的主视觉图、那个 400 KB 的 JSON 块 —— 就会浮到顶部。
• 域名过滤器 —— 输入一段域名片段,只保留发往该主机的请求。输入 google-analytics 或 doubleclick,你看到的就正好是你想审计的第三方流量。

所有这些都和过滤栏下方那个始终可见的搜索框叠加 —— 一个对各行生效的实时、不区分大小写的子串过滤器。Esc 清空搜索。

用例 1 —— 调试 API 调用

清空资源类型那一行,只勾上 xhr/fetch。现在 Network 标签页就只剩你应用的 API 流量 —— 没有脚本,没有图片。触发你正在调试的动作,看着请求出现:method、URL、status、它耗时多久。如果状态不对,你立刻就知道问题是出在请求上,还是出在处理响应的代码上。

用例 2 —— 找出慢的或过大的请求

把时长滑块拖到某个阈值 —— 比如 1500 毫秒 —— 列表就收缩到你最慢的那些请求。对大小滑块做同样的事以浮现出沉重的负载。两次拖动,你就有了一份性能候选清单:真正值得优化的那些请求,从几十个没问题的请求里被甄别了出来。

用例 3 —— 发现 4xx 和 5xx 失败

这是 Errors 标签页帮不了你的那一件事。一次失败的 fetch 或 XHR 不是一个 JavaScript 异常 —— 它永远到不了 Errors 标签页。要找出出错的请求,来 Network 标签页,在状态那一行把 2xx 和 3xx 取消勾选。剩下的就是每一个 4xx 和 5xx:缺失的端点、鉴权失败、服务器错误。加一个搜索词以锁定某一条路径。

用例 4 —— 审计第三方追踪器与信标

每个站点都会加载一些它未必明说的东西 —— 分析、广告像素、信标。把一个追踪器域名输入域名过滤器,或者盯着 Initiator 列看是哪个脚本发出了哪个信标。结合 Remote address 列,你能精确判断数据去了哪里。这是一次快速、诚实的隐私审计,不需要任何专门工具。

与 DevTools Network 面板的诚实对比

DevTools 的 Network 面板更强大 —— 这个标签页并不假装不是这样。但权衡是真实存在的,而且是双向的:

决定性的局限:chrome.webRequest 给的是请求元数据,而非响应体。如果你需要读取一个请求返回的 JSON,DevTools 仍然是你的工具。如果你需要知道哪些请求发出了、它们是否成功、它们有多慢、它们去了哪里 —— 包括你开始查看之前的请求 —— Network 标签页在标签页内就把这件事做完了,完全不需要 DevTools。

什么时候该用哪一个

• Network 标签页 —— 快速分诊、被锁死的机器、捕获页面加载时发出的请求、审计第三方流量、把一套调试配置作为规则的一部分来分享。
• DevTools Network —— 检视响应体、读取头、时序瀑布图、限速、重放请求。

它们不是对手。Network 标签页处理日常的「这个页面在网络上正在做什么」这个问题;DevTools 处理深度钻研。

另见

• 重建后的 Output Console —— 全部六个标签页详解
• JustZix 示例 —— 即用型 CSS 与 JS 规则

一个能捕获你打开它之前的流量的 network 面板,就在标签页内 —— 无需 F12。下载 JustZix —— 它免费,在 Chrome 100+ 上运行,大约两分钟即可安装完成。