在本地覆盖网页内容和 HTTP 响应标头

借助本地覆盖（Local overrides），你可以通过原型开发和测试变更与修复，让工作继续推进，而不必等待后端、第三方或 API 提供支持。

即使无法访问远程资源，也可以用本地覆盖模拟它们。可以模拟请求响应和各种文件，例如 HTTP 响应标头、网页内容，包括 XHR 与 fetch 请求。

例如，本地覆盖适用于以下场景：

• 在 API 修复真正上线前，模拟 API 并测试修复。
• 如果已经知道后端将使用的数据结构，就可以制作新的 UI 设计原型。
• 测试性能修复，例如消除 CLS，提前确认修复是否显著有效。

原页的演示视频介绍了更多用途。本地覆盖也能在重新加载页面后保留你在 DevTools 中做出的修改。

工作原理

• 在 DevTools 中修改文件时，DevTools 会将修改后文件的副本保存到你指定的文件夹。
• 重新加载页面时，DevTools 提供本地修改后的文件，而不是网络上的资源。

本地覆盖会自动禁用缓存。

也可以直接将修改保存到源文件，参见使用 Workspaces 编辑和保存文件。

限制

本地覆盖适用于网络响应标头以及大多数文件类型，包括 XHR 与 fetch 请求，但有以下例外：

• 启用本地覆盖时，缓存会被禁用。
• DevTools 不会保存 Elements 面板 DOM 树中的修改。
• 如果在 Styles 窗格编辑 CSS，而该 CSS 的来源是 HTML 文件，DevTools 不会保存这次修改。

对于最后一种情况，可以改为在 Sources 面板编辑 HTML 文件。

设置本地覆盖

可以直接在 Network 面板覆盖网页内容或响应标头：

1. 打开 DevTools，进入 Network 面板。右键点击要覆盖的请求，在菜单中选择 Override headers 或 Override content。

2. 如果尚未设置本地覆盖，DevTools 会在顶部操作栏提示：先选择存放覆盖文件的文件夹，再点击 Allow，授权 DevTools 访问它。

3. 如果已经设置过本地覆盖但处于禁用状态，DevTools 会自动启用它。
4. 设置并启用后，DevTools 根据覆盖的对象，将你带到对应位置：
   • 修改网页内容时，进入 Sources 面板。
   • 修改响应标头时，进入 Network > Headers > Response Headers 编辑器。

要暂时禁用本地覆盖，或删除所有覆盖文件，进入 Sources > Overrides，分别取消选中 Enable Local Overrides 或点击 Clear。

要删除一个覆盖文件或文件夹中的所有覆盖文件，右键点击对应文件或文件夹，选择 Delete，再在对话框中点击 OK。这个操作无法撤销，被删除的覆盖内容需要手动重新创建。

要快速查看全部覆盖内容，可以在 Network 面板右键点击一个请求，再选择 Show all overrides。DevTools 会进入 Sources > Overrides。

覆盖网页内容

覆盖网页内容的方法：

1. 设置本地覆盖。
2. 在 DevTools 中修改文件并保存。

无法覆盖带有源映射（source map）的文件。在 Network 面板右键点击请求并选择 Override content 时，DevTools 会显示一个对话框，将你带到原始源文件。

例如，可以在 Sources 中编辑文件，或者在 Elements > Styles 中编辑 CSS，但 CSS 位于 HTML 文件中的情况除外。

DevTools 会保存修改后的文件，将它们列在 Sources > Overrides 中，并在相关面板和窗格中被覆盖的文件旁显示“已保存”图标，包括 Elements > Styles、Network 和 Sources > Overrides。

另外，Network 面板会在被覆盖网页内容的请求的 Response 标签旁显示紫色圆点图标，悬停时有提示文字。

覆盖 XHR 或 fetch 请求，模拟远程资源

使用本地覆盖，无须访问后端，也无须等待后端支持修改，可以随时进行模拟和实验：

1. 设置本地覆盖。
2. 在 Network 中筛选 XHR/fetch 请求，找到目标请求，右键点击并选择 Override content。
3. 修改获取的数据，并保存文件。
4. 刷新页面，观察修改后的效果。

原页在本节提供了工作流演示视频。

跟踪本地修改

可以在一个位置跟踪对网页内容的全部修改：Changes 抽屉标签页。

此外，在 Sources > Overrides 中，可以右键点击保存的文件，在菜单中选择 Open in containing folder。系统会打开设置覆盖时选择的文件夹；随后可以用自己喜欢的代码编辑器修改其中的文件。

覆盖 HTTP 响应标头

通过 Network 面板，无须访问 Web 服务器，就能覆盖 HTTP 响应标头。

响应标头覆盖可以用于在本地制作各种标头修复的原型，包括但不限于：

• 跨源资源共享（CORS）标头
• Permissions-Policy 标头
• 跨源隔离标头

覆盖响应标头：

1. 设置本地覆盖，并打开要调试的页面。
2. 进入 Network，找到一个请求，右键点击并选择 Override headers。DevTools 会进入 Headers > Response Headers 编辑器。
3. 将鼠标悬停在响应标头值上，并将光标放在其中。

也可以将鼠标悬停在响应标头值上，点击 Edit，启用 Response Headers 编辑器。

4. 修改已有标头，或添加新标头。

原文示例添加 Access-Control-Allow-Origin: * 来消除 CORS 错误。

• 点击标头值即可编辑。
• 点击 Add header 添加新标头。
• 点击标头旁的删除按钮移除覆盖。这会移除你新增的标头，或者把修改过的值恢复成原值。

Network 面板会用绿色突出显示修改后的标头；被移除的覆盖则显示为红色并带有删除线。此外，Headers 标签会显示紫色圆点，提示存在标头覆盖。

5. 刷新页面，让修改生效。

编辑全部响应标头覆盖

要在一个位置编辑全部标头覆盖：

1. 点击 Response Headers 区域旁带有“已保存”图标的 .headers。

DevTools 会进入 Sources > Overrides 中相应的 .headers 文件。

2. 编辑 .headers 文件。

• 点击 Add override rule 添加新覆盖规则。每条规则由一组标头及对应值，以及适用的一个或多个请求组成。
• 可以使用通配符指定多个请求：* 表示多个字符，? 表示单个字符。
• 要向规则添加标头／值对，将鼠标悬停在另一对标头和值上，再点击添加按钮。
• 要恢复某个标头值，可以移除新增标头或规则，方法是将鼠标悬停在其上并点击删除按钮。

3. 使用 Command / Control + S 保存 .headers 文件。
4. 刷新页面，让修改生效。

原文：Override web content and HTTP response headers locally。作者：Sofia Emelianova，原页最后更新于2024年5月14日。本文为中文翻译，界面名称保留英文；截图按原页保留。除另有说明外，正文采用 CC BY 4.0，代码示例采用 Apache 2.0。详见 Google Developers 网站政策。Java 是 Oracle 和／或其关联公司的注册商标。 图片、视频及品牌标识的权利归各自权利人；这里保留官方原图和原始视频链接。