用Charles抓包调试接口的那些事儿和避坑指南
シ馨翼先抓个包，直接上手
Charles这玩意儿，说白了就是个HTTP代理工具。刚接触的时候觉得挺复杂的，折腾了一下午才搞明白怎么用。不过现在用熟了，感觉真是调试接口、分析网络请求的神器。
最简单的用法：先去官网下个安装包，装完打开就行。记得要给它设置系统代理，不然啥也抓不到。Windows的话在设置里找到代理选项，macOS更简单，装完会自动弹个提示框让你确认。
这里要注意下，我踩过坑：如果你用的是公司电脑，可能会有权限限制，导致没法正常设置代理。建议直接找运维开个权限，省得折腾。
手机抓包才是王道
其实PC端抓包对我来说用得不多，反而是手机抓包特别常用。比如想看看某个APP的接口请求，或者调试一下移动端网页，这功能就太有用了。
操作也不复杂：
- 1. 手机和电脑连同一个WiFi
- 2. Charles里点Proxy – Proxy Settings，记下端口号
- 3. 手机WiFi设置里配个手动代理，填电脑IP和刚才的端口
- 4. 别忘了装SSL证书，这个后面详细说
亲测有效的一个小技巧：如果发现抓不到HTTPS的包，八成是证书没装对。iOS和Android的证书安装方式不太一样，但原理都是一样的。
踩坑提醒：这三点一定注意
说几个我被坑惨的地方，希望你们能避开：
- 第一个大坑就是SSL证书问题。记得要在手机浏览器里访问chls.pro/ssl下载证书，然后按照系统提示安装。iOS10以上还得去设置里手动信任。
- 第二个坑是HTTPS抓包会导致部分APP闪退。这是APP做了SSL Pinning，这种情况下只能想办法绕过，比如用Frida之类的工具。
- 第三个坑是代理设置后网速变慢。这个其实是正常的，因为所有流量都要走Charles。不过要是完全不能上网，可能是防火墙拦截了。
折腾了半天才发现，原来Charles有个“Enable macOS proxy”的选项，勾选上就能解决大部分代理问题。
高级玩法：改包+断点
光是抓包还不够有意思，改包才是真的爽。比如我想测试某个接口返回不同数据的情况，可以直接在Charles里修改响应内容。
代码示例：
// 原始返回
{
"status": "success",
"data": {
"price": 100
}
}
// 修改后的返回
{
"status": "success",
"data": {
"price": 50 // 把价格改成50
}
}还有个很实用的功能是断点。可以在请求发出去或者响应回来的时候打个断点，临时修改参数。我经常用这个来测试边界情况，比改代码方便多了。
这个场景最好用
最近做个需求，需要对接一个第三方支付平台，文档写得那叫一个含糊。用Charles直接抓他们的官方demo页面的请求，立马就清楚接口到底长啥样。
还有一种常见场景：排查生产环境问题。有时候线上出了bug，日志又不够详细，这时候用Charles抓包，配合source map，基本上都能定位到问题。
顺便说个骚操作：
# 在Charles里配置hosts映射
127.0.0.1 api.jztheme.com这样可以把请求指向本地mock服务，调试起来特别方便。
结尾：这工具值得好好研究
以上是我个人对Charles的使用经验分享，从基础到进阶都讲了一遍。说实话，这工具的功能远不止这些，像弱网测试、重复请求、限速这些功能都很实用。
这个技巧的拓展用法还有很多，后续我会继续分享这类博客。毕竟作为一个前端，不懂点抓包技能怎么行呢？有问题欢迎评论区交流。
暂无评论