Requestly是一款浏览器扩展工具，能有效提升前端开发和测试效率。它提供了修改网络请求、重定向、延迟响应等功能，便于模拟不同场景。在前端测试中，Requestly能帮助调整接口响应以验证页面行为；在后端测试中，它能解决依赖接口不稳定或造数困难的问题。Requestly的工作原理类似于Charles，但更专注于请求和响应的修改，适合作为调试和测试工具。
目录
Modify Request Url(Replace string)
前言：
Requestly 是一个浏览器扩展工具，可以帮助前端开发人员在开发和测试过程中提升效率。它提供了一些功能，如修改网页请求、重定向、注入脚本等，可以模拟不同的环境和场景，简化开发过程。
痛点
前端测试
在进行前端页面开发或者测试的时候，我们会遇到这一类场景：
- 在开发阶段，前端想通过调用真实的接口返回响应
- 在开发或者生产阶段需要验证前端页面的一些 异常场景 或者 临界值 时
- 在测试阶段，想直接通过修改接口响应来验证前端页面是否正常
- 想验证后端服务响应比较慢的情况下，验证前端页面是否正常（模拟接口超时或者模拟接口响应的时间的场景）
- 想更新请求头，请求体或者请求参数达到测试的目的
后端测试
在后端开发或者测试的过程中，我们可能会遇到这些场景：
- 依赖方接口不稳定或者造数困难
曾使用的应对措施
Charles
在验证前端页面的时候，我曾使用抓包软件Charles在捕捉流量的时候，设置断点（类似debug功能），并手动去调整接口的请求体或者响应体。
工作原理：
Charles 断点的实现原理是在客户端和服务器之间插入一个代理服务器，拦截并监视网络流量。当我们设置断点时，Charles 会在代理服务器上暂停请求或响应，直到我们决定继续或取消请求或响应。
- 具体来说，Charles 会在代理服务器上拦截请求或响应，并根据用户设置的规则进行处理。当 Charles 检测到一个请求或响应匹配了一个断点规则时，它会暂停请求或响应，并在 Charles 的 UI 中弹出一个对话框，让用户选择是否继续执行请求或响应。
- 在实现过程中，Charles 使用了代理服务器、Socket 和线程等技术。当我们启动 Charles 时，它会在本地计算机上开启一个代理服务器，并将其配置为系统默认的代理服务器。然后，当我们发送一个请求时，Charles 会将该请求发送到代理服务器上，并在代理服务器上等待响应。当代理服务器收到响应后，Charles 会在 UI 中显示响应，并等待用户决定是否继续执行请求或响应。
- 需要注意的是，由于 Charles 会拦截网络流量并在代理服务器上处理请求和响应，因此它可能会对网络速度和性能造成一定的影响。此外，在设置断点时，我们应该仔细考虑断点规则的范围和条件，避免无意中影响其他请求和响应。
Chrome 插件
通过使用Chrome插件（一般使用Chrome浏览器：如g0ngjie/ajax-proxy）,设定一些规则来拦截接口，更改接口的响应。或者对请求进行重定向。但此方法仅局限在Chrome浏览器中使用。
工作原理：
这个工具是一个基于 Node.js 和 Express 框架的 AJAX 代理服务器，可以将 AJAX 请求发送到其他域名下的 API 接口，并将响应返回给客户端。其实现原理如下：
- 客户端向 AJAX 代理服务器发送 AJAX 请求，请求包含目标 API 的 URL 以及其他参数。
- 代理服务器接收到请求后，解析出目标 API 的 URL 和参数，并将其转发到目标 API 的服务器。
- 目标 API 服务器接收到请求后，处理请求并返回响应。
- 代理服务器接收到响应后，将响应转发给客户端。
在这个过程中，代理服务器可以对请求和响应进行一些处理，例如修改请求头、添加身份认证信息、对响应结果进行过滤等。这些处理可以在服务器端通过编写中间件来实现。
实现mock工具
实现一款mock工具，设计方案大致如下：
- 对于后端而言
- 代码层面的域名改为mock服务器，不能指定请求，会将所有的请求都转发到mock server(若没有匹配的规则，mock server无法进行处理)。
- 代码层面的域名不变，在服务器中配置代理，将请求转发至mock server，在mock server设置拦截规则，未匹配规则的请求返回自定义的静态响应或者动态响应。未命中规则的请求，将转发至真实的服务器。
- 对于前端而言
- 在网关层面，将指定的请求转发至mock server，但这个无法通过mock server平台控制。
- 本地代理：本地启动代理，将请
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
