接口调试

不少公司有自己的接口调试平台，这很不错，能够在开发的时候尽可能地模拟实际的环境。

whistle

但是这一节要讲述的是通过代理的方式，脱离任何平台调试所有的接口，我们需要用到 whistle，拥有包括但不限于以下功能

抓包
修改请求/响应返回参数
重定向

安装

从官方文档中找到安装方式，以及安装好系统根证书，这一步是为了能够代理 HTTPS 请求

$ npm i -g whistle
$ w2 ca

启动


$ w2 start

whistle 将会启动在 8899 端口上，我们通过浏览器访问 http://localhost:8899 即可访问到 whistle 的可视化页面

配置代理

启动 whistle 后，还需要配置代理，将本机的请求转发到 8899 端口上。可以通过配置系统代理，将所有请求都转发，也可以通过浏览器插件，只转发浏览器发出的请求

参考教程：https://juejin.cn/post/6930415221185970189

抓包

在 NetWork 界面可以看到抓取的所有请求，我们能详细的看到请求/响应的类型、参数等

和移动设备连接同一个 WIFI，将移动设备的网络代理到本机的 8899 端口，也可以实现网络抓包

转发代理

比如我们想要在本地的环境用线上接口的数据，可以通过重定向来实现

通过在 Rules 中配置规则，例如

http://localhost:3000/api https://example.com/api

来自 http://localhost:3000/api 的请求都会被转发

例如 http://localhost:3000/api/ab/c 的请求会被转发到 https://example.com/api/ab/c 上，当然也可以对请求方法进行限制

这也适用于接口未开发完时，我们在本地启动 NodeJs 进程 Mock 接口数据，将正式环境的接口代理到本地服务上，后续就不用再更改请求路径了

Mock 数据

还可以通过配置 Rule 来模拟或者修改数据，比如修改接口的 body 返回值，可以用 resBody 协议，后面跟文件的路径，可以是本机的文件，也可以在左侧的 Values 一栏临时加上

http://localhost:3000/api/goods resBody://test.json

除了上面修改 resBody 的例子，官网还有更多丰富的用法，可以修改接口请求/响应的任何一部分

pageSpy

远程调试任意 Web 网页

安装

全局安装这个工具

$ npm install -g @huolala-tech/page-spy-api

启动

$ page-spy-api

使用

引入 CDN 到服务当中

<script crossorigin="anonymous" src="http://localhost:6752/page-spy/index.min.js"></script>
<script>
  window.$pageSpy = new PageSpy();
</script>

打开服务：http://localhost:6752/room-list

接口调试 ​

whistle ​

安装 ​

启动 ​

配置代理 ​

抓包 ​

转发代理 ​

Mock 数据 ​

pageSpy ​