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

Sofia Emelianova
Sofia Emelianova
GitHub

借助本地替换，您可以先对更改和修复进行原型设计和测试，而无需等待后端、第三方或 API 提供支持，从而顺利完成工作流程。

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

例如，本地替换可用于以下使用情形：

  • 在模拟 API 和测试 API 实际投入生产之前，先对其进行修复。
  • 如果您已经知道后端将使用的数据结构，可以设计新的界面原型。
  • 测试性能修复，例如消除 CLS，以提前确保它们具有显著效果。

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

运作方式

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

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

限制

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

  • 启用本地替换后，缓存会被停用。
  • DevTools 不会保存在元素面板的 DOM 树中所做的更改。
  • 如果您在 Styles 窗格中修改 CSS，而该 CSS 的来源是 HTML 文件，则 DevTools 不会保存相应更改。

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

设置本地替换项

您可以在网络面板中立即覆盖网页内容或响应标头：

  1. 打开开发者工具，前往 Network 面板，右键点击要替换的请求，然后从下拉菜单中选择 Override headers 或 Override content。 通过右键点击请求来选择替换内容。
  2. 如果您尚未设置本地替换，开发者工具会在顶部操作栏中提示您：
    1. 选择一个文件夹来存储替换文件。 开发者工具会提示您选择一个文件夹。
    2. 点击允许，以向其授予开发者工具访问权限。 开发者工具请求访问权限。
  3. 如果您已设置本地替换，但将其停用，开发者工具会自动启用这些替换。

  4. 设置并启用本地替换后，根据您要替换的内容，DevTools 会将您带到以下位置：

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

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

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

如需快速查看所有替换项，请在网络面板中，右键点击某个请求，然后选择显示所有替换项。开发者工具会将您带到 Sources > Overrides。

替换网页内容

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

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

例如，您可以修改 Sources 中的文件或 Elements > Styles 中的 CSS，除非 CSS 位于 HTML 文件中。

DevTools 会保存修改后的文件，并在来源 > 替换项中列出这些文件，同时在相关面板和窗格（元素 > 样式、网络和来源 > 替换项）中，在被替换的文件旁边显示 已保存。 图标。

“来源”“网络”和“元素”中的被替换文件旁边的相应图标，然后是“样式”

此外，网络面板会在替换了网页内容的请求的响应标签页旁边显示一个带有提示的紫色圆点图标。

“回答”标签页旁边的紫色圆点图标，带有提示。

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

借助本地替换，您无需访问后端，也无需等待后端支持您的更改。即时进行模拟和实验：

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

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

跟踪本地更改

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

此外，在 Sources > Overrides 中，您可以右键点击已保存的文件，然后从上下文菜单中选择 Open in containing folder。系统随即会打开您在替换设置期间选择的文件夹。您可以在那里使用自己喜欢的代码编辑器修改文件。

“在包含此文件的文件夹中打开”选项。

覆盖 HTTP 响应标头

在网络面板中，您可以在没有网络服务器访问权限的情况下替换 HTTP 响应标头。

借助响应标头替换功能，您可以针对各种标头（包括但不限于以下标头）在本地测试修复方案：

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

  1. 设置本地替换项，然后打开要调试的网页。
  2. 前往网络，找到相应请求，右键点击该请求，然后选择替换标头。开发者工具会将您带到标头 > 响应标头编辑器。

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

    “响应标头”编辑器。

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

  4. 修改或添加新标头。

    修改现有标头值、添加新标头值和移除覆盖。

    • 如需修改标头值，请点击相应值。
    • 如需添加新标头，请点击 添加标头。
    • 如需移除标头替换，请点击相应标头替换旁边的 。此操作会移除您添加的标题，或将修改后的值恢复为原始值。

    网络面板会以绿色突出显示已修改的标头，并以红色突出显示已移除的替换项（并添加删除线）。此外，标头标签页会显示一个带有工具提示的紫色圆点图标，告知您标头已被替换。

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

修改所有响应标头替换值

如需在一个位置集中修改所有标题替换项，请执行以下操作：

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

    “响应标头”部分旁边的“标头替换”链接。

    开发者工具会将您带到 Sources > Overrides 中的相应 .headers 文件。

  2. 修改 .headers 文件：

    修改 .headers 文件。

    • 如需添加新的替换规则，请点击添加替换规则。此处的规则是一组标头和值，以及要应用这些标头和值的一个或多个请求。

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

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

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

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