导航到 “源” 工具。

在左侧) 的“ 导航器 ”窗格中 (，单击“ 替代 ”选项卡。如果未显示“ 替代 ”选项卡，请单击图标 ≫ 。

“ 源” 工具的空间不足，无法显示“ 替代 ”选项卡：

选择“ 替代 ”选项卡：

在本地计算机上选择一个文件夹来存储要替换的资源文件。 若要搜索文件夹，请单击“ + 选择替代的文件夹 ”。

DevTools 警告你必须具有对该文件夹的完全访问权限，并且不应泄露任何敏感信息。 选择 “允许” 以授予访问权限。

在“ 替代 ”选项卡中， “启用本地替代 ”旁边显示一个复选框。 “启用本地替代” 右侧是“ 清除”配置 图标，可用于删除本地替代设置。 现在，你已完成文件夹设置，并且已准备好将实时资源替换为本地资源。

将文件添加到 Overrides 文件夹

若要将文件添加到 overrides 文件夹，请打开 “元素” 工具并检查网页。 若要进行编辑，请在 样式 检查器中单击 CSS 文件的名称。

在 样式 检查器中选择文件：

在 “源编辑器”中 ，右键单击文件名，然后单击“ 保存替代 ”。

在“源编辑器”中，将文件的名称添加到替代列表：

右键单击某个文件名，然后选择“ 保存替代 ”：

该文件存储在替代文件夹中。 验证 DevTools 是否使用具有正确目录结构的文件的 URL 创建名为 的文件夹。 文件存储在 其中。 编辑器中的文件名现在还显示一个紫色点，指示文件是本地文件，而不是实时文件。

已成功将文件存储在 overrides 文件夹中：

在以下示例中，现在可以更改网页的样式。 若要在文件周围添加红色边框，请在 “样式” 编辑器中复制以下样式，并将其添加到 body 元素。

border: 10px solid firebrick
该文件将自动保存在您的计算机上。  如果刷新文件，将显示边框，并且不会丢失任何工作。
通过编辑 overrides 文件夹中的文件来持久更改网页样式：
在 “源” 工具的“ 页面 ”部分中，右键单击文件，然后将其添加到替代。  已位于 overrides 文件夹中的文件图标上有一个紫色点。
从 源 工具中选择用于替代的文件：
或者，在 “网络 ”工具上，右键单击文件，然后将其添加到替代。  当替代生效时，位于计算机而不是实时网页的文件。  替代生效后，在 “网络 ”工具上，找到文件名旁边的警告图标。
从 网络 工具中选择用于替代的文件：
替代的双向交互
使用随 DevTools 的 Sources 工具提供的编辑器或要更改文件的任何编辑器。  更改将跨访问 overrides 文件夹中的文件的所有产品同步。