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等。