Chrome 开发者工具 第二十一章（替换 Web 内容和 HTTP 响应）

Chrome 开发者工具的本地替换功能是一个强大的工具，它允许开发者在不修改服务器代码的情况下模拟前端更改。这个功能特别适用于那些需要快速测试前端更改，但又不想或不能等待后端更新的情况。

本地替换的工作原理

本地替换通过在开发者工具中进行更改，并将这些更改保存到指定的本地文件夹中，从而模拟远程资源。当页面重新加载时，开发者工具会提供修改后的本地文件，而不是来自网络的资源。这意味着你可以实时看到更改的效果，而不必等待后端的支持。

限制

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

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

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

设置本地替换

要开始使用本地替换，需要在开发者工具的 “网络” 面板中选择一个请求，然后选择替换内容或替换标头。
这里以替换 XHR 或 Fetch 请求的响应数据为例，右击要替换的请求，选择“替换内容”

如果你还没有设置本地替换文件夹，开发者工具会提示你选择一个文件夹来存储替换文件，我们选择任意文件夹