1. Charles基础配置与安装指南第一次接触Charles的朋友可能会被这个工具的名字唬住但其实它就是个网络监控摄像头。想象一下当你用手机点外卖时Charles就像站在你和餐厅之间的传菜员不仅能记录每道菜的传递过程还能偷偷把番茄炒蛋换成宫保鸡丁当然是在测试环境下。下面我会用最接地气的方式带你快速上手。安装过程比装手机APP还简单。官网下载对应版本后Windows用户双击.msi文件一路NextMac用户把Charles拖进Applications文件夹就行。不过有个小细节要注意最新版可能要求Java 11环境如果启动报错去Oracle官网下个JDK就能解决。我习惯把安装路径改成D:\Tools\Charles这样重装系统时配置不会丢失。注册环节有个隐藏技巧在Help菜单选择Register Charles后别急着关注册窗口。先打开记事本记下注册信息因为当你修改网络配置导致Charles闪退时相信我这经常发生需要重新输入。推荐使用这个长期有效的组合姓名栏填https://zhile.io密钥填48891cf209c6d32bf4第一次启动时你会看到密密麻麻的请求列表像瀑布一样滚动。别慌先做三个关键设置在Proxy - Proxy Settings里把端口从8888改成容易记的数字比如8080勾选Access Control List添加你的本地IP段如192.168.1.*在View菜单开启Structure视图模式这样请求会按域名分组显示2. 移动端调试环境搭建给手机装Charles证书这事我见过不少开发者在会议室折腾半小时都搞不定。其实关键就两步先让手机信任电脑再让手机信任Charles。以安卓手机为例连接公司WiFi时需要特别注意有些企业网络会拦截证书安装这时候用手机开热点给电脑反而更靠谱。具体操作流程电脑端Charles开启代理Proxy - Start Proxy手机连接与电脑相同的WiFi长按网络选择修改网络代理类型选手动服务器填电脑的本地IPcmd里ipconfig查的IPv4地址端口填刚才设置的8080手机浏览器访问chls.pro/ssl下载证书iOS用户会多一步在设置-通用-关于本机-证书信任设置里手动开启对Charles证书的信任。遇到过最坑的情况是iOS 15之后要求证书必须带特定扩展字段这时候要去Charles的Help - SSL Proxying里安装新证书。测试阶段常遇到的三类问题证书安装成功但抓不到包检查是否关闭了VPN和流量只能抓到HTTP包看不到HTTPS需要在Charles里Enable SSL Proxying微信小程序请求缺失开发版基础库要调成2.12.0以上版本3. 请求映射实战技巧Map功能是Charles最像魔法的部分它能让你把京东的接口返回改成拼多多的数据或者直接用自己的测试数据替代线上接口。去年我们做618大促压测时就用这个功能把商品详情页的返回数据指向本地JSON文件省去了搭建Mock服务的麻烦。3.1 远程映射(Map Remote)远程映射最适合用来把测试环境请求导到生产环境验证兼容性将已下线的老接口临时指向新接口调试第三方服务时避免频繁修改代码具体操作Tools - Map Remote添加规则时注意Protocol要写对http/httpsHost支持通配符如.test.comPort不填表示所有端口Path匹配可以用正则表达式如^/api/v1/.*有个实际案例我们把支付宝沙箱环境的请求alipaydev.com映射到正式环境alipay.com发现了三个正式环境才会出现的加密验签问题。映射规则这样写https://*.alipaydev.com/* - https://$1.alipay.com/$23.2 本地映射(Map Local)本地映射我主要用在三种场景前端开发时模拟未完成的接口测试异常数据流如超长字符串、特殊字符快速复现线上问题技巧在于响应文件的格式处理。Charles支持直接编辑响应但更高效的做法是先正常抓取一次接口右键请求选择Save Response导出为文件用VSCode修改保存后配置Map Local最近发现个高级玩法结合Charles和Postman。先在Postman的Mock Server生成接口然后用Map Local把请求指向这个Mock地址。这样既可以利用Postman的动态变量功能又能享受Charles的全链路监控。4. 断点调试与请求篡改断点功能就像给网络请求按了暂停键我常用它来修改请求参数测试边界条件构造异常响应验证前端容错模拟慢速网络观察加载状态设置断点有两种方式全局断点Proxy - Breakpoint Settings里添加URL模式单次断点右键请求选择Breakpoints实际调试时会遇到几个常见问题断点导致请求超时在Breakpoint Settings里设置超时阈值修改后的JSON格式错误开启Validate JSON自动检查需要频繁启用/禁用断点使用快捷键CtrlAltB快速切换分享一个实际案例我们曾用断点功能测试APP的缓存机制。具体步骤对商品列表接口设置断点第一次请求时修改响应头添加Cache-Control: max-age60第二次请求时观察是否走本地缓存第三次请求时删除缓存头模拟服务端配置变更5. 弱网模拟与性能优化4G网络下用户可能遇到的各种卡顿情况在办公室WiFi环境下很难复现。Charles的弱网络模拟功能Proxy - Throttle Settings能精确控制带宽最高10Mbps最低0.1Kbps延迟最高5000ms丢包率最高90%MTU大小做性能优化时我通常会分三个阶段测试极端弱网环境带宽50Kbps延迟500ms10%丢包检查加载超时逻辑验证降级策略是否生效不稳定网络带宽波动随机延迟观察重试机制是否合理检测心跳包间隔是否适应正常网络下的性能基线记录各接口响应时间分析请求并行度有个容易忽略的参数是Enable throttling only for selected hosts。勾选这个选项后可以只对后端API限速不影响静态资源CDN的加载速度更真实地模拟用户场景。6. HTTPS抓包疑难解答HTTPS抓包是Charles最强大的功能也是问题最多的环节。常见报错及解决方法SSL handshake failed错误检查手机和电脑时间是否同步误差超过5分钟会失败重新安装Charles证书特别是iOS系统升级后在Proxy - SSL Proxying Settings添加具体域名某些APP抓不到包可能使用了证书锁定SSL Pinning尝试用Frida等工具绕过需root/越狱设备联系APP开发团队获取测试包Chrome浏览器显示不安全连接导入Charles根证书到浏览器信任区在chrome://flags搜索Allow invalid certificates启用对于金融类APP还有个曲线救国的方法在测试环境关闭证书校验或者让开发同学打一个调试包。去年对接银行支付功能时我们就是在开发分支临时注释掉了证书校验代码才抓到完整的加密流程。7. 实战案例电商APP调试去年双十一前我们用Charles发现了个隐蔽的库存显示问题。现象是商品详情页显示有货但下单时提示库存不足。通过Charles抓包分析发现是CDN缓存了库存接口的旧数据。排查过程开启Charles的Auto Save功能记录所有请求使用Filter过滤/item/stock相关接口对比客户端请求和服务端响应的timestamps发CDN节点的Date header比实际时间慢5分钟最终通过调整CDN缓存策略解决问题这个案例中用到的几个高级技巧使用Compare功能对比不同请求的差异开启Sequence视图观察请求时序导出HAR文件与团队成员共享日常开发中我习惯为每个测试场景创建独立的Charles配置文件Session - Save Session As。比如config1.chls专门调试支付流程config2.chls性能测试专用config3.chls异常case复现8. 效率提升技巧最后分享几个我积累的实用技巧能极大提升调试效率快捷键大全CtrlF搜索请求支持正则表达式CtrlR重发选中的请求CtrlE编辑请求无需断点CtrlShiftS保存当前会话自动化脚本 用Charles的本地Map功能结合JavaScript脚本可以实现动态响应。比如这个根据请求参数返回不同数据的脚本function onRequest(req, res) { if(req.url.indexOf(userid) -1) { res.body res.body.replace(vip_level:0, vip_level:3); } }团队协作方案使用Git管理Map规则和断点配置导出Session文件时勾选Export Summary生成报告对于复杂场景录制操作视频比文字说明更直观性能监控 在Tools - Mirror功能里可以把请求实时镜像到测试环境同时监控线上和测试环境的性能差异。我们曾用这个方法提前发现了数据库慢查询问题。
