Charles+BlueStack辅助监视线上APP的HTTP接口请求响应

1、背景

线上环境APP（H5）功能出错，需要排查问题。通常通过日志定位问题的途径有如下几种：查看APP的日志（请求和响应）， 查看网关日志，查看业务服务日志等等。

在排查问题的过程中，需要对请求进行原样重播，修改参数重播，反复操作APP的功能效率会比较低。

测试和研发通常都会采用HTTP的请求响应抓包工具和模拟器，在PC上直接完成线上APP的测试工作。

本文介绍Charles + BlueStack抓包套件的配置，原理，示例。

2、准备

• ​​BlueStack 安装包​​
• ​​Charles 安装包​​
• 安装BlueStack和Charles

3、配置

3.1、Charles配置

• Proxy->Proxy Seetings的Proxies 中HTTP Proxy代理端口默认值是8888， 可根据实际情况修改

• Proxy->Proxy Seetings的Proxies 中Windows 中默认是启用Windows代理。比如：浏览器请求会通过代理服务器。如果仅针对特定的应用进行代理，建议关闭Windows Proxy。

3.2、BlueStack配置

• 查询本地IP

ipconfig

• 管理员权限打开命令行，切换值BlueStack的代理配置命令目录

例如：C:\Program Files (x86)\BluestacksCN\Engine\ProgramFiles

• 设置代理服务地址

C:\Program Files (x86)\BluestacksCN\Engine\ProgramFiles>HD-ConfigHttpProxy.exe
Usage: HD-ConfigHttpProxy.exe set <host> <port>
       HD-ConfigHttpProxy.exe reset

host是本地IP地址
port是Charles的代理端口

4、实例

案例说明：查询商品库存，查看接口请求和响应。

案例截图如下，左图是：Charles的HTTP请求响应记录界面；右图是：BlueStack上运行APP的截图。

1、右图：查询商品详情，调用商品库存接口

2、左图：展示请求和响应信息

• 圈1：启停HTTP记录的开关和SSL Proxy开关
• 圈2：请求的摘要信息（状态码，Host, Path, 开始结束时间，持续时间等）
• 圈3：过滤指定域名下的请求，很常用的功能，方便快速展示关注的请求
• 圈4：请求报文， 可以切换展示格式
• 圈5：响应报文，可以切换展示格式

更多Charles的功能用法查看官方文档：​​​​https://www.charlesproxy.com/documentation/​​。

5、原理

Charles代理原理如下图所示。  

当我们开启Charles的Recoding（记录HTTP请求和响应）时，由于BluesStack的HTTP Proxy配置的是Charles的HTTP代理端口，所以此时APP的HTTP请求都会通过Charles Proxy去访问真正的服务器端。

原理比较简单，本文介绍的是Charles，类似的工具还有：Fildder，Wireshark等。