借助本地替换,您可以通过原型设计和测试更改和修复来恢复工作流程,而无需等待后端、第三方或 API 为其提供支持。
即使您无法访问远程资源,也可以使用本地替换项来模拟远程资源。您可以模拟对请求和各种文件(例如 HTTP 响应标头和网页内容)的响应,包括 XHR 和提取请求。
例如,本地替换功能在以下用例中会有所帮助:
- 在实际发布之前模拟 API 并测试 API 修复。
- 如果您已经了解后端将要使用的数据结构,请对新的界面设计进行原型设计。
- 测试性能修复(例如消除 CLS),以便提前确保这些修复很重要。
通过本地替换,您还可以在页面加载时保留您在开发者工具中所做的更改。
运作方式
- 当您在开发者工具中进行更改时,开发者工具会将修改后的文件的副本保存到您指定的文件夹中。
- 当您重新加载页面时,开发者工具将提供经过修改的本地文件,而非网络资源。
您也可以将更改直接保存到源文件。请参阅使用工作区编辑和保存文件。
限制
本地替换设置适用于网络响应标头和大多数文件类型(包括 XHR 和提取请求),但有以下几种例外情况:
- 启用本地替换后,系统会停用缓存。
- 开发者工具不会保存对 Elements 面板的 DOM 树所做的更改。
- 如果您在 Styles 窗格中修改 CSS,并且该 CSS 的来源是 HTML 文件,则开发者工具不会保存更改。
不过,您可以在来源面板中修改 HTML 文件。
设置本地替换项
您可以立即在网络面板中替换 Web 内容或响应标头:
- 打开开发者工具,前往网络面板,右键点击要替换的请求,然后从下拉菜单中选择替换标头或替换内容。
- 如果您尚未设置本地替换,则开发者工具会在顶部的操作栏中提示您执行以下操作:
- 选择一个文件夹以存储替换文件。
- 点击 Allow(允许)以授予开发者工具访问权限。
- 如果您已设置本地替换项但已停用,则开发者工具会自动启用它们。
设置并启用本地替换值(具体取决于您要替换的内容)后,开发者工具会引导您执行以下操作:
如需暂时停用本地替换值或删除所有替换文件,请前往来源 > 替换,然后取消选中
启用本地替换复选框,或点击 清除。要删除单个替换文件或所有替换项,请右键点击来源 > 替换中的文件或文件夹,选择删除,然后点击对话框中的确定。此操作无法撤消,您必须手动重新创建已删除的覆盖设置。
要快速查看所有替换值,请在广告网络面板中右键点击请求,然后选择显示所有替换值。开发者工具会带您前往来源 > 替换。
替换 Web 内容
如需替换 Web 内容,请执行以下操作:
- 设置本地替换项。
- 更改文件并将其保存在开发者工具中。
例如,您可以修改来源中的文件或依次点击元素 > 样式中的 CSS,除非 CSS 位于 HTML 文件中。
开发者工具会保存修改后的文件,在来源 > 替换中列出它们,并会在相关面板和窗格中被替换的文件旁边显示 图标:元素 > 样式、网络,以及来源 > 替换。
此外,对于包含已覆盖 Web 内容的请求的响应标签页,网络面板上会显示一个紫色圆点图标,并且旁边有一个提示。
替换 XHR 或提取请求以模拟远程资源
使用本地替换项时,您无需访问后端,也不必等待后端支持您的更改。实时模拟和实验:
- 设置本地替换项。
- 在广告网络中,过滤出 XHR/提取请求,找到所需内容,右键点击相应内容,然后选择覆盖内容。
- 更改提取的数据并保存文件。
- 刷新网页,观察您所做的更改。
如需了解此工作流,请观看以下视频:
跟踪您的本地更改
您可以在一个位置(更改抽屉式导航栏标签页)跟踪对网页内容做出的所有更改。
此外,您可以在来源 > 替换中右键点击保存的文件,然后从上下文菜单中选择在包含文件夹中打开。此操作会打开您在overrides setup时选择的文件夹。在这里,您可以使用自己喜欢的代码编辑器修改文件。
替换 HTTP 响应标头
在“网络”面板中,您可以在不访问网络服务器的情况下覆盖 HTTP 响应标头。
通过响应标头替换项,您可以在本地对各种标头进行原型修复,包括但不限于:
如需替换响应标头,请执行以下操作:
- 设置本地替换项并进行检查,例如此演示页面。
- 转到网络,找到相应请求,右键点击该请求,然后选择替换标头。开发者工具会带您进入 Headers > Response Headers 编辑器。
将鼠标悬停在响应标头值上,并将光标置于该处。
或者,如需启用 Response Headers 编辑器,请将鼠标悬停在响应标头值上,然后点击 edit Edit。
修改或添加新标题。
- 要修改标头值,请点击该值。
- 如需添加新标头,请点击 添加标头。
- 若要移除标头替换项,请点击它旁边的 。此操作会移除您添加的标题,或将修改后的值还原为原始值。
Network 面板以绿色突出显示修改后的标头,并用红色和划线突出显示已移除的替换项。此外,Headers 标签页还显示了一个紫色圆点图标,并带有提示,告知您标题已被替换。
请刷新页面,以应用所做的更改。
修改所有响应标头替换值
如需在一个位置修改所有标头覆盖设置,请执行以下操作:
点击 Response Headers 部分旁边的 .headers。
开发者工具会将您转到 Sources > Override 中对应的
.headers
文件。修改
.headers
文件:如需添加新的覆盖规则,请点击添加覆盖规则。这里的规则是一组标头和值以及要应用它们的一个或多个请求。
如需向规则添加“标头-值”对,请将鼠标悬停在另一键值对上,然后点击
。要还原标头值,请移除已添加的标题或规则,将鼠标悬停在其上,然后点击
。
使用 Command / Control + S 保存
.headers
文件。请刷新页面,以应用所做的更改。