Proxyman网络调试工具

一、基本介绍

1、Proxyman是什么?

一个用于捕获、解密和模拟HTTP(S)请求的高性能(使用Swift编写的)、交互体验友好(严格遵守MacOS人机交互指南标准)的网络调试工具。

2、与Charles有啥不同?

  • Proxyman 提供了简单直观的界面和强大的功能,使得开发人员能够更轻松地监控、调试和修改网络流量。Charles 的界面稍显复杂,但提供了更多的高级功能和配置选项。
  • Proxyman原生语法(Apple Swift NIO)编写的性能高,支持Windows、IOS、Android、MacOS(11或更高版本)、Linux。Charles不支持IOS、Android。
  • Proxyman支持使用JavaScript脚本的方式操作请求和响应。Charles不支持。

3、安装和配置

官方下载地址:https://proxyman.io/

官方文档地址:https://docs.proxyman.io/

git地址:https://github.com/ProxymanApp/Proxyman

也可支持brew 下载:brew install --cask proxyman

二、基本功能

1、Proxyman Proxy Helper Tool安装

安装好Proxyman后,默认情况下,第一次打开Proxyman时会提示安装,安装即可,也可直接跳过后续在高级设置里安装。

图片

2、Request/Response预览

2.1证书配置

为了拦截加密的 HTTPS 消息(请求或响应),您必须在当前计算机上安装 Proxyman CA 证书。对于 iOS、Android 设备、iOS 模拟器、Java VM 和 Firefox,此步骤也是必需的。

图片
图片

2.2body预览和自定义预览tab

预览内容:证书配置好后,默认所有HTTP和HTTPS流量的请求体是不需要授权就可以查看的,如果想查看某一个接口的响应体按如下操作即可。(建议需要哪个域名就开启哪个域名,这样有利于减少Proxyman的计算开销,通过option+command+p即可查看启用SSL的域名和不启用的域名。)

图片

自定义预览tab:Proxyman提供了美化内容的选项,我们可以自己定义请求和响应tab保留在面板上。如下图所示。

图片
图片

三、高级功能

1、编辑并重复、重复发起请求

重复发起请求:有的时候我们改完mock后,需要自己重新调用一下某个接口看看mock是不是正确的,这就需要用到重复了。选中某一条请求,然后按住command+回车键即可触发重复。也可以右击鼠标从菜单中选择“重复”

图片

编辑并重复:有的时候为了某些接口为了方便兼容了很多业务,导致发起请求的入参多变,这个时候为了调试方便需要针对某个接口进行编辑后再发起请求,这就需要用到编辑并重复的功能了。如下图:按住“command+option+回车键”即可触发“编辑并重复”.

图片

2、创建新的请求

有的时候如果存在测试接口情况,比如执行类似于postman等接口测试工具的需求时,可以用到创建一个新的接口并向指定的服务器发起请求。

图片
图片

3、缓存启用和关闭

如果你想看到来自于服务端最新的响应,你就需要关闭缓存。

图片

4、断点和断点模板

4.1断点

业务迭代进入并行环境测试阶段,可能存在业务数据不完整的情况,这个时候为了尽快满足自测,可以使用“断点”功能,改写接口请求和响应,达到完整走完业务流程的目的。如下图,选中某条接口,右击鼠标,选择“工具”里的“断点”即可进入到断点规则创建弹窗界面。(目前免费版只支持一条断点规则,业务场景使用过程中最多的估计是针对请求参数或者域名进入到断点的,在匹配规则里使用正则匹配即可实现一条规则匹配多个接口)

图片
图片

4.2断点模板

为了在方便在进入断点后快速的改写请求或响应,Proxyman允许创建“请求模板”和“响应模板”以Raw消息的原始形式快速的更改请求和响应。如下图先创建“断点模板”

图片
图片

进入断点后以Raw消息原始形式查看请求和响应,就可以看到右上角的模板

图片
图片

5、文件映射改写响应

文件映射功能允许将服务器返回的数据映射到本地的文件上。当代理服务器接收到来自服务器的响应时,它会将响应中的某些数据替换为本地文件中的内容。这样,我们就可以轻松地编辑本地文件,并观察对应的响应如何改变,而无需直接修改服务器端的数据或请求。如下图,首先在本地磁盘里创建映射文件test.txt

HTTP/1.1 200 OK
Content-Type: application/json; charset=utf-8

{
"code": "0000",
"data": {
"k":"映射文件demo"
},
"message": "success"
}

在本地创建好源文件后,在Proxyman中创建映射关系

图片
图片

重新请求https://www.baidu.com/test即可看到接口响应被替换了。(演示随便输入的链接,百度肯定没有这个资源接口,访问不到这个是正常的)文件映射应用的场景很多,举个例子:大家可能会遇到测试环境、集测环境、生产环境针对某个bug表现不一致的情况(生产的工程化配置改写了某些插件或loader配置,导致开发环境正常但测试环境和生产环境异常),这个时候如果要排查集测环境或者生产环境的这个bug,就可以用路径映射将远程响应的文件替换成本地的文件,从而做到不发布调试问题。

6、目录映射改写响应

Proxyman支持将某一个域名下的所有请求映射到本地的一个目录下。如下图,我们演示一个将百度首页的图片替换成本地的随机图片。首先需要监听百度所有请求,并指定筛选出媒体类型,然后找到返回百度的logo的那个请求“https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png”

然后在自己的本地磁盘上随便创建一个目录并在目录里创建一张图片命名为“PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png”

图片
图片

7、远程映射实现请求和响应的重定向

Proxyman 的远程映射功能(Remote Map)允许我们将本地请求或响应映射到远程服务器上的特定 URL,简言之就是“允许请求和响应的重定向”。比如,我们在用React-Router开发过程中存在一个业务应用跳转到另一个业务应用的场景,大家都知道React-Router没法跳转到业务应用外部的,只能利用window.location的方法或者a标签跳转,但是两个应用部署到生产环境的时候都用的一个域名这就导致了开发环境和生产环境的割裂,解决这个问题的方法有两种第一在业务代码里根据当前的环境决定往哪里跳,第二使用重定向。如下图,我希望访问 https://www.baidu.com 的时候重定向到自己本地http://localhost:3000 的应用上。

图片
图片

配置完成之后,访问https://www.baidu.com 的时候就会重定向到本地的3000端口上来。

8、导出和导入会话

Proxyman支持将当前的配置、记录和会话数据导出和导入,这样方便了团队成员之间的共享和协作。也有的时候需要在不同的PC上开发,这个功能也方便了迁移和同步。

图片

9、节流模式

为了模拟不同环境设备上的网络环境,可以使用节流功能,如下图。

图片
图片

10、编写脚本改写请求体和响应体

Proxyman提供了类似于中间件的概念——“脚本”,这个脚本允许在请求和响应结束前插入一个脚本改写请求和响应。Proxyman官方文档介绍说,使用脚本的方式改写网络比在Proxyman可视化操作要快100倍,所以在此也建议大家使用脚本。如下图:

图片
const Lodash = require('@libs/lodash.js'); // Proxyman内置了一些库可以直接引入
/// This func is called if the Request Checkbox is Enabled. You can modify the Request Data here before the request hits to the server
/// e.g. Add/Update/Remove: host, scheme, port, path, headers, queries, comment, color and body (json, form, plain-text, base64 encoded string)
///
/// Use global object `sharedState` to share data between Requests/Response from different scripts (e.g. sharedState.data = "My-Data")
///
async function onRequest(context, url, request) {
// console.log(request);
console.log(url);
console.log('__________',Lodash.camelCase('Foo Bar'))


// Update or Add new headers
// request.headers["X-New-Headers"] = "My-Value";

// Update or Add new queries
// request.queries["name"] = "Proxyman";

// Body
// var body = request.body;
// body["new-key"] = "new-value"
// request.body = body;

// Done
return request;
}

/// This func is called if the Response Checkbox is Enabled. You can modify the Response Data here before it goes to the client
/// e.g. Add/Update/Remove: headers, statusCode, comment, color and body (json, plain-text, base64 encoded string)
///
async function onResponse(context, url, request, response) {
// console.log(response);

// Update or Add new headers
// response.headers["Content-Type"] = "application/json";

// Update status Code
// response.statusCode = 500;

// Update Body
var body = response.body;

// body["new-key"] = "Proxyman";
// response.body = body;

// Or map a local file as a body
// response.bodyFilePath = "~/Desktop/myfile.json"
console.log('url',url);
console.log('body',body);

if(url.includes('/api/route/tqg-home?functionCode=query_mall_bottom')){
body.data.bottoms[0].title="购物11111";
}


// Done
return response;
}

四、从Charles迁移到Proxyman

1、会话文件格式转换

Charles会话文件的格式是.chls结尾的,而Proxyman以.har结尾的,庆幸的是Proxyman提供了转换方法。

图片

Was this helpful?

0 / 0

发表回复 0