5、Chrome之Network面板_block request domain-优快云博客

本文详细介绍了一个网络调试工具的主要功能，包括界面操作指南、过滤条件设置、waterfall视图解析及网络限制配置等内容，帮助读者掌握高效排查网络问题的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、界面

：recording network log，红色表示开启，灰色表示关闭，开启后，会捕获页面资源，关闭后则不会捕获

：clear，清除捕获的network log

：filter，过滤资源，可以手工输入条件对资源名称进行过滤，也可以根据给定的类型进行过滤，如下图

除此之外还有给定的过滤方式，多属性间通过空格实现 AND 操作。如下图

domain:仅显示来自指定域的资源。您可以使用通配符字符（*）纳入多个域
has-response-header：显示包含指定HTTP响应标头的资源
is：使用 is:running 可以查找 WebSocket 资源，is:from-cache 可查找缓存读出的资源
Larget-than：显示大于指定大小的资源（以字节为单位）。将值设为1000等同于设置为1k
method：显示通过指定 HTTP 方法类型检索的资源
mime-type：显示指定 MIME 类型的资源
mixed-content：显示所有混合内容资源（mixed-content:all）,或者仅显示当前显示的资源（mixed-content:displayed）
scheme：显示通过未保护HTTP（scheme:http）或受保护 HTTPS（scheme:https）检索的资源。
set-cookie-domain：显示具有 Set-Cookie 标头并且 Domain 属性与指定值匹配的资源。
set-cookie-name：显示具有 Set-Cookie 标头并且名称与指定值匹配的资源。
set-cookie-value：显示具有 Set-Cookie 标头并且值与指定值匹配的资源。
status-code：仅显示 HTTP 状态代码与指定代码匹配的资源。

Blocked Requests：过滤阻断请求

：search，查询资源，不但可以查询资源文件名，也可以查询资源下的内容，比如js中的语句。如下图

Use large request rows ：最大化展示资源

Show overview：展示预览，预览中展示的是waterfall，即瀑布图，可以通过Header Options中的waterfall定义排序的时间依据。

group by frame：根据frame分组资源

capture screenshots：捕获截图

二、功能菜单介绍

Open in Source panel：在source面板中打开

Clear browser cache：清除浏览器缓存

Clear browser cookies：清除浏览器缓存

Block request URL：阻断该URL请求

Block request domain：阻断该域名下的请求

当阻断一个域名时，可以通过点击弹出的窗口中的+，添加特定的路径进行阻断

Sort by：排序

Header Options：可以自定义资源展示的字段，添加哪个字段，资源上便展示哪儿些。

Copy：

Copy as Node.js fetch：复制请求，可以直接在控制台中执行，也可以在控制台中直接修改请求参数，执行后，会在network面板产生请求记录，如下图

Copy all as Node.js fetch：复制所有请求，也同样可以在控制台中执行

其他不做赘述，平常使用较少。

三、waterfall介绍

Queuing ：队列，可能由于该请求被渲染引擎认为是优先级比较低的资源（图片）、服务器不可用、超过浏览器的并发请求的最大连接数（Chrome的最大并发连接数为6）.

Stalled ：从HTTP连接建立到请求能够被发出送出去(真正传输数据)之间的时间。包含用于处理代理的时间，如果有已经建立好的连接，这个时间还包括等待已建立连接被复用的时间

DNS Lookup ：执行DNS查询的时间。网页上每一个新的域名都要经过一个DNS查询。第二次访问浏览器有缓存的话，则这个时间为0。

Initial Connection / Connecting ：建立连接的时间花费，包含了TCP握手及重试时间。

SSL ：完成SSL握手的时间花费。

Request sent ：发起请求的时间。

Waiting (Time to first byte(TTFB)) ：是最初的网络请求被发起到从服务器接收到第一个字节这段时间，它包含了TCP连接时间，发送HTTP请求时间和获得响应消息第一个字节的时间。TTFB这个部分的时间花费如果超过200ms，则应该考虑对网络进行性能优化了。

Content Download： 获取Response响应数据的时间花费。

四：throttling

1、可以通过network面板online中添加