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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

  • 在 API 修复程序实际投入生产环境之前，模拟 API 并测试 API 修复程序。
  • 如果您已经知道后端将要使用的数据结构，请为新界面设计创建原型。
  • 测试性能修复措施（例如消除 CLS），以提前确保其效果显著。

借助本地替换项，您还可以在页面加载时保留在 DevTools 中进行的更改。

工作原理

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

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

限制

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

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

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

设置本地替换项

您可以直接在网络面板中替换网页内容或响应标头：

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

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

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

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

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

如需快速查看所有替换项，请在 Network 面板中右键点击某个请求，然后选择 Show all overrides。开发者工具将带您前往 Sources > Overrides。

替换网页内容

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

  1. 设置本地替换项。
  2. 对文件进行更改并将其保存在 DevTools 中。

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

开发者工具会保存修改后的文件，并在 Sources（来源）> Overrides（替换项）中列出这些文件，还会在相关面板和窗格（Elements [元素] > Styles [样式]、Network [网络] 和 Sources [来源] > Overrides [替换项]）中显示替换的文件旁边的 已保存。 图标。

在“来源”“网络”和“元素”中依次选择“样式”，然后在被替换的文件旁边找到相应的图标

此外，如果请求包含被替换的 Web 内容，Network 面板会在请求的 Response 标签页旁边显示一个带有提示的紫色圆点图标。

“响应”标签页旁边带有提示的紫点图标。

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

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

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

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

跟踪本地更改

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

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

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

替换 HTTP 响应标头

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

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

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

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

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

    响应标头编辑器。

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

  4. 修改标题或添加新的标题。

    修改现有标头值、添加新标头值和移除替换项。

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

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

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

修改所有响应标头替换项

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

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

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

    DevTools 会将您带到 Sources > Overrides 中的相应 .headers 文件。

  2. 修改 .headers 文件：

    修改 .headers 文件。

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

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

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

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

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