网页检查器参考本地覆盖

目录

• 创建本地覆盖
• 配置本地覆盖
• 导出本地覆盖
• 识别被覆盖的资源

随着网页开发工作流程日益复杂，快速修改资源并上传到服务器进行测试变得越来越困难。

页面内容的一部分可以通过网页检查器进行实时修改，例如 CSS 或任何 JavaScript 值，但这些更改在页面重新加载/导航后不会持久。

然而，通常所需的更改是对已加载脚本的控制流或网络活动中包含的数据进行修改。

在这种情况下，网页检查器处于完美的位置来拦截网络活动，并用本地覆盖替换/阻止它，从而无需修改服务器上的任何内容即可进行快速本地测试。

当网页检查器打开时，被检查页面发出的与本地覆盖的 URL 匹配的网络请求，将转而使用网页检查器中该本地覆盖的数据，而不是来自网络或内存/磁盘缓存的数据。

创建本地覆盖

本地覆盖可以通过以下几种方式创建：

• 在查看从网络加载的资源内容时，点击 [创建本地覆盖] 按钮。

  这将显示一个下拉菜单，包含创建请求本地覆盖、创建响应本地覆盖和阻止请求 URL。

• 右键点击对应于从网络加载的资源的链接或树形项，并选择创建请求本地覆盖、创建响应本地覆盖或阻止请求 URL。
• 将文件拖放到任何非文本的网络加载资源上。这将创建一个响应本地覆盖，其 MIME 类型和内容与拖放的文件相同，但响应状态和响应头与所选资源相同。
• 在创建资源时选择本地覆盖…。这将创建一个“空的”本地覆盖，在使用前需要进行配置才能生效。

当从资源创建本地覆盖时，本地覆盖将根据本地覆盖的类型从资源复制相关数据。对于请求本地覆盖，复制资源的 URL、方法和请求头。对于响应本地覆盖，复制资源的 URL、MIME 类型、状态码、状态文本和响应头。

如果创建本地覆盖的资源是非文本的（例如图片、字体等），点击 [创建本地覆盖] 按钮将显示一个文件选择器，然后将使用所选文件的 MIME 类型和内容创建本地覆盖。此外，对于非文本资源，按住 Shift 键点击 [创建本地覆盖] 按钮将直接按原样复制资源（就像文本资源一样）。

一旦网页检查器中至少有一个本地覆盖，本地覆盖部分将在Sources（源代码）标签页的导航侧边栏中变得可见。所有本地覆盖以及检查器引导脚本都可以在这里找到。

本地覆盖在网页检查器会话之间是持久的，但请记住，除非网页检查器打开，否则本地覆盖不会生效，并且仅在下一次加载与其配置的 URL 匹配的资源时应用。

配置本地覆盖

修改本地覆盖的内容非常简单，只需在导航侧边栏中选择它，并在主内容区域中与控件交互。响应本地覆盖显示网络响应的内容。请求本地覆盖显示请求数据。阻止本地覆盖显示一个下拉菜单，用于选择要阻止匹配网络请求的错误类型。

对于响应本地覆盖，点击 导入按钮将显示一个文件选择器，以使用所选文件的内容和推断的 MIME 类型完全替换内容和 MIME 类型。或者，点击 映射到文件按钮将显示一个文件选择器，以便在拦截到匹配的网络响应时，自动用所选文件的内容替换内容。

对于非文本资源，将文件拖放到内容视图上，将使用拖放文件的内容和推断的 MIME 类型更新响应本地覆盖的内容和 MIME 类型。

但是，如果所需的更改与内容无关，右键点击任何本地覆盖树形项并选择编辑本地覆盖…将显示一个弹出窗口，其中包含用于修改该本地覆盖数据的输入字段。

请求本地覆盖

响应本地覆盖

勾选正则表达式复选框将把 URL 视为正则表达式，允许一个本地覆盖匹配多个资源。这对于匹配带有查询参数的 URL 特别有用。

如果未提供请求头，将使用原始请求头。

带有正则表达式URL的请求本地覆盖可以在重定向URL 中使用捕获组（例如$1）。

响应本地覆盖可以配置为跳过网络，这将导致网页检查器在拦截到匹配的网络请求时立即用该响应本地覆盖的数据进行响应，从而阻止该网络请求实际发送。

导出本地覆盖

导出本地覆盖的内容与其他资源一样，当查看本地覆盖内容时按下⌘ S，或者右键点击任何本地覆盖树形项后选择保存文件，都将显示一个保存文件对话框。

识别被覆盖的资源

每当资源被本地覆盖覆盖时，其图标在整个网页检查器中都会反转。

当查看该资源的内容视图时，顶部会显示一个横幅，带有一个显示对应本地覆盖的按钮。