Output Console / Network——全新的域名过滤器和指数型滑块
2026 年 5 月,Output Console 中的 Network 标签页迎来了自上线以来最大的一次重做。新的域名过滤字段,可以一次接收多个条目;Alt+点击即可瞬间添加一项;大小和时间滑块终于在低端有了精细的颗粒度;DataLayer 的列宽可调;长 URL 也更加易读。下面就是 v2.13.193–v2.13.205 这一连串改动的完整巡礼。
「域名+」和「域名-」——一次输入多个域名(v2.13.199)
旧版的域名过滤器只接受一个值。但实际工作中,你常常要同时盯着好几个服务——统计 + 图片 + 一个 API。现在,状态栏里并排出现了两个字段:
- 「域名+」——你希望看到的域名清单。只要某个条目与其中任何一项匹配,就会通过过滤。
- 「域名-」——你想排除的域名清单。匹配其中任何一项的条目都会消失。
在这两个字段里,你都可以用竖线 | 分隔多个域名,例如 cdn.example.com|api.example.com|images.example.com。过滤是实时生效的,不需要任何提交动作。
Alt+点击——直接从 Network 行添加域名(v2.13.200)
不必手动敲入域名,直接在 Network 的某一行上配合修饰键点击即可:
- Alt+点击——把该条目的域名添加到(或从)「域名+」字段中(再次点击则移除)。
- Alt+Shift+点击——把该域名添加到(或从)「域名-」字段中。
这个快捷键最早(v2.13.199)用的是 Ctrl,但在 macOS 上 Ctrl+点击 会被系统截获并解读为上下文菜单——监听器根本收不到这次点击。Alt+点击 在 Windows、Linux 和 macOS 上行为一致,也不会与任何系统原生快捷键冲突。这个快捷键是一个开关:再次对同一域名 Alt+点击,就把它移除。
大小和时间滑块——指数型刻度 + 输入框(v2.13.198)
旧的滑块是线性的,所以左侧把手每动一步大概是 ~16 kB 或 ~1000 ms——只要稍微把它从零拉开一点,就已经把一半条目过滤掉了。现在你会得到:
- 指数型刻度(一条
^3曲线)——刻度的下半段以非常精细的颗粒度覆盖小数值(每一步只有几 kB / 几 ms),上半段则覆盖很大的范围。你最常关心的部分(小响应、快请求)正好就在指尖底下。 - 更小的把手最小间距——在刻度底部把两个把手靠在一起,得到的是一个极小的范围,而不再是诸如「0–112 kB」这种区间。
- 两个输入框分列在滑轨两侧——可以手动输入最小值和最大值(单位为 kB / ms)。输入框和滑块是同步的:拖动滑块,输入框跟着更新;输入一个数值,滑块就跳过去。
没有大小的条目——一旦动了过滤器就会隐藏(v2.13.197)
有些 Network 响应没有 content-length 头(流式、分块传输)。在以前,这类条目会忽略大小过滤器、永远显示出来,这让人感觉很奇怪——「我明明把它过滤掉了,这一条怎么还赖在这儿」。现在:只要大小滑块被动过,就会一并隐藏掉那些没有声明大小的条目。默认状态(滑块处于完整范围)下的行为保持不变。
长 URL 缩短——只在收起的行里(v2.13.195)
很长的查询字符串过去可能会占满整个 Network 窗口。现在,在收起状态的行里(Network 和 All 标签页),URL 会被缩短到 255 个字符。用箭头(▸/▾)展开,就能看到完整、未截断的 URL——详情始终是完整的。任意位置(长 token、URL)的折行也能阻止内容溢出到窗口边缘之外。
可调整宽度的 DataLayer 列 + 一致的字体(v2.13.194 + v2.13.196)
DataLayer 标签页里有两列:「新的 push」和「window.dataLayer 快照」。它们之间的那条中线现在变成了一个可拖动的分隔条——每个 Output 窗口都会在当前会话中记住自己的比例。当持续地重建页面快照列表时,拖动期间列也不会再脱离原位(重建过程在拖动期间会暂停)。
另一个小修复涉及右侧 DataLayer 面板的字体:window.dataLayer 的树形视图现在能继承 Output Console 面板的字号了(之前有一条 !important 规则挡住了这个变化)。
用例一——只针对关键请求做性能定位
你登入了一个客户的页面,想只看到关键请求——不要追踪像素,不要图片。在「域名-」里填入 google-analytics.com|googletagmanager.com|hotjar.com|facebook.net;把时间滑块下限拉到 500 ms,大小滑块下限拉到 50 kB。剩下的就只有最慢、最重的那些请求——通常,你也就能猜到投诉指向的是哪一个。
用例二——追踪调试,只看你的统计
反过来的场景:你只想看到追踪请求。在「域名+」里填入 google-analytics.com|googletagmanager.com|cloudflareinsights.com。Network 中其他所有内容都从视图里消失,旁边的 dataLayer 面板则显示当前状态。标签页上的计数器仍然显示总共触发了多少次请求,所以你能看到追踪在整体流量中所占的比重。
另请参阅
- Output Console——Network 标签页所在的那个窗口
- JustZix 键盘快捷键——完整速查表——包含 Alt+点击 / Alt+Shift+点击
- 页面内窗口——位于页面之内的开发者窗口
安装 JustZix——让每一个标签页都拥有一个 DevTools 级别的 Network 监视器。
为这篇文章评分
暂无评分 — 成为第一个。