限制单个网络请求

Ewa Gasperowicz
Philip Pfaffe

您可以使用“请求条件”标签页来屏蔽特定网址或将自定义网络节流配置文件应用于各个资源。

概览

以前,Chrome DevTools 允许您为整个会话全局限制网络条件(影响所有请求),或完全屏蔽特定请求。不过,在不减慢整个网页速度的情况下,很难测试应用如何处理特定的慢速资源,例如延迟过高的第三方 API 或在慢速连接上加载的大型主打图片。

从 Chrome 144 开始,开发者工具现在支持单独请求节流。除了能够屏蔽个别网络请求之外,您还可以选择个别网络请求来应用特定的网络条件。此功能将以前位于“网络请求屏蔽”抽屉中的功能移至新的、更全面的请求条件抽屉中。此功能可仅减慢所请求资源的速度,而不会减慢整个网站的速度,因此更加精准,并可更快地进行调试。

限制或屏蔽请求

如需屏蔽或限制特定资源,请在网络面板中右键点击任意请求,然后选择屏蔽请求限制请求,以屏蔽或限制确切网址或整个网域。此操作会自动打开请求条件抽屉式菜单,为相应条目创建新规则,并立即应用所选的网络限制。

“请求条件”抽屉

在新的请求条件抽屉式菜单中,您可以控制哪些请求会受到影响以及减速的程度。

开发者工具中的“请求条件”抽屉。

您可以通过选择标准预设(例如“慢速 3G”)或您自己的自定义配置文件来自定义节流设置,并使用通配符 (*) 编辑网址模式,以将这些条件应用于特定的动态资源或请求组。

如果请求与多个模式匹配,开发者工具会应用找到的第一条规则。您可以使用抽屉中的箭头按钮将高优先级规则移至列表顶部,从而控制此优先级。

了解哪些请求会被限制或阻止

务必要区分自然缓慢的请求和被开发者工具人为限制的请求。当您重新加载页面时,系统会应用新的节流规则。您可以在“网络”面板中轻松找到受影响的请求:

  • 被屏蔽的请求以红色显示,并且“状态”列中的状态为 (blocked:devtools)
  • 受到限制的请求会以黄色或金色显示,并且“时间”列中会显示时钟图标。您可以将鼠标悬停在该图标上,查看具体应用了哪种网络状况。此信息也会显示在“时间”子面板中。

开发者工具中的“网络”面板,显示了被屏蔽和受到限制的请求指示器。

限制请求可能会影响网页的性能。在记录性能配置文件时,您可以将鼠标悬停在“网络”轨道中的请求上,以查看详细说明所应用的网络条件的提示。

开发者工具中的“性能”面板,其中显示了受限请求指示器。