分享 | Charles 力助分析网络封包

Charles是Mac平台下常用的调试工具，用来分析网络通信协议，这个功能在做移动端开发时非常有用，因为有时候你不得不通过抓包来分析通信定位问题，移动端开发跟Web不同，IDE并不会像Chrome Dev Tools一样，给你提供网络通信协议的封包，而Charles正好代替了这一块的需求。这是一个Mac版的App，你可以去官网（https://www.charlesproxy.com/）下载，然后安装即可。需要额外提一点的是，Charles是一款收费软件。

Charles除了抓包移动端外，也可以将它设置为系统代理，你可以在这个面板中查看一些具体的信息。从上图中，你可以看见music.163.com的娱乐，这其实是从网易云音乐Mac客户端中抓包出来的，大家可以见证一下：

正因为如此Charles对于分析软件的网络情况有非常重要的作用。

今天抛开其他的配置不说，我们主要看一下如何配置移动端的抓包，包括iOS和Android，首先对于配置移动端，分为两步。第一步在菜单栏中proxy -> proxy setting 里填入端口号8888，并且勾选"Enable transparent HTTP proxying"，其次在你的iOS设备中设置网络代理，选手动设置，填写服务器，这也就是你电脑上的IP地址，再者填写你刚刚设置的8888端口号，之后Charles会弹出来一个是否Connection的提示，选择Allow即可。这时候，你用iOS设置随便访问一个站点，都可以通过Charles来分析网络通信，这一点上对于调试还是很有帮助的。唯一是这样设置Proxy还只能抓取HTTP协议，对于HTTPS就毫无办法了。

如果你想抓取HTTPS协议的通信，还需要额外的几个步骤，在Help -> SSL Proxying -> 选择你想安装的设备，有模拟器也有移动设备，我选的是Install Charles Root Certificate on a Mobile Device or Remote Browser，Charles依然会弹出来一个信息：

这个时候需要先在你的设备中将你的网络代理设置为192.168.1.105，端口号为8888，然后在你的移动设备中的浏览器里输入 chls.pro/ssl，iOS设备会弹出来安装一个证书描述文件，确认安装即可。回到Charles里在SSL Proxy Setting中设置端口号443，一般情况下可以用通配符*来代替Host。这个时候，依然随便访问一个HTTPS站点，在Charles界面中你就可以看到网络通信了。

除了代理抓包之外，Charles还有很多强大的特性，比如模拟网络速度，修改服务端返回等，总之通过Charles可以极大的方便我们的日常开发中抓取和调试网络请求，分析封包协议，剩下的就需要你慢慢研究了，祝玩的开心。

你身边如果有朋友对混合领域（跨技术栈）或全栈，编程感悟感兴趣，可以转发给他们看哦，^_^先谢过啦