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

Sofia Emelianova

借助本地替换功能，您可以对更改和修复进行原型设计和测试，而无需等待后端、第三方或 API 为其提供支持，从而解锁工作流。

使用本地替换项模拟远程资源，即使您无权访问这些资源也是如此。您可以模拟对请求和各种文件（例如 HTTP 响应标头和网页内容，包括 XHR 和提取请求）的响应。

例如，在以下用例中，本地替换项会很有用：

• 在 API 实际投入生产环境之前，模拟 API 并测试 API 修复程序。
• 如果您已经知道后端将要使用的数据结构，请对新界面设计进行原型设计。
• 测试性能修复情况（例如消除 CLS），以确保提前确认其具有显著的统计意义。

注意： 请观看上面的视频，详细了解各种用例。

借助本地替换功能，您还可以在页面加载期间保留您在开发者工具中所做的更改。

工作原理

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

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

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

限制

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

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

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

设置本地替换项

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

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

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

   • 来源面板：可让您更改网络内容。
   • Network > Headers > Response Headers 中的编辑器，用于更改响应标头。

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

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

若要快速查看所有替换值，请在网络面板中右键点击相应请求，然后选择显示所有替换值。开发者工具会将您转到 Sources >覆盖。

替换 Web 内容

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

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

注意：您无法替换源映射文件。如果您在 Network 面板中右键点击某个请求，然后选择 Override content，开发者工具会改为显示一个对话框，将您转到原始源文件。

例如，您可以编辑 Sources 中的文件或 Elements 中的 CSS >样式，除非 CSS 位于 HTML 文件中。

DevTools 会保存修改后的文件，并将其列出在 Sources 中 >替换项，在相关面板和窗格中被替换的文件旁边显示 图标：元素 >样式、网络和来源 >替换值。

此外，对于包含已替换 Web 内容的请求，Network 面板会在 Response 标签页旁边显示一个紫点图标和提示。

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

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

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

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

跟踪本地更改

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

此外，在 Sources > Overrides 中，您可以右键点击已保存的文件，然后从上下文菜单中选择 Open in containing folder。此操作会打开您在覆盖设置过程中选择的文件夹。您可以在其中使用自己喜爱的代码编辑器修改文件。

替换 HTTP 响应标头

在网络面板中，您可以替换 HTTP 响应标头，而无需访问网络服务器。

借助响应标头替换项，您可以在本地对各种标头（包括但不限于）进行修复原型设计：

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

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

1. 设置本地替换，例如此演示页面。
2. 转到网络，找到相应请求，右键点击该请求，然后选择替换标头。此时，DevTools 会打开 Headers（标头）> Response Headers（响应标头）编辑器。

3. 将光标悬停在响应标头值上，并将光标放在该值上。

   

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

4. 修改或添加新标题。

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

   

   • 如需修改标题值，请点击相应标题。
   • 如需添加新标题，请点击 Add header（添加标题）。
   • 要移除某个标头替换值，请点击它旁边的 。这会移除您添加的标头或将修改后的值还原为原始值。

   Network 面板以绿色突出显示修改后的标头，以红色且带有删除线的已移除覆盖项突出显示。此外，Headers 标签页会显示一个紫点图标和提示，告知您标头已被替换。

5. 请刷新页面以应用更改。

修改所有响应标头替换项

要在一个位置修改所有标头替换项，请执行以下操作：

1. 点击响应标头部分旁边的 .headers。

   

   开发者工具会将您转到 Sources 中的相应 .headers 文件 >替换值。

2. 修改 .headers 文件：

   

   • 要添加新的覆盖规则，请点击添加覆盖规则。这里的规则是指一组标头和值，以及要将其应用到的单个或多个请求。

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

   • 要将标头-值对添加到规则中，请将鼠标悬停在另一对标头上，然后点击 。

   • 如需还原标头值，请移除添加的标头或规则，将鼠标悬停在相应标头或规则上，然后点击 。

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

4. 刷新页面以应用更改。