使用 Google Chrome 中的覆盖网络请求功能

Google Chrome 的开发者工具提供了一项称为网络请求覆盖的强大功能，允许开发者直接从浏览器拦截和修改网络请求。此功能对于测试、调试和原型设计 Web 应用程序非常有用，而无需修改后端代码或部署更改。

在本文中，我们将探讨如何使用此功能、它的实际应用以及充分利用它的一些技巧。

什么是网络请求覆盖？

网络请求覆盖允许您：

• 拦截传出的 HTTP/HTTPS 请求
• 修改请求标头、方法或正文
• 将请求重定向到不同的 URL
• 模拟无需接触服务器代码的 API 响应
• 完全阻止特定请求

这一切都在您的浏览器中本地完成，因此非常适合开发和测试场景。

如何启用网络请求覆盖

1. 打开 Chrome 开发者工具（在 Mac 上为 /）F12Ctrl+Shift+ICmd+Opt+I
2. 转到 Sources 选项卡
3. 在左侧面板中，展开 Overrides （覆盖） 部分
4. 单击 + Select folder for overrides 并选择本地目录
5. 在 Chrome 提示您时授予权限

使用请求覆盖

基本请求修改

1. 在 Network （网络） 选项卡中，右键单击请求
2. 选择 Override content （覆盖内容）
3. Chrome 会在您的 overrides 文件夹中创建一个副本
4. 根据需要编辑文件（标头、响应正文等）
5. 刷新页面 - Chrome 现在将使用您覆盖的版本

高级技术

模拟 API 响应：

• 为您的 API 创建模拟 JSON 响应
• 测试应用程序如何处理不同的响应场景

URL 重定向：

• 将 API 调用指向 localhost 进行开发
• 使用不同的 API 端点进行测试，无需更改代码

标头修改：

• 添加、删除或修改请求标头
• 通过添加/删除身份验证令牌来测试身份验证流程

请求阻止：

• 模拟失败的请求以测试错误处理
• 用于隐私测试的阻止跟踪脚本

实际用例

1. 前端开发：在后端开发过程中处理 UI 组件
2. 测试边缘情况：模拟错误响应、慢速网络或大型负载
3. 调试：修改响应以隔离问题
4. 性能测试：阻止某些资源以衡量其影响
5. 安全测试：纵请求以测试漏洞

局限性

• 覆盖仅在您的本地浏览器实例中起作用
• HTTPS 请求可能需要额外的配置
• 复杂的修改可能需要编写 JavaScript 处理程序
• 并非所有请求类型都可以轻松覆盖

提示和技巧

1. 与本地覆盖结合使用，以在页面刷新之间保留更改
2. 对模拟 API 响应使用 .mock.json 约定
3. 为不同的测试场景创建不同的覆盖文件夹
4. 定期清除覆盖，以避免过时的 mock 影响您的测试
5. 与 Chrome 的节流功能结合使用，实现完整的网络模拟

结论

Chrome 的网络请求覆盖为开发者提供了一个强大的工具，可以直接在浏览器中处理网络流量。无论您是测试错误处理、针对尚不存在的 API 进行开发，还是调试棘手的网络问题，此功能都可以在开发工作流程中节省大量时间和精力。

通过掌握请求覆盖，您可以创建更健壮的应用程序，测试更多场景，并减少前端开发期间对后端服务的依赖。

出处：https://dev.to/