由于梯子的存在, 搬运过来方便访问

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

借助本地替换，您可以通过原型设计和测试更改和修复来恢复工作流程，而无需等待后端、第三方或 API 为其提供支持。即使您无法访问远程资源，也可以使用本地替换项来模拟远程资源。您可以模拟对请求和各种文件（例如 HTTP 响应标头和网页内容）的响应，包括 XHR 和提取请求。

例如，本地替换功能在以下用例中会有所帮助：

在实际发布之前模拟 API 并测试 API 修复。
如果您已经了解后端将要使用的数据结构，请对新的界面设计进行原型设计。
测试性能修复（例如消除 CLS），以便提前确保这些修复很重要。注意：可观看上面的视频，详细了解各种使用场景。

通过本地替换，您还可以在页面加载时保留您在开发者工具中所做的更改。

运作方式

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

注意：本地替换会自动停用缓存。

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

限制

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

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

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

设置本地替换项

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

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

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

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

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

替换 Web 内容

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

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

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

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

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

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

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

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

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

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

跟踪您的本地更改

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

此外，您可以在来源 > 替换中右键点击保存的文件，然后从上下文菜单中选择在包含文件夹中打开。此操作会打开您在overrides setup时选择的文件夹。在这里，您可以使用自己喜欢的代码编辑器修改文件。

替换 HTTP 响应标头

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

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

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

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

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

修改或添加新标题。

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

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

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

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

修改所有响应标头替换值

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

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

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

2. 修改 .headers 文件：

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

注意：您可以使用通配符一次性指定多个请求。请使用 * 指定多个字符，使用 ? 指定单个字符。
如需向规则添加“标头-值”对，请将鼠标悬停在另一键值对上，然后点击 add。
要还原标头值，请移除已添加的标题或规则，将鼠标悬停在其上，然后点击 delete。

使用 Command / Control + S 保存 .headers 文件。
refresh请刷新页面，以应用所做的更改。

developer.chrome.com/docs/devtoo…

chrome devtool 使用文档: 真香! 在本地替换 HTTP 请求结果和 HTTP 响应标头