抓包工具Charles使用

简单记录下抓包工具Charles的使用

背景

最近在公司测试前段时间开发的React组件,因为做的是移动端项目,很明显,需要通过真机进行逐个测试。摆在面前的首要问题就是如何通过手机连接电脑端的本地项目。
第一种解决方法是手机、电脑连在同一个无线网,然后手机通过浏览器直接输入电脑的IP地址来访问页面。但是把页面放在手机客户端中测试时,客户端则要求一级域名必须是qunar.com才能打开,否则就只能跳到浏览器打开。最后只能选择charles工具。

Charles下载

Charles工具简介请跳转至Charles官网,博主目前使用的是从官网最新版4.0.1版本,以下介绍说明也是基于当前最新4.0.1版本。

Charles使用

安装成功之后,第一次打开打开软件,会出现下面选项,允许Charles修改电脑的网络配置。
Charles
然后进入软件。如果上图中你选择同意,那么Charles可以正常使用的,即能抓取所有网络访问,界面如下

Charles界面

如果没有选择同意,则需要打开Proxy菜单下Mac OS X ProxyMozilla Firefox Proxy选项, 然后便可正常使用。
此时若仍然不能正常使用,则极大可能是因为你使用了其他代理工具,例如Shadowsocks。Charles抓包默认代理本地端口号8888。所以需要关闭Shadowsocks,然后重启Charles。如果此时还不能使用,那就只能放大招了,手动配置本地代理的端口号为8888。配置路径为系统偏好设置 -> 网络 -> 高级 -> 代理 -> 网页代理(HTTP), 网页代理服务器填127.0.0.1,端口号8888,安全网页代理(HTTPS)也要如此配置。应用之后,便可成功。

抓取HTTPS

想要通过Chales工具抓取HTTPS包,则需要安装HTTPS证书,Help -> SSL Proxying -> Install Charles Root Certificate,然后会在钥匙串中安装一个自定义证书,选择始终信任。

Charles https自定义证书

证书设置好之后,开启Charles的SSL代理。进入到Proxy -> SSL Proxy Settings界面,勾选Enable SSL Proxying,然后点击add按钮,弹窗界面Port内输入443,其他默认,点击OK保存,便可抓取所有HTTPS访问,下图为抓取个人博客首页的信息。

Charles抓取HTTPS信息

带宽限流

该功能类似Chrome开发工具Network onditions下的Network throttling中的设置,主要是用来模拟测试不同网络环境下的页面加载速度。
Proxy -> Throttle Settings,选择Enable throttling,可手动设置自己需要的不同网络环境,界面中的Only for Selected hosts选项是专门针对特定的域名设置带宽。不过有个前提就是你本地的真实网络环境至少要等于你模拟的网络环境。

Charles带宽限流设置

断点

我们可以通过点击某个链接,右键选择Breakpoints选项,然后会看到功能面板上面的正六边形按钮亮了,此时点击Repeat按钮,重发此链接,便可看到如下断点界面。
Charles断点设置

映射

Charles的映射分为两种,第一种是远程链接映射到另一个链接,例如https://www.baidu.com映射到https://jd.com。另外一种是映射到本地,常见应用场景就是将线上一个文件映射到本地文件,方便前端人员调试代码。我们可以通过Tools菜单下的Map Remote SettingsMap Local Settings来分别开启两者。

代理

代理这个功能,就是为了解决我们前面背景里说的,将手机的请求经过电脑,实现手机和电脑的互联,并且可以通过Charles抓取手机的请求链接。
打开Proxy -> Proxy Settings面板,勾选Enable transparent HTTP Proxying,端口号使用默认的8888就行。
设置代理
然后我们的手机和电脑连上同一个无线网,设置手机wifi最底部的HPPT代理,选择手动,服务器填写电脑的IP地址,端口号与上图中填写的端口一致就行。此处,如果手机开了VPN或者ShadowSocks等,需要关闭。接下来通过手机访问的链接都能在Charles中抓取。我们也可以手动输入127.0.0.1来访问电脑的本地服务。至于设置*.qunar.com的域名,直接修改电脑本地的Hosts文件,将127.0.0.1指向qingguoing.quanr.com即可。
设置手机代理

总结

通过以上介绍,我们可以深深体会到Charles软件的强大。不过要想熟知其内部原理,就比较难了。
不过呢,自古以来,高手在民间,大神总是不缺的。此处,安利一个公司的大神通过纯JavaScript开发出来的一个免费代理工具Qproxy,可以抓取任意HTTP包和一键设置Hosts代理,具体使用请见Github上说明文档,反正是老牛逼了。