1. 为什么需要Charles抓包小程序接口做接口测试的朋友都知道获取准确的接口数据是测试工作的第一步。就像厨师做菜需要新鲜食材一样测试工程师也需要真实的接口请求作为原材料。我在实际工作中发现小程序接口测试有个痛点很多接口文档要么不全要么和实际请求对不上号。这时候Charles就成了我们的火眼金睛。Charles本质上是个中间人代理它能记录所有经过它的网络请求。想象一下快递站的监控摄像头每个包裹进出都会被记录下来。我们测试微信小程序时所有接口请求都会经过Charles这个快递站这样就能完整捕获请求URL、参数、headers和返回数据。最近我在做一个电商小程序的压力测试发现商品详情页加载特别慢。通过Charles抓包发现有个图片接口每次都要请求3秒以上这就是典型的性能瓶颈。如果没有抓包工具我们可能要在代码里埋点或者盲目猜测效率会低很多。2. Mac环境下Charles安装指南2.1 下载与安装首先到Charles官网下载Mac版安装包建议选择最新的稳定版本。我实测过4.6.5版本在M1芯片的MacBook Pro上运行很流畅。安装过程很简单双击dmg文件后把Charles图标拖到Applications文件夹就行。第一次启动时会弹出权限申请这里要点击允许。有个小坑要注意如果你用的是MacOS Ventura或更高版本需要在系统设置-隐私与安全性里单独开启Charles的网络权限。我就遇到过因为没开权限导致抓不到包的情况排查了半天才发现是这个原因。2.2 基础配置安装完成后别急着抓包有几个关键设置要先做取消合并请求和响应显示在Charles - Preferences - Viewers里取消勾选Combine request and response。这样我们就能分开查看请求和响应数据调试时更清晰。设置代理端口点击Proxy - Proxy Settings端口默认是8888。建议勾选SOCKS proxy选项这样能捕获更多类型的网络请求。有个实用技巧是把Enable transparent HTTP proxying也勾上可以避免某些请求被漏掉。安装根证书这是抓HTTPS请求的关键步骤。点击Help - SSL Proxying - Install Charles Root Certificate然后在钥匙串访问中找到这个证书右键选择显示简介在信任设置里选择始终信任。3. 微信小程序抓包实战3.1 配置SSL代理微信小程序的接口基本都是HTTPS的所以必须配置SSL代理。点击Proxy - SSL Proxying Settings勾选Enable SSL Proxying然后点击Add添加一个Location。这里有个技巧Host填*表示匹配所有域名Port填443。这样设置后Charles就能解密所有HTTPS流量了。实际操作中我发现某些新版微信小程序的接口会使用HTTP/2协议。这时候需要在Charles的Proxy - SSL Proxying Settings里把Use HTTP/2也勾选上否则可能抓不到完整的请求。3.2 开始抓包配置完成后按以下步骤操作清空Charles界面点击Edit - Clear Session清除之前的记录避免干扰。打开PC端微信并启动目标小程序建议先登录微信这样能抓到用户相关的接口。我测试时发现某些小程序在未登录状态下接口行为会不一样。观察Charles界面正常情况会立即出现大量请求。可以通过Filter过滤关键字比如输入小程序名称的关键词。有个实用技巧是右键请求选择Focus这样会自动过滤出相关域名的请求。分析接口数据点击某个请求后右侧会显示详细内容。我习惯先看Overview了解基本信息再到Contents里查看具体的请求参数和返回数据。对于复杂的JSON返回可以用右下角的JSON Text视图格式化显示。4. 构建接口测试数据源4.1 导出cURL命令抓到需要的接口后右键选择Copy cURL Request就能把整个请求复制为cURL命令。这个功能特别实用我在做压力测试时经常需要批量导出几十个接口的cURL命令。有个细节要注意默认导出的cURL会包含所有headers但有时候我们只需要保留必要的认证header。可以在Charles的Tools - cURL Export Settings里自定义导出的内容。我通常会去掉Accept-Encoding这类不影响业务逻辑的header。4.2 导入JMeter进行压测有了cURL命令后在JMeter中点击Tools - Import from cURL粘贴命令就能自动生成HTTP Request。这里分享一个实用技巧对于需要登录的接口可以先抓登录接口把返回的token保存为变量然后在后续请求中引用。我在测试一个订单接口时发现直接导入的cURL有时会缺少必要的body参数。这时候可以对比Charles抓到的原始请求和JMeter生成的请求确保所有参数都正确传递。建议把重要的接口保存为JMeter的Template方便后续复用。4.3 构建自动化测试数据流成熟的测试流程需要把抓包、压测和监控串联起来。我的常用做法是用Charles抓取典型用户场景下的所有接口导出为cURL后导入JMeter构建测试计划设置合理的并发数和持续时间通过Grafana监控服务器性能指标分析瓶颈后调整参数再次测试这个过程中Charles抓取的真实数据是最关键的起点。我建议对每个核心业务场景都建立独立的数据集比如用户登录-浏览商品-下单-支付这一完整流程。5. 常见问题排查指南5.1 抓不到小程序请求这是新手最常见的问题可以按以下步骤排查检查Charles的代理是否开启Proxy - macOS Proxy要勾选确认微信使用了系统代理在微信设置-通用设置里查看代理配置验证SSL证书是否安装正确可以访问https://www.baidu.com测试如果显示SSL Proxying not enabled for this host说明证书有问题尝试关闭微信后重新打开有时候微信会缓存代理设置5.2 HTTPS请求显示乱码如果看到的是加密内容而不是明文说明SSL代理没生效。除了检查前面的证书安装步骤外还要确保在SSL Proxying Settings里添加了对应域名的规则手机或电脑完全信任了Charles证书没有其他安全软件拦截HTTPS流量5.3 接口返回数据不完整有时候会发现返回数据被截断这通常是因为响应数据过大可以在Charles的Preferences - HTTP里调整Response size threshold启用了gzip压缩在Proxy - Proxy Settings里取消勾选Enable gzip compression网络不稳定尝试换个网络环境测试6. 高级技巧与效率提升6.1 使用断点调试接口Charles的断点功能非常强大可以拦截并修改请求和响应。方法是右键接口选择Breakpoints然后在Proxy - Breakpoint Settings里设置断点规则。我常用这个功能来模拟接口超时修改请求的timeout值测试异常情况修改返回的状态码或错误信息快速验证不同参数修改请求body后重新发送6.2 自动化脚本辅助对于需要频繁抓包的场景可以用Charles的本地Map功能实现自动化把抓到的接口保存为本地文件在Tools - Map Local里设置映射规则下次请求时会自动返回本地文件内容我还会用Charles的JavaScript脚本功能实现更复杂的逻辑比如自动修改特定参数或记录特定接口的调用次数。6.3 结构视图分析在View菜单下选择Structure视图可以按域名组织所有请求。这个视图特别适合分析小程序的整体接口结构。我经常用它来统计各接口的调用频率分析接口之间的调用关系发现冗余或重复的请求有一次通过这个视图发现小程序首页竟然重复调用了6次同一个配置接口优化后页面加载速度提升了40%。
1. 为什么需要Charles抓包小程序接口做接口测试的朋友都知道获取准确的接口数据是测试工作的第一步。就像厨师做菜需要新鲜食材一样测试工程师也需要真实的接口请求作为原材料。我在实际工作中发现小程序接口测试有个痛点很多接口文档要么不全要么和实际请求对不上号。这时候Charles就成了我们的火眼金睛。Charles本质上是个中间人代理它能记录所有经过它的网络请求。想象一下快递站的监控摄像头每个包裹进出都会被记录下来。我们测试微信小程序时所有接口请求都会经过Charles这个快递站这样就能完整捕获请求URL、参数、headers和返回数据。最近我在做一个电商小程序的压力测试发现商品详情页加载特别慢。通过Charles抓包发现有个图片接口每次都要请求3秒以上这就是典型的性能瓶颈。如果没有抓包工具我们可能要在代码里埋点或者盲目猜测效率会低很多。2. Mac环境下Charles安装指南2.1 下载与安装首先到Charles官网下载Mac版安装包建议选择最新的稳定版本。我实测过4.6.5版本在M1芯片的MacBook Pro上运行很流畅。安装过程很简单双击dmg文件后把Charles图标拖到Applications文件夹就行。第一次启动时会弹出权限申请这里要点击允许。有个小坑要注意如果你用的是MacOS Ventura或更高版本需要在系统设置-隐私与安全性里单独开启Charles的网络权限。我就遇到过因为没开权限导致抓不到包的情况排查了半天才发现是这个原因。2.2 基础配置安装完成后别急着抓包有几个关键设置要先做取消合并请求和响应显示在Charles - Preferences - Viewers里取消勾选Combine request and response。这样我们就能分开查看请求和响应数据调试时更清晰。设置代理端口点击Proxy - Proxy Settings端口默认是8888。建议勾选SOCKS proxy选项这样能捕获更多类型的网络请求。有个实用技巧是把Enable transparent HTTP proxying也勾上可以避免某些请求被漏掉。安装根证书这是抓HTTPS请求的关键步骤。点击Help - SSL Proxying - Install Charles Root Certificate然后在钥匙串访问中找到这个证书右键选择显示简介在信任设置里选择始终信任。3. 微信小程序抓包实战3.1 配置SSL代理微信小程序的接口基本都是HTTPS的所以必须配置SSL代理。点击Proxy - SSL Proxying Settings勾选Enable SSL Proxying然后点击Add添加一个Location。这里有个技巧Host填*表示匹配所有域名Port填443。这样设置后Charles就能解密所有HTTPS流量了。实际操作中我发现某些新版微信小程序的接口会使用HTTP/2协议。这时候需要在Charles的Proxy - SSL Proxying Settings里把Use HTTP/2也勾选上否则可能抓不到完整的请求。3.2 开始抓包配置完成后按以下步骤操作清空Charles界面点击Edit - Clear Session清除之前的记录避免干扰。打开PC端微信并启动目标小程序建议先登录微信这样能抓到用户相关的接口。我测试时发现某些小程序在未登录状态下接口行为会不一样。观察Charles界面正常情况会立即出现大量请求。可以通过Filter过滤关键字比如输入小程序名称的关键词。有个实用技巧是右键请求选择Focus这样会自动过滤出相关域名的请求。分析接口数据点击某个请求后右侧会显示详细内容。我习惯先看Overview了解基本信息再到Contents里查看具体的请求参数和返回数据。对于复杂的JSON返回可以用右下角的JSON Text视图格式化显示。4. 构建接口测试数据源4.1 导出cURL命令抓到需要的接口后右键选择Copy cURL Request就能把整个请求复制为cURL命令。这个功能特别实用我在做压力测试时经常需要批量导出几十个接口的cURL命令。有个细节要注意默认导出的cURL会包含所有headers但有时候我们只需要保留必要的认证header。可以在Charles的Tools - cURL Export Settings里自定义导出的内容。我通常会去掉Accept-Encoding这类不影响业务逻辑的header。4.2 导入JMeter进行压测有了cURL命令后在JMeter中点击Tools - Import from cURL粘贴命令就能自动生成HTTP Request。这里分享一个实用技巧对于需要登录的接口可以先抓登录接口把返回的token保存为变量然后在后续请求中引用。我在测试一个订单接口时发现直接导入的cURL有时会缺少必要的body参数。这时候可以对比Charles抓到的原始请求和JMeter生成的请求确保所有参数都正确传递。建议把重要的接口保存为JMeter的Template方便后续复用。4.3 构建自动化测试数据流成熟的测试流程需要把抓包、压测和监控串联起来。我的常用做法是用Charles抓取典型用户场景下的所有接口导出为cURL后导入JMeter构建测试计划设置合理的并发数和持续时间通过Grafana监控服务器性能指标分析瓶颈后调整参数再次测试这个过程中Charles抓取的真实数据是最关键的起点。我建议对每个核心业务场景都建立独立的数据集比如用户登录-浏览商品-下单-支付这一完整流程。5. 常见问题排查指南5.1 抓不到小程序请求这是新手最常见的问题可以按以下步骤排查检查Charles的代理是否开启Proxy - macOS Proxy要勾选确认微信使用了系统代理在微信设置-通用设置里查看代理配置验证SSL证书是否安装正确可以访问https://www.baidu.com测试如果显示SSL Proxying not enabled for this host说明证书有问题尝试关闭微信后重新打开有时候微信会缓存代理设置5.2 HTTPS请求显示乱码如果看到的是加密内容而不是明文说明SSL代理没生效。除了检查前面的证书安装步骤外还要确保在SSL Proxying Settings里添加了对应域名的规则手机或电脑完全信任了Charles证书没有其他安全软件拦截HTTPS流量5.3 接口返回数据不完整有时候会发现返回数据被截断这通常是因为响应数据过大可以在Charles的Preferences - HTTP里调整Response size threshold启用了gzip压缩在Proxy - Proxy Settings里取消勾选Enable gzip compression网络不稳定尝试换个网络环境测试6. 高级技巧与效率提升6.1 使用断点调试接口Charles的断点功能非常强大可以拦截并修改请求和响应。方法是右键接口选择Breakpoints然后在Proxy - Breakpoint Settings里设置断点规则。我常用这个功能来模拟接口超时修改请求的timeout值测试异常情况修改返回的状态码或错误信息快速验证不同参数修改请求body后重新发送6.2 自动化脚本辅助对于需要频繁抓包的场景可以用Charles的本地Map功能实现自动化把抓到的接口保存为本地文件在Tools - Map Local里设置映射规则下次请求时会自动返回本地文件内容我还会用Charles的JavaScript脚本功能实现更复杂的逻辑比如自动修改特定参数或记录特定接口的调用次数。6.3 结构视图分析在View菜单下选择Structure视图可以按域名组织所有请求。这个视图特别适合分析小程序的整体接口结构。我经常用它来统计各接口的调用频率分析接口之间的调用关系发现冗余或重复的请求有一次通过这个视图发现小程序首页竟然重复调用了6次同一个配置接口优化后页面加载速度提升了40%。
