在本地替换 Web 内容和 HTTP 响应标头

Sofia Emelianova

借助本地替换项，您可以替换 HTTP 响应标头和网页内容（包括 XHR 和提取请求），以模拟远程资源（即使您无法访问相应资源）。这样，您无需等待后端支持更改即可对更改进行原型设计。通过本地替换，您还可以在页面加载时保留您在开发者工具中所做的更改。

运作方式：

• 当您在开发者工具中进行更改时，开发者工具会将修改后的文件的副本保存到您指定的文件夹中。
• 当您重新加载页面时，开发者工具将提供经过修改的本地文件，而非网络资源。

要点：您还可以将更改直接保存到源文件。请参阅使用工作区编辑和保存文件。

限制

本地替换设置适用于网络响应标头和大多数文件类型（包括 XHR 和提取请求），但有以下几种例外情况：

• 启用本地替换后，系统会停用缓存。
• 开发者工具不会保存对 Elements 面板的 DOM 树所做的更改。
• 如果您在 Styles 窗格中修改 CSS，并且该 CSS 的来源是 HTML 文件，则开发者工具不会保存更改。

不过，您可以在来源面板中修改 HTML 文件。

设置本地替换项

您可以立即在网络面板中替换 Web 内容或响应标头：

1. 打开开发者工具，前往网络面板，右键点击要替换的请求，然后从下拉菜单中选择替换标头或替换内容。
2. 如果您尚未设置本地替换，则开发者工具会在顶部的操作栏中提示您执行以下操作：
   1. 选择一个文件夹以存储替换文件。
   2. 点击 Allow（允许）以授予开发者工具访问权限。
3. 如果您已设置本地替换项但已停用，则开发者工具会自动启用它们。

4. 设置并启用本地替换值（具体取决于您要替换的内容）后，开发者工具会引导您执行以下操作：

   • 来源面板可让您更改网页内容。
   • 网络 > 标头 > 响应标头中的编辑器可让您更改响应标头。

如需暂时停用本地替换值或删除所有替换文件，请前往来源 > 替换，然后取消选中 启用本地替换复选框，或点击 清除。

要删除单个替换文件或所有替换项，请右键点击来源 > 替换中的文件或文件夹，选择删除，然后点击对话框中的确定。此操作无法撤消，您必须手动重新创建已删除的覆盖设置。

要快速查看所有替换值，请在广告网络面板中右键点击请求，然后选择显示所有替换值。开发者工具会带您前往来源 > 替换。

替换 Web 内容

如需替换 Web 内容，请执行以下操作：

1. 设置本地替换项。
2. 更改文件并将其保存在开发者工具中。

注意：您无法替换源代码映射文件。如果您右键点击 Network 面板中的请求并选择 Override content，则开发者工具会显示另一个对话框，让您改为访问原始源文件。

例如，您可以修改来源中的文件或依次点击元素 > 样式中的 CSS，除非 CSS 位于 HTML 文件中。

开发者工具会保存修改后的文件，在来源 > 替换中列出它们，并会在相关面板和窗格中被替换的文件旁边显示 图标：元素 > 样式、网络，以及来源 > 替换。

此外，对于包含已覆盖 Web 内容的请求的响应标签页，网络面板上会显示一个紫色圆点图标，并且旁边有一个提示。

替换 XHR 或提取请求以模拟远程资源

使用本地替换项时，您无需访问后端，也不必等待后端支持您的更改。实时模拟和实验：

1. 设置本地替换项。
2. 在广告网络中，过滤出 XHR/提取请求，找到所需内容，右键点击相应内容，然后选择覆盖内容。
3. 更改提取的数据并保存文件。
4. 刷新网页，观察您所做的更改。

如需了解此工作流，请观看以下视频：

跟踪您的本地更改

您可以在一个位置（更改抽屉式导航栏标签页）跟踪对网页内容做出的所有更改。

替换 HTTP 响应标头

在“网络”面板中，您可以在不访问网络服务器的情况下覆盖 HTTP 响应标头。

通过响应标头替换项，您可以在本地对各种标头进行原型修复，包括但不限于：

• 跨域资源共享 (CORS) 标头
• Permissions-Policy 标头
• 跨域隔离标头

如需替换响应标头，请执行以下操作：

1. 设置本地替换项并进行检查，例如此演示页面。
2. 转到网络，找到相应请求，右键点击该请求，然后选择替换标头。开发者工具会带您进入 Headers > Response Headers 编辑器。

3. 将鼠标悬停在响应标头值上，并将光标置于该处。

   

   或者，如需启用 Response Headers 编辑器，请将鼠标悬停在响应标头值上，然后点击 Edit。

4. 修改或添加新标题。

   注意：此示例添加了 Access-Control-Allow-Origin: * 标头以消除 CORS 错误。

   

   • 要修改标头值，请点击该值。
   • 如需添加新标头，请点击 添加标头。
   • 若要移除标头替换项，请点击它旁边的 。此操作会移除您添加的标题，或将修改后的值还原为原始值。

   Network 面板以绿色突出显示修改后的标头，并用红色和划线突出显示已移除的替换项。此外，Headers 标签页还显示了一个紫色圆点图标，并带有提示，告知您标题已被替换。

5. 请刷新页面，以应用所做的更改。

修改所有响应标头替换值

如需在一个位置修改所有标头覆盖设置，请执行以下操作：

1. 点击 Response Headers 部分旁边的 .headers。

   

   开发者工具会将您转到 Sources > Override 中对应的 .headers 文件。

2. 修改 .headers 文件：

   

   • 如需添加新的覆盖规则，请点击添加覆盖规则。这里的规则是一组标头和值以及要应用它们的一个或多个请求。

     注意：您可以使用通配符一次性指定多个请求。请使用 * 指定多个字符，使用 ? 指定单个字符。

   • 如需向规则添加“标头-值”对，请将鼠标悬停在另一键值对上，然后点击 。

   • 要还原标头值，请移除已添加的标题或规则，将鼠标悬停在其上，然后点击 。

3. 使用 Command / Control + S 保存 .headers 文件。

4. 请刷新页面，以应用所做的更改。