Web开发利器——Charles抓包工具介绍及简单配置

Charles是一个HTTP代理、HTTP监视器和反向代理服务器。可以让开发人员查看他们机器和服务器之间的所有HTTP和SSL/HTTPS通信数据包。
——摘自官网

通俗一点，Charles是一款Http(s)数据抓包工具。类似工具有Fiddler。自我感觉Charles比Fiddler好用，因此在这里介绍Charles工具，后续有机会再介绍Fiddler。

主界面

主界面

主界面里左侧是URL，右侧是请求的相关描述，包括请求头、响应等。

抓包拓扑

抓包拓扑中Charles扮演一个Web Proxy代理服务器的角色，你准备捕捉的HTTP请求经由Charles中转给服务器最后再将服务器返回的数据响应给你的请求源设备（可以是PC也可以是移动端设备）。这就需要你的请求源设备（姑且叫做ReqSrcDev）和Charles软件所在PC（叫做MonitorDev吧）位于同一网络中，并且需要配置ReqSrcDev利用代理也就是Charles进行网络请求。
当ReqSrcDev和MonitorDev为同一设备时，就是我们抓本机PC上HTTP请求的模型啦。

Charles配置

• 配置代理端口：

  
  代理设置入口

代理端口设置

Charles的代理端口默认是8888，你可以进行更改。同时，需要保证你的请求源设备配置代理的端口为Charles设定的代理端口。如果是捕捉本机PC上HTTP请求的话，基本是不需要配置的，打开Charles之后，会默认将浏览器的代理端口设置为8888。
我用的是Chrome浏览器，进入到代理设置里面就可以看到其配置参数，而这些实际上我是没配置过的。

IE代理设置

• 访问控制配置：

访问控制设置 配置允许使用Charles作为代理的IP地址

本机是不用配置的，如果非本机，并且需要由Charles中转抓包，则需要进行配置。将请求源设备（ReqSrcDev）的IP地址添加到这里，否则你会发现ReqSrcDev无法联网。一般首次使用的时候，Charles会弹出框来提示是否允许这个IP地址的设备进行访问。

请求源设备ReqSrcDev配置

ReqSrcDev设备将需要使用Charles作为HTTP请求的代理，那么配置要点就是代理服务器的IP地址以及代理服务器的端口，也就是MonitorDev的IP地址和Charles设置的代理端口（前面配置的默认8888）。
前面讲过，如果请求源设备就是本机，则需要进行配置，Charles会自动帮你配置好，直接抓包就可以了，要是没抓到的话，就去看看IE代理设置是否正确。
下面讲一下移动端手机配置抓包：
配置PC和手机都连接同一Wifi网络，然后设置手机Wifi中HTTP代理设置如下图：

手机Wifi代理配置

我这里是用电脑虚拟出的360Wifi，PC端的IP地址是192.168.253.1，手机采用DHCP连接，主要配置HTTP代理手动，并且服务器IP地址（即Charles所在电脑IP地址）为192.168.253.1和代理服务器端口号（Charles代理端口号）为8888。

Android手机的话，在Wifi连接好后，长按Wifi名，然后点击修改网络，选择高级选项，进入到Http代理设置界面即可。
到这里，配置就结束了。