← 全部文章

前端窗口

在 Output Console 中过滤网络流量

Output Console 中的 Network 选项卡会直接在页面上显示该页的网络请求——无需打开 DevTools。当一个页面产生数百个请求时,仅靠一份列表是不够的。最近的版本加入了一整套过滤器:按域名、按大小和按时间。下面介绍如何使用它们。

域名过滤器:“Domains+”和“Domains-”

在各种状态旁边,你会看到两个输入框。“Domains+”只保留来自指定域名的条目;“Domains-”则移除与之匹配的条目。两者都接受用竖线分隔的多个域名,例如 wp.pl|onet.pl——只要条目包含其中任意一个,就算匹配。

点击添加域名

你不必手动重新键入域名。在某一 Network 行上 Alt+click 会把它的域名加入“Domains+”(再次 Alt+click 则移除它)。Alt+Shift+click 对“Domains-”做同样的事。点几下就能把列表收窄到单个服务,或剔除分析统计带来的噪音。

大小和时间滑块

两个双向滑块可以把列表限制到特定大小(kB)和时间(ms)的请求。刻度是指数式的——滑轨下部的粒度更细,因此很容易筛掉小的 ping,而不会一下子丢掉所有内容。滑轨两侧都有输入框,可以手动键入最小 / 最大值;滑块和输入框保持同步。

注意:当你移动大小滑块时,没有报告大小的条目(缺少 content-length 头)也会消失——它们无法与阈值进行比较。

长条目的可读性

折叠行中的长地址会被截断为 255 个字符,这样一个带有臃肿查询字符串的 URL 就不会占满整个窗口。展开该行后你就能看到完整地址。调用时间和大小都用背景色高亮,因此一眼就能注意到。

这一切是为了什么

这些过滤器把“一墙的请求”变成了一件调查工具。想看看某个页面向特定的追踪器发送了什么?把它的域名输入“Domains+”。在追查一个拖慢页面的重型资源?把大小滑块的下限调高。一切都在页面上,在一个你可以始终开在内容旁边的窗口里完成。

安装 JustZix,在每一个页面上随手掌握网络流量的概况。

为这篇文章评分

暂无评分 — 成为第一个。

自己动手试试

安装 JustZix,粘贴本文中的任意代码片段。两分钟,从零到一条在你所有设备上生效的规则。

获取 JustZix

功能 · 工作原理 · 示例 · 应用场景