Charles 主要的功能包括下面这些：
截取 Http 和 Https 网络封包。支持重发网络请求，方便后端调试。支持修改网络请求参数。支持网络请求的截获并动态修改。支持模拟慢速网络。
charles相当于一个插在服务器和客户端之间的“过滤器”；
当客户端向服务器发起请求的时候，先到charles进行过滤，然后charles在把最终的数据发送给服务器；
注意：此时charles发给服务器的数据，不一定是客户端请求的数据；charles在接到客户端的请求时可以自由的修改数据，甚至可以直接Block客户端发的请求；
服务器接收请求后的返回数据，也会先到charles，经过charles过滤后再发给客户端；
同理：客户端接收的数据，不一定就是服务器返回的数据，而是charles给的数据；
正因为上面的原理，所以charles能实现的功能，对前端开发者来说非常有吸引力，相当于请求和响应都可控的，而且charles为了控制更加方面，提供很多简洁的操作；
一、charles的下载和安装
要想下载一个工具，怎么办最简单，在开发工具里，最方便的方式就去去它的官网下载，当然前提是在我们的祖国怀抱内~
charles就可以这样下载，首先百度一下咯
或者直接点击下载地址：
Download a Free Trial of Charles • Charles Web Debugging Proxy
image.png
image.png
根据你的系统版本选择对应的版本
charles现在出到了4.2.7版本，这个基本上没什么影响，一般只要下载最新的版本就可以啦
记得好像是4.0一下不支持http2.0的抓取，所以这点注意一下就ok啦
下载好后进入安装页面，基本也是一路点下去，记得自己记得安装目录
image.png
打开安装目录，双击运行charles.exe
安装好啦~
卸载的时候，就更简单了，直接找到控制面板-程序与功能-卸载或更改程序，然后双击卸载就可以了
image.png
二、charles的基本介绍
关于charles有很多很强大的功能，这里由于篇幅限制我只做部分功能说明
*charles提供两种不同的视图方式
可自行按需选择查看
structure视图是将网络请求按访问的域名分类，也就是理解为文件夹类型
image.png
Sequence 视图是将网络请求按访问的时间排序，理解为单个文件
image.png
*查看默认端口号“Proxy->Proxy Settings”，默认端口号为8888，可自行修改
image.png
***SSL Proxying Setting **
对于https需要设置不然抓包时会出现[图片上传失败...(image-ff4b1a-1597751595101)]
的图标
image.png
我们需要点击proxy然后选择SSL Proxying Setting
image.png
点击Add
image.png
Host：*
Post：443
image.png
再加入一组
Host：*
Post：443
image.png
加完之后在看抓包结果
image.png
*过滤请求
当请求杂乱无章时，为了确保我们拿到自己想要的数据，可以使用filer进行过滤关键字
image.png
过滤前
image.png
过滤后
image.png
*状态栏
image.png
*Proxy菜单功能
image.png
*Tools菜单功能
image.png
三、Charles电脑证书安装
image.png
image.png
image.png
image.png
image.png
image.png
image.png
四、charles手机证书安装，设置代理，手机进行抓包
这一步的目的是为了移动设备连接到Charles，这样移动设备发起的所有请求才能在Charles中看到
首先确保自己手机的wifi和电脑在同一网络下，千万不要用4G，那么没办法抓包，必须连接wifi
使用Charles工具查看PC本地IP和端口号（端口号默认为8888，也可自行修改），选择“Help->Local IP Address”
我的电脑本地ip地址为：192.168.1.xx
也可以选择“Help->SSL-Proxying->install charles Root ....Browser”查看，这样子可以一下子把端口号和ip看到
image.png
image.png
把IP换成自己的IP
拿出我们需要设置代理的Android手机，找到wifi，长按或者点击查看wifi详情（各类型Android手机方法大同小异，多进行尝试）
然后进入到wifi详情页面
image.png
把代理一栏从无改为手动，并在里面输入刚才看到的IP和端口号，例如：192.168.1.x（x为你自己的号码，每个人都不一样）
image.png
输入自己的主机名和端口
点击保存或者连接，如果没有则直接返回退出
然后再次进入详情，看看代理一栏是不是已经变成了刚才自己输入的ip和端口号，如果显示则代表代理设置成功。
如果继续显示代理为无，则代表刚才你没有保存，再试一遍
记得如果你不需要用手机设置代理了，把代理记得关掉，不然会影响你浏览某些网页和应用
这时，手机设置好了，打开你需要进行调试的app，你会发现电脑上charles出现一条提示：
第一个箭头标注的是你的手机ip地址。你需要允许该手机的连接，点击“Allow”
这个提示，只会在手机首次链接电脑的时候出现，同意后后面则不会出现。
注意，如果你的手机链接时没有出现该弹窗，去检查自己刚才手机端的代理是否设置错误
如果设置没有问题，可选择“Proxy->Access Control Settings”手动进入Charles的设置选项，添加当前手机的IP
手机IP查看方式：
进入wifi详情
好了，到此为止，你基本已经完成了大半的设置，基本可以正常进行抓包了
但是，部分手机还需要安装下载一个手机证书才能正常使用，安装方法如下：
同样点击Help->SSL-Proxying->install charles Root ....Browser，查看手机证书下载
image.png
chls.pro/ssl
这一段是告诉你，需要你去浏览器下载一个证书
此时你打开手机默认浏览器，然后在网址栏里输入
chls.pro/ssl
记得，此时你一定要是代理开启状态
你会得到一个文件下载提示，下载后，在浏览器下载内容里找到刚才那个crt文件，打开后进入命名页面
可自定义名称，或者不改。点击保存。部分手机此时会让你输入手机锁屏密码，或者让你设置锁屏，照做就可以了。
image.png
image.png
image.png
image.png
image.png
出现如下提示代表安装成功。
我演示使用的手机是oppo，部分Android手机证书会存在安装问题，比如小米好像需要手动安装，大家可自行百度证书安装方法，
我后续会进行更新特殊情况的说明
五、查看charles请求
到此，你的设备和Charles就建立了连接，可以尝试在设备上访问一个地址或者app，在Charles左侧视图就能实时看到请求啦~
Charles是通过将自己设置成代理服务器来完成抓包的，勾选系统代理后，本地系统（如果通过浏览器发送请求）发送出去的请求都能被截取下来。因此，如果想只抓取手机APP发送的请求的话，可以不勾选Windows Proxy选项，这样在测试时就不会被本机Http请求所干扰。
也就是，去掉这个勾选的状态
image.png