网络请求阻止工具

使用网络请求阻止工具检查当某些资源(如图像文件、JavaScript 文件、字体或 CSS 样式表)不可用时网页的外观和行为。 使用此工具测试对指定 URL 模式的阻止网络请求,并查看网页的行为方式。

当网页依赖于托管在 HTML 网页以外的其他服务器上的 外部资源 时,有时这些服务器可能对某些用户无响应或不可用。 发生这种情况时,Web 浏览器可能无法检索网页所依赖的某些资源。 请务必检查当外部资源无法加载时网页的行为方式。 测试网页是正常处理缺少的资源,还是向用户显示损坏。

创建阻止的网络请求并测试网页后,可以编辑或删除阻止的网络请求。

阻止网络请求

阻止网络请求:

  1. 转到要阻止其网络请求的网页。 例如,在新选项卡或窗口中打开 辅助功能测试演示页 。 此网页包含将使用 网络请求阻止工具阻止 的图像。

  2. 若要打开 DevTools,请右键单击网页,然后选择“ 检查”。 或者,按 Ctrl+Shift+I (Windows、Linux) 或 Command+Option+I (macOS) 。

  3. 在 DevTools 的 “活动栏”上,单击“ 网络请求阻止 ”选项卡。如果该选项卡不可见,请单击“ 更多工具 (更多工具”图标) 按钮。

  4. 单击 “添加模式 ” (“添加模式”图标) 按钮。 将自动选中 “启用网络请求阻止 ”复选框。

  5. “阻止匹配请求的文本模式 ”文本框中,键入 *.jpg。 这会阻止对 JPEG 图像的所有请求。

    可以执行以下任一操作:

    • 键入完整的 URL。
    • 仅键入域名,以阻止来自此域的所有请求。
    • 将 URL 的一部分替换为 *,以便进行通配符模式匹配。

    例如, contoso.com 匹配以下 URL:

    • https://contoso.com
    • https://subdomain.contoso.com
    • https://subdomain.contoso.com/path/to/resource

    匹配 *.jpg 以下 URL:

    • https://www.contoso.com/resource.jpg
    • http://third-party.com/6469272/163348534-b90ea1a3-c33cbeb1aed8.jpg
  6. 单击“ 添加 ”按钮:

    网络请求阻止工具,显示新的*.jpg 阻止模式

  7. 刷新页面。 所有 JPEG 图像都被阻止,因此在呈现的网页中,每个图像都由“损坏的图像”图标指示为缺失。 网络请求阻止工具中指示阻止 的网络请求 数:

    网络请求阻止工具,阻止所有 JPEG 映像

删除阻止的网络请求

删除特定的网络阻止请求模式:

  • “网络请求阻止 ”表中,将鼠标悬停在网络阻止请求模式上,然后单击“ 删除 (删除阻止的请求”图标) 按钮:

    删除阻止的请求

若要同时删除所有网络阻止请求,请执行以下操作:

  • 在工具栏中,单击“ 删除所有模式 (删除所有阻止的请求”图标) 按钮。

修改阻止的网络请求

若要更改现有的受阻止网络请求,请执行:

  • “网络请求阻止 ”表中,将鼠标悬停在阻止的网络请求上,然后单击“ 编辑 (编辑阻止的请求图标)

    编辑阻止的请求

切换网络请求阻止

切换网络请求阻止而无需删除并重新创建所有受阻止的网络请求:

  • 在工具栏中,选中或清除 “启用网络请求阻止 ”复选框:

    切换网络请求阻止

使用网络工具阻止网络请求

可以使用网络请求阻止工具或使用网络工具阻止网页发出的网络请求

若要使用网络工具阻止 网络 请求,请执行以下操作:

  1. 转到要阻止其网络请求的网页。 例如,在新选项卡或窗口中打开 辅助功能测试演示页

  2. 若要打开 DevTools,请右键单击网页,然后选择“ 检查”。 或者,按 Ctrl+Shift+I (Windows、Linux) 或 Command+Option+I (macOS) 。 DevTools 随即打开。

  3. 在 DevTools 的 “活动栏”上,单击“ 网络 ”选项卡。如果该选项卡不可见,请单击“ 更多工具 (更多工具”图标) 按钮。

  4. 在底部窗格的网络请求表中,找到要阻止的网络请求。

  5. 右键单击网络请求,然后单击“ 阻止请求 URL ”以阻止此特定资源,或单击“ 阻止请求域 ”以阻止来自同一域的所有资源:

    阻止网络工具