阅读 6593

推荐2个前端工具:Charles和Postman

5.1假期第二天,依然窝在家里,不过今天来客了,我的好朋友「晓哥」来看小宝,中午喝了点,各自「吹嘘」了一阵,聊聊各自职业的发展,工作中遇到的问题,以及对未来的规划。

他现在发展的特别好,在一家近千人开发的公司,主管北京地区的业务,包括需求洽谈、研发、项目推进和验收等,公司业务是为多家银行做app端,和我分享了他在管理上的一些经验,真心为他高兴,祝越来越好。

话题一转,说说今天的主角:2个工具,一个是抓包工具Charles,一个是API调试工具Postman。前几天,尝试使用Charles抓取 Websocket 的消息,折腾了好久才成功,Postman也一样,安装了app版本,也遇到了一些问题,想把过程分享给需要的朋友。

Charles

Charles是一个HTTP代理/HTTP监视器/反向代理,它允许开发人员查看他们的机器和Internet之间的所有HTTP和SSL/HTTPS通信,包括请求、响应和HTTP头(包含cookie和缓存信息)。

基本原理就是将自己作为代理服务器,浏览器、手机app等客户端进行代理设置,配置成Charles监听的端口,客户端将请求发给Charles,Charles再将请求发送给真正服务器,结果返回时,由Charles转发给浏览器、手机等客户端。

下面说明各种协议的请求抓取,环境如下:

  • 使用Android手机作为客户端,模拟发送各种请求;
  • 在Mac电脑上安装Charles应用程序,作为代理服务器;
  • 抓取小米商城app的各种请求;
  • 保证Android、Mac连接同一个网络;
配置

第一步,Charles代理设置,只要设置下端口即可:

打开代理设置

代理端口设置

第二步,配置手机Wifi代理(每个手机不同):

手机代理设置

选择手动代理,主机名为mac的ip地址,端口号为第一步配置的端口,配置完成后,mac端会提示允许接入,选择Allow即可:

是否允许接入

这样小米商城app的一些请求,就可以查看到了:

小米商城请求

抓取HTTPS请求

要抓取HTTPS请求,需要配置证书,过程如下:

第一步,在mac上安全charles根证书:

mac上安装根证书

第二步,保存charles根证书为cer格式,发送到手机,安装证书:

保存根证书

安装完成后,可以在安全设置中查看到这个证书:

安装后的证书

第三步,开启SSL代理

打开ssl代理设置

ssl代理设置

这样设置之后,就可以抓取https请求了,内容也不会乱码了:

抓取https请求

抓取Websocket请求

3.11版本之后,开始支持websocket抓取,如下:

不知道什么原因,使用上面wifi代理配置,无法抓取到websocket请求,查了很多文章都没有成功,最后,看到一句话:有些协议不会经过wifi代理,就想到使用全局代理app,应该会支持websocket协议,最后验证是可以的。

我选择了drony代理app,使用其他代理app应该也可以,首先,配置代理服务器,和之前类似:

进入setting选项卡,选择Wi-Fi:

Wi-Fi选项

找到使用的网络名,点进去设置,设置为charles的地址地址和端口:

Drony网络设置

这样设置后,就可以抓取到websocket请求了:

抓取websocket请求

其他功能介绍

还可以提供以下功能,这里就不展开说了,网上也有很多资料:

  • 模拟慢速网络;
  • 修改网络请求内容,多次发送请求;
  • 给服务器做压力测试;
  • Map功能,可以将app请求到测试环境;
  • Breakpoints功能,当指定的网络请求发生时,Charles会截获该请求,可以在Charles中临时修改网络请求的返回内容;

感兴趣的可以查看这篇文章了解:传送门

Postman

Postman是一种网页调试与发送网页http请求的应用,可以用来很方便的模拟get或者post或者其他方式的请求来调试接口。

之前一直使用Chrome app版本,最近这个版本不维护了,提示使用应用程序版本,这个工具使用比较简单,我就说说我觉得比较棒的功能。

环境管理

系统都有测试环境和线上环境,请求url肯定不一样,一些参数也可能不一样,可以通过切换不同的环境,动态变化,这样只需配置一次url和参数即可。

环境管理1

环境管理2

环境管理3

通过上面的设置,就可以在url配置中使用环境变量了:

环境管理5

Collections

可以保存我们的请求,不用打开都重新设置请求地址和参数了:

Collections

工作空间

新版本提供了工作空间的功能,可在不同的项目中切换:

工作空间

抓取浏览器的请求

可以自动映射到参数、cookie信息,对应需要登录后调用的接口,可以现在浏览器登录,通过抓取,就可以自动设置cookie信息了。

第一步,Postman开启代理端口:

开启代理端口

第二步,浏览器设置代理为第一步开启的端口:

浏览器设置代理

我使用浏览器插件SwitchyOmega进行了设置,这样在浏览器中访问网站,就会在Postman的History中显示了:

抓取的请求

欢迎扫描下方二维码,关注我的个人微信公众号,分享我的工作、学习和生活 ~

情情说

关注下面的标签,发现更多相似文章
评论