![v2-f5572b39f3b94b31fdb96984cae38186_1440w.jpg?source=172ae18b](http://img-02.proxy.5ce.com/view/image?&type=2&guid=f994c390-0d2f-eb11-8da9-e4434bdf6706&url=https://pic4.zhimg.com/v2-f5572b39f3b94b31fdb96984cae38186_1440w.jpg?source=172ae18b)
charles介绍
charles是一款PC端的web代理工具,PC上的浏览器或者其他应用程序通过charles访问网络,charles会记录所有发送和接收的数据。在网络相关的开发过程中,前端/客户端需要和服务端联调,联调过程中出现问题,比如网络数据没有返回或者网络数据出错等等,这个时候需要前后端debug问题原因,如果缺少可视化的网络请求信息,调试将会非常耗时耗力。charles就是把前端/客户端的请求可视化,以UI界面的形式展示出来,极大地提高了联调和debug效率。
charles的核心功能
- 它可以抓取http,https网络包,并支持查看和修改网络参数,包括request,response
- 网速控制,它可以模拟网络慢速和高延迟的情况
- ajax调试,将xml和json用可视化的树形结构或者文本展示出来
- 重发网络请求,方便定位后端问题
- 编辑网络请求参数,模拟各种网络请求条件
- 支持断点,可以在请求前后拦截,并且修改request和response信息
- 验证html,css响应是否符合W3C标准
下载安装和Mac电脑抓包设置
- charles下载链接
- 安装后,需要安装ssl证书,help菜单里点击SSL Proxying
![v2-d63f6ce46255345bc649e58009605f16_b.jpg](http://img-01.proxy.5ce.com/view/image?&type=2&guid=f994c390-0d2f-eb11-8da9-e4434bdf6706&url=https://pic3.zhimg.com/v2-d63f6ce46255345bc649e58009605f16_b.jpg)
3. 打开钥匙串,信任charles证书
![v2-2f20fa159dd958cbadecbc27adb21431_b.jpg](http://img-01.proxy.5ce.com/view/image?&type=2&guid=f994c390-0d2f-eb11-8da9-e4434bdf6706&url=https://pic2.zhimg.com/v2-2f20fa159dd958cbadecbc27adb21431_b.jpg)
4. 做代理配置,点击Proxy菜单,确保macOS Proxy选项是勾选状态。点击SSL Proxying Settings,点击Add,配置可以抓包的域名和端口,填*星号代表所有域名和端口
![v2-982b5044046a781c7ebf270ef8de1c76_b.jpg](http://img-01.proxy.5ce.com/view/image?&type=2&guid=f994c390-0d2f-eb11-8da9-e4434bdf6706&url=https://pic3.zhimg.com/v2-982b5044046a781c7ebf270ef8de1c76_b.jpg)
5. mac电脑里面的网络设置也需要更新,设置->网络->Wifi->高级->代理,在左侧的配置协议列表中取消勾选“自动发现代理”和“自动代理配置”。
![v2-809b6fa563d0a3ff4a33dc597818f566_b.jpg](http://img-03.proxy.5ce.com/view/image?&type=2&guid=f994c390-0d2f-eb11-8da9-e4434bdf6706&url=https://pic3.zhimg.com/v2-809b6fa563d0a3ff4a33dc597818f566_b.jpg)
6. 电脑端抓包配置完成,可以访问网络试试,所有的http/https流量都会通过charles中转
手机真机抓包设置
- 点击Help菜单中SSL Proxying,选择安装证书
![v2-4ddad476ee5f4460248295a8f204a645_b.jpg](http://img-01.proxy.5ce.com/view/image?&type=2&guid=f994c390-0d2f-eb11-8da9-e4434bdf6706&url=https://pic2.zhimg.com/v2-4ddad476ee5f4460248295a8f204a645_b.jpg)
接下来出现弹框
![v2-d676e8b5b5f1653b5dfa1cf4908eba35_b.jpg](http://img-01.proxy.5ce.com/view/image?&type=2&guid=f994c390-0d2f-eb11-8da9-e4434bdf6706&url=https://pic2.zhimg.com/v2-d676e8b5b5f1653b5dfa1cf4908eba35_b.jpg)
2. 手机设置网络代理
打开网络设置,配置代理,选择手动,填入服务器和端口地址
服务器地址在命令行中输入ifconfig en0查看,或者在上面的图中查看,本文这里的地址为192.168.0.100。
端口地址填写默认的8888。
![v2-15c56e50c961ffc51ee05a200d4beb26_b.jpg](http://img-01.proxy.5ce.com/view/image?&type=2&guid=f994c390-0d2f-eb11-8da9-e4434bdf6706&url=https://pic3.zhimg.com/v2-15c56e50c961ffc51ee05a200d4beb26_b.jpg)
3. 代理设置完成后,使用浏览器打开chls.pro/ssl,出现弹框后点击允许
![v2-d937f036737db7699c97922fd86d5c1a_b.jpg](http://img-01.proxy.5ce.com/view/image?&type=2&guid=f994c390-0d2f-eb11-8da9-e4434bdf6706&url=https://pic3.zhimg.com/v2-d937f036737db7699c97922fd86d5c1a_b.jpg)
4. 手机设置信任证书,打开通用->描述文件,选择charles证书后,点击安装
5. 真机抓包已经配置完成,可以使用手机访问网络试试了,手机上所有的http/https流量都会通过charles中转