Charles介绍
Charles可能很多人不熟悉，但是另外一个windows下的Fiddler很多人应该不陌生的；它们都是同性质的代理抓包工具；
正常情况下，Chrome DevTool已经满足了日常web开发的需求，但是有的特性：编辑request的参数、重定向request请求的资源、编辑response的数据，ChromeDevTool就很蛋疼了，而且查看和调试移动端资源时候Chrome也并不好用；
我常借用Charles做这些事情 ：
- 抓取 Http 和 Https 的请求和响应，抓包是最常用的了。
- 重发网络请求，方便后端调试，复杂和特殊情况下的一件重发还是非常爽的（捕获的记录，直接repeat就可以了，如果想修改还可以修改）。
- 修改网络请求参数（客户端向服务器发送的时候，可以修改后再转发出去）。
网络请求的截获和动态修改。 - 支持模拟慢速网络，主要是模仿手机上的2G/3G/4G的访问流程。
- 支持本地映射和远程映射，比如你可以把线上资源映射到本地某个文件夹下，这样可以方便的处理一些特殊情况下的bug和线上调试（网络的css，js等资源用的是本地代码，这些你可以本地随便修改，数据之类的都是线上的环境，方面在线调试）；
- 可以抓手机端访问的资源（如果是配置HOST的环境，手机可以借用host配置进入测试环境）
安装
- 下载
- 安装后长这样
image.png
配置
- 手机和电脑连上同一个局域网
- 打开Charles客户端，点击Proxy->Proxy Settings菜单，设置默认端口8888
image.png
- 打开Charles客户端，点击Help->Local Ip Address，查看本机IP
image.png
- 打开手机局域网设置，点击代理，设置为你本机IP和上面默认的8888端口
这里的服务器地址应该是192.168.20.111,图片上的写错了
- 打开Charles客户端，点击Poxy->macOs Proxy
- 等待一会，Charles会弹出是否允许，点击allow
image.png
- Charles就会抓到你手机上的请求地址
image.png
https请求是unknow问题
抓到包后会发现有些请求是unknow，看不到具体的请求，原因是你的手机没有安装ssl证书、并且电脑需要配置代理网址
image.png
- 解决方法：
1、打开Charles, 点击Help->SSL Proxying->Install Charles Root Certificate，安装后去钥匙串中允许Charles的证书始终信任
image.png
2、 手机浏览器输入chls.pro/ssl安装证书（通用->描述文文件与设备管理->选中Charles证书安装），安装好之后要设置信任该证书（通用->关于本机->设置信任该证书）,不然抓包仍然会显示unknown类型。
3、在Charles中，设置Proxy->SSL Proxying Settings中的SSL Proxying的代理 网址。直接点击Add->OK即可，不用输入host和port，就可以默认代理所有请求
image.png