简介

正常情况下，Chrome DevTool已经满足了日常web开发的需求，但是有的特性：编辑request参数、重定向request请求资源、编辑response数据，使用ChromeDevTool就感觉力不从心啦，而且查看和调试移动端资源时候Chrome也并不好用。

使用charles可以做这些事情: - 抓取 http 和 https 的请求和响应，这是最常用的。 - 重发网络请求，方便后端调试。 - 修改网络请求参数（客户端向服务器发送的时候，可以修改后再转发出去）。 - 网络请求的截获和动态修改。 - 支持模拟慢速网络，主要是模仿手机上的2G/3G/4G的访问流程。 - 支持本地映射和远程映射，比如你可以把线上资源映射到本地某个文件夹下，这样可以方便的处理一些特殊情况下的bug和线上调试（网络的css，js等资源用的是本地代码，这些你可以本地随便修改，数据之类的都是线上的环境，方面在线调试）。 - 可以抓手机端访问的资源（如果是配置HOST的环境，手机可以借用host配置进入测试环境）。

安装

去官网下载软件并安装。

配置

charles可以免费试用30天，强烈支持购买正版软件，现提供一种破解方法，用于学习交流，Up主用的是charles  4.2.7。 1、 打开charles ---> help---> register。 2、输入Registered Name:  https://zhile.io 、 License Key:  48891cf209c6d32bf4。 3、打开Proxy ---->点击 maxOS Proxy，即可开始抓浏览器网页请求。

注意，charles一旦开启代理，代理就会被强制修改成charles的，之前设置的代理服务器此时是不能用的。

视图

Charles 提供两种查看抓包的视图，分别名为 Structure 和 Sequence。 -  Structure/结构视图，将网络请求按访问的域名分类，比如某个域名下有n个资源请求，那么所有此域名下的请求都会在这里做一个详细的分类； -  Sequence/序列视图，将网络请求按访问的时间排序，按照你的电脑的发送请求顺序进行。 有时候请求多了会看不过来，Charles 提供了一个简单的 Filter 功能，可以输入关键字来快速筛选出 URL 中带指定关键字的网络请求。

除此上面的方法之外，也可以修改Include的域名和端口。 在 Charles 的菜单栏选择 “Proxy”->”Recording Settings”，然后选择 Include 栏，选择添加一个项目，然后填入需要监控的协议，主机地址，端口号。这样就可以只截取目标网站的封包了;

通常情况下，我们使用方法一做封包过滤，方法二做一些唯一的域名抓包。

方法三：过滤焦点域名 在目标的网络请求上右键，选中focus（此时，该域名已经被设置为一个焦点标记了），然后点击fillter后面的focused来筛选你的做的focus标记文件。

这种方法是抓取特定的网络请求，你设置的焦点域名在”focused Hosts”里面可以查看和管理。

这种模式下的展现更加人性化，当你设置某个域名为焦点域名的时候，会把当前域名单独显示在上面，而其它的非焦点域名，都会在other Hosts里显示。

界面

Contents是最常用的一个标签，其中上半部分是请求，下半部分是响应：请求部分中，会根据请求的内容，而分为很多项，比如如果是表单提交，还会有form的选项供你查看提交的内容（表格图形化的方式），最后一项”Raw”是未经处理的请求信息，可以理解为，raw左侧的所有项目都是对raw信息的拆分和美化，以便直观查看。

【解决Contents乱码问题】

Proxy

charles有强大的代理功能，总的来看大概可以分为5大块：

一、常用功能开关区

stop/start recording        开始/暂停记录
stop/start throttling        开始/暂停节流
enable/disable breakpoints     启用/禁用断点

二、常用功能设置区

recording settings            记录设置
throttle settings            节流设置
breakpoint settings        断点设置

三、反向代理和端口转发区域

reverse proxies            反向代理
port forwarding            端口转发

四、charles的代理身份配置区域

macOS Proxy               开启整个系统通过charles作为代理

五、常用的高级设置区

proxy setting            代理设置
ssl proxy setting            ssl代理设置
access control setting        访问控制设置
extornal proxy setting        外部代理设置
web interface setting        Web界面设置

【stop/start recording和recording settings】 是常用的功能，这里需要注意后面的session1代表当前你将要操作的会话窗口，就是切换是否进行捕获记录。

限制记录大小
限制记录的历史
显示websocket的设置

下面的Imporet和export分别是资源的导入和导出，类似PSD文件一样，详细的储存，方便直接导入使用；但是仅仅是储存当前的设置。 include、exclude是对特定域名进行抓包。

【stop/start throttling 、throttling settings】 暂时开始慢网速，这个手机上2G/3G/4G的速度，这个对应工具栏的小乌龟图标。

一般选择多少网速就可以了，下面默认即可。 注意限速是指向下兼容，如果你网速很差，你选个100Mbps的，也是没用的。

【enable/disable breakpoints 、breakpoints settings】 有时候对于一些特殊请求在发往服务器之前想要修改一些参数，或者在服务器响应完成之后修改响应信息，此时可以使用Charles的断点功能，设置断点之后，当有网络请求的时候Charles会自动跳转到断点处，此时我们就能进行相关的修改。

【反向代理】 正向代理和反向代理的区别： 正向代理：是代理客户端，为客户端收发请求，使真实客户端对服务器不可见；在客户这一端的，替客户收发请求（类似现在正常使用的charles的功能）。 反向代理：是代理服务器，为服务器收发请求，使真实服务器对客户端不可见；在服务器这端的，替服务器收发请求，应用场景常见是就是请求分发到多台服务器的负载均衡应用。

反向代理的设置 本地端口: 本地主机上的端口创建反向代理。该字段可能会自动填充一个可用的端口。如果有另一个应用程序使用该端口，则在反向代理启动时将收到一条警告消息。 例如。给定本地端口8001，将连接到http:// localhost:8001/

远程主机和端口: 作为反向代理的目的地的远程主机的主机名或IP地址和端口。远程端口默认为80，这是HTTP的默认端口。 例如。输入http://www.jianshu.com的远程主机和80的远程端口，然后http:// localhost:8001 /将像是已连接到http://www.jianshu.com。

重写重定向： 重定向远程服务器的响应将被重写以与反向代理源地址相匹配。默认为开。 远程服务器的重定向响应是完全限定的URL，即使它们在同一网站内。 如果重定向到远程服务器地址，则需要将其重写为反向代理本地地址，否则客户端将使用重定向URL到远程主机，因此不再通过反向代理连接。

保留主机头: 仅当具有特定要求时，才需要保留主机头;普通使用的时候没有必要使用的。

监听特定地址: 如果要指定本地地址以侦听反向代理，则可以启用此选项并在此处输入IP地址。如果要在同一台机器上运行多个网络服务，但在同一台机器上的不同IP地址上运行，则此功能非常有用。 禁用此选项时，反向代理将绑定到所有可用的本地地址。

【端口转发】 端口转发（Port forwarding），有时被叫做隧道，是安全壳(SSH) 为网络安全通信使用的一种方法。端口转发是转发一个网络端口从一个网络节点到另一个网络节点的行为，其使一个外部用户从外部经过一个被激活的NAT路由器到达一个在私有内部IP地址（局域网内部）上的一个端口。 端口转发能够将本地TCP或UDP端口透明地转发到远程主机和端口。 所有在端口的请求和回复可能会记录在charles。 端口转发流量记录在Charles中作为socket：// host：port / URL 如果有要使用Charles监控的非HTTP应用程序，则端口转发非常有用。 将端口创建到原始目标服务器，然后将客户端应用程序连接到本地端口; 端口转发对客户端应用程序是透明的，并能够查看Charles先前可能无法使用的流量。 例子： 可以将本地主机上的TCP端口2525转发到远程主机上的端口25， 然后当连接到localhost时：2525 Charles将透明地将流量转发到远程主机，就像直接连接一样，会看到在Charles中记录的流量为socket：// localhost：2525 /，该功能，我进行前端调试用的并不多。

【Proxy Settings】 设置的主界面如下：

动态端口： 启用动态端口选项来监听动态端口，每次启动时会进行查询，会赋予合理的端口，这样可以避免与计算机上可能运行的其他网络服务的冲突。

透明代理： 透明代理使Charles能够访问不支持HTTP代理服务器的客户端，或者不知道他们正在使用HTTP代理服务器，例如TCP / IP连接由路由器或防火墙重定向到Charles。这里可以被手机连接。 手机连接的时候，http代理那里写选手动，并填写此时charles的本机地址和上面设置的8888端口即可。

【SSL Proxying Settings】 通过SSL代理，您的浏览器或应用程序将收到由Charles签名的证书，而不是来自远程Web服务器的原始证书。这将在您的浏览器或应用程序中触发警告，某些应用程序实际上可能会拒绝该连接。

【Access Control Settings 】 访问账户设置，连接到charles时的一些配置，控制确定谁可以使用charles。

本机是永远都可以访问的，默认的访问控制列表如果是空的，意味着除了这台电脑以外，没有任何设备可以使用charles。如果你把下面的提示开始，未经授权的设备连接时候会提示你是否允许。

【External Proxy】  外部代理设置，有时候可能需要使用网络上的代理服务器才能访问Internet，上面已经提到了，是没法连接代理服务器的同时，让charles继续抓包的，在这种情况下，需要为Charles配置外部代理。

charles常用的还有其强大的工具功能，可以见我的其他文章，抓包工具charles工具类

抓包工具charles抓移动端。