网络请求:通过屏蔽或限制网络请求来测试网站

Ewa Gasperowicz

使用请求条件抽屉式窗格,测试在阻止加载某些资源(例如图片或样式表)或资源加载速度较慢的情况下,网页的行为。

概览

借助请求条件抽屉式菜单,您可以同时屏蔽多个资源或“模式”,并从列表中切换它们。您还可以从网络面板中屏蔽网络请求网域或网址,相应格式将显示在请求条件抽屉式菜单中。

借助请求条件抽屉,您可以:

  • 添加或移除模式。
  • 修改图案。
  • 移除所有模式。
  • 启用或停用网络请求屏蔽或限制功能。启用后,您可以针对单个模式切换屏蔽或限制。

关闭开发者工具会停用网络请求屏蔽和节流功能。您必须打开面板并重新启用屏蔽功能。 不过,即使在浏览器关闭后,开发者工具也会保存这些模式。

屏蔽或限制网络请求

您可以在 DevTools 的网络面板中屏蔽网络请求。

  1. 网络面板的名称部分下,右键点击某个请求,然后选择“屏蔽请求”或“限制请求”。图片
  2. 系统会自动打开请求条件抽屉式导航栏,并将相关模式列为已屏蔽或已限制。这也会自动启用“启用屏蔽和限制模式”复选框。

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

如需区分慢速请求和被开发者工具限制的请求,您可以查看“网络”和“性能”面板。

在“网络”面板中:

  • 被屏蔽的请求:查看状态列。被屏蔽的请求会明确显示 (blocked:devtools),并以红色表示。
  • 受限请求:请求网址旁边会显示金色或棕色图标。或者,您也可以查看时间列。该图标将显示在时间旁边。
    • 将鼠标悬停在相应图标上,即可查看具体应用了哪种网络状况。
    • 点击该图标可立即打开请求条件抽屉式导航栏,并突出显示导致节流的规则。

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

在“性能”面板中:您还可以在记录性能分析报告时查找网络状况。为此,请执行以下操作:

  1. 前往性能面板并捕获记录。
  2. 在“网络”轨道中找到相应请求。
  3. 将鼠标悬停在请求上,即可查看详细说明所应用的网络条件的提示。

打开“请求条件”抽屉

如需打开请求条件抽屉,请执行以下操作:

  1. 打开开发者工具
  2. 按以下键打开命令菜单
    • macOS:Command+Shift+P
    • Windows、Linux、ChromeOS:Control+Shift+P 带有
  3. 开始输入 Request conditions,选择 Show Request conditions,然后按 Enter 键。开发者工具会在开发者工具窗口底部显示请求条件抽屉。

或者,在右上角,依次选择 更多工具 > 请求条件

修改节流设置

如需自定义限制设置,请执行以下操作:

  1. 打开请求条件抽屉式导航栏,然后前往特定请求。
  2. 在“节流”列中,从下拉菜单中选择一个预设值(例如“Slow 3G”“Fast 3G”)。您还可以添加自定义网络配置文件。

修改请求模式

如需修改模式,请在请求条件抽屉式菜单中,点击模式旁边的按钮,修改模式,然后点击保存。您还可以点击添加条件按钮来创建新条件。 输入网址格式时,您可以使用通配符 (*) 来匹配网址的动态部分。例如,*://example.com 将匹配向相应网域发出的所有 API 请求。您可以使用通配符通过 网址 模式 API 一次性对多个资源应用条件。

切换网络请求屏蔽功能

借助 启用屏蔽和限制,您可以一次性为所有模式启用和停用网络请求屏蔽功能。

重新排序网址匹配模式

如果请求与多个模式匹配,开发者工具会应用找到的第一条规则。如需控制此优先级,请点击请求条件抽屉中特定规则旁边的箭头按钮,将高优先级规则移至列表顶部。

移除网络请求屏蔽模式

如需从列表中移除特定网络请求屏蔽模式,请执行以下操作:

  • 请求条件面板中,点击 删除按钮。

如需移除所有网络请求屏蔽模式,请在活动栏中点击 移除所有网络屏蔽模式按钮。