Charles 主要提供两种查看封包的视图,分别名为

  • Structure
    • Structure/结构视图,将网络请求按访问的域名分类,比如某个域名下有n个资源请求,那么所有此域名下的请求都会在这里做一个详细的分类;
  • Sequence
    • Sequence/序列视图,将网络请求按访问的时间排序,按照你的电脑的发送请求顺序进行。

Charles——charles 主界面的介绍_chrome

 

 

contents是最常用的一个标签,其中上半部分是请求,下半部分是响应;

请求部分中,会根据请求的内容,而分为很多项;

比如如果是表单提交,还会有form的选项供你查看提交的内容(表格图形化的方式),

最后一项”Raw”是未经处理的请求信息,可以理解为,raw左侧的所有项目都是对raw信息的拆分和美化,以便直观查看;

当然响应区域的raw和其它项目的关系也是一样,响应部分的Raw是接收到的全部未处理信息;

如果响应内容是 JSON 格式的,那么 Charles 可以自动帮你将 JSON 内容格式化,方便你查看。

如果响应内容是图片,那么 Charles 可以显示出图片的预览。

 

 

 

顶部菜单栏

Charles——charles 主界面的介绍_端口转发_02

 

 

 

 

charles 右键菜单

 

在网址/域名上右键

可以获得下面菜单

Charles——charles 主界面的介绍_反向代理_03

 

 

  • 区域 1 基本操作 :基本的URL复制,文件保存,以及选中文件内搜索
  • 区域 2 重写操作 :重写发送请求(调用接口合适),或者发到gitlist里
  • 区域 3 查看区 :排序之类的
  • 区域 4 设置关注 :可以设置哪些你关心的或者需要忽略的
  • 区域 5 清除区 :垃圾清理使用
  • 区域 6 工具区 :对应常见工具的入口
  • 区域 7 映射区 :把文件映射到本地或者原创URL

overview区域contents区域 右键

右键可以获得下面操作的入口

Charles——charles 主界面的介绍_反向代理_04

 

 

原理类似上面介绍的,可以对请求和响应的查看格式进行设置;

在Chart区域右键

这里没啥介绍的,就是复制和储存图表信息的

 

 

 

 

charles overvoew

这里是请求文件的概览

Charles——charles 主界面的介绍_客户端_05

 

 Charles——charles 主界面的介绍_代理服务器_06

 

 

 

 

charles 文件菜单总结

一、file(文件菜单)

Charles——charles 主界面的介绍_代理服务器_07

 

 

需要注意的是

“导入”和”导出”这个功能在和别人沟通的时候用,

比如你向第三方工具/类库开发人员求助某个功能,或者有BUG怎么避开;

他们一般会让你提供抓包到时候收到的文件,或者应用场景之类的;

你可以导出你捕捉到的信息,发送给别人(类似PS里的PSD源文件),但是仅仅是储存当前的设置,其实我认为并没有什么鸟用;其它窗口的Imporet和export分别代表当前的配置储存和导出,碰到就不再复述了;

别人收到后,在charles里打开就可以看到同样的抓包信息了,方便远程分析和交流;

 

 

 

charles 创建新会话

使用方式1:File -> new session

使用方式2: Ctrl + N

这不是新的请求意思,是再开一个标签页,进行抓包的;

Charles——charles 主界面的介绍_端口转发_08

 

 

 

 

 

 

charles 编辑菜单总结

Charles——charles 主界面的介绍_客户端_09

 

 

 

 

 

charles 查找

Charles——charles 主界面的介绍_代理服务器_10

 

 

 

 

 

这个还是非常常用的;需要了解

查找需要了解的关键字是:

  • 查找的内容
    • 正则匹配复杂多数据
    • 大小写匹配
    • 全文匹配
  • 查找范围
    • 当前会话
    • 当前路径
    • 自定义路径
  • 再什么位置查找
    • 请求 URL
    • 请求头
    • 请求主体
    • 响应头
    • 响应主体
  • 查找结果
    • 上下定位

 

 

 

charles 偏好设置

Charles——charles 主界面的介绍_端口转发_11

 

 Charles——charles 主界面的介绍_chrome_12

 

 Charles——charles 主界面的介绍_chrome_13

 

 Charles——charles 主界面的介绍_端口转发_14

 

 

 

 

 

 

charles 视图菜单总结

charles 视图菜单总结

Charles的视图菜单里的东西其实是非常常用的功能;

但是我们一般是不需要从这里点进来的;

Charles——charles 主界面的介绍_端口转发_15

 

 

里面,无非是查看的视图结构(按照域名和按照访问时间)

然后是一些概览之类的;如下图

Charles——charles 主界面的介绍_代理服务器_16

 

 

 

 

 

charles 结构体

Charles 主要提供两种查看封包的视图,分别名为

  • Structure/结构视图
  • Sequence/序列视图

 

Structure/结构视图

将网络请求按访问的域名分类,比如某个域名下有n个资源请求,那么所有此域名下的请求都会在这里做一个详细的分类

Charles——charles 主界面的介绍_反向代理_17

 

 

 

 

 

Sequence/序列视图

将网络请求按访问的时间排序,按照你的电脑的发送请求顺序进行

Charles——charles 主界面的介绍_代理服务器_18

 

 

 

 

charles 高亮Hosts

ocus Host是焦点域名的;这里配置好的可以在结构视图中,单独拎出来显示;

如下图,在把zhubangbang.com设为焦点域名,在视图中是下图这么展示的;

Charles——charles 主界面的介绍_客户端_19

 

 

在序列视图的时候,是按照下面这么展示的;

选择focued后,就会只保留你的焦点域名;

Charles——charles 主界面的介绍_chrome_20

 

 

 

 

 

charles中proxy菜单的介绍

Charles——charles 主界面的介绍_chrome_21

 

 

 

这里其实都是常用的功能;

大概可以分为5个大块,看下分割线就可以了;

一、常用功能开关区

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

二、常用功能设置区

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

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

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

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

  • windows proxy                Windows代理(开启整个系统通过charles作为代理)
  • mozilla firefox proxy        火狐代理

五、常用的高级设置区

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

显示websocket的设置;

 

 

 

 

charles 开始/暂停记录

 

1.1、 stop/start recording 和 2.1 recording settings

是常用的功能了;这里需要注意就是后面的session1代表当前你将要操作的会话窗口;就是切换是否进行捕获记录;

注意:这里的开关只是是否记录信息的开关,并不是charles的开关;也就是说如果你stop recording 那么只是界面上不再抓取信息了,charles还是一直会工作的;

如果你想实现,你可以在window菜单喜爱 active connerctions 查看当前活动的连接信息,你访问的时候,这里会一直记录的;

Charles——charles 主界面的介绍_反向代理_22

 

 

 

这个功能是和下面是常用工具栏中一个”类似单选框”的图标是一个功能;

Charles——charles 主界面的介绍_反向代理_23

 

 

限制记录大小;限制记录的历史

Charles——charles 主界面的介绍_端口转发_24

 

 

设置记录的选项

Charles——charles 主界面的介绍_反向代理_25

 

 

这个Include/包含设置,如果你用的不恰当,很可能就把你自己给坑了;

如果你些了百度的域名进入,那就是charles值抓取百度的访问记录;其他域名的统统跳过;你可能感觉这并没有什么问题,毕竟这可以让你集中注意力的;但是如果你忘记关了,或许过了某一天,你又开始进行抓包设置了,当时你会看到charles虽然打开的,你也开了star recording,而且也可以正常访问;但是记录面板屁都没有;如果你遇到这种情况,你要记住,你遇到的问题可能就是设置了这里;因为只有你设置的才有记录信息啊;个人非常不建议这么用,你可以通过焦点域名来规避可能存在的这种问题;

如果你因为特殊原因不得不使用这里的设置,那么设置前你一定要清楚,你下次再次进入的时候可能会存在没有记录信息的情况;

“只有与你设置的信息才会记录,如果列表为空,除非在exclude里有排除信息,否则将记录所有请求”

下面这个选项就是排除的;

如果你把这里的设置了排除www.baidu.com域名下的所有设置,那么当你访问www.baidu.com的时候,就不会被记录

 

 

Charles——charles 主界面的介绍_端口转发_26

 

 同时在include和exclude里设置www.baidu.com ,那么该域名会被屏蔽;

 

 

 

charles 开始/暂停模拟慢网速

charles 开始/暂停模拟慢网速

1.2、 stop/start throttling 和 2.2 throttling settings

暂时开始慢网速,这个说实话,我自己是不常用的,也就偶尔上线测试看下,或者查看可能存在的加载导致错误,很多次上线钱我甚至都忘记看了;

这个说的直白点,就是模拟手机上2G/3G/4G的速度;让你感受下慢网速的蛋疼之处,从而逼迫你优化你的代码;嗯,就是这样的功能;

同时需要注意你的慢速设置,当你不用的时候请记得关闭它,否则访问速度就是你设置的限制速度。。

这个对应工具栏的的小乌龟图标,

Charles——charles 主界面的介绍_客户端_27

 

 设置如下

Charles——charles 主界面的介绍_代理服务器_28

 

 

一般选择多少网速就可以了,下面默认即可;

注意如果你本身网速快;是限速;如果你网速low,你选个100Mbps的,其实也到不了的;

 

 

 

 

charles 启用/禁用断点

1.3、 enable/disable breakpoints 和 2.3 breakpoints settings

断点设置是常用的了,没啥好说的了,可以设置你需要断点的域名等;

Charles——charles 主界面的介绍_端口转发_29

 

 

 

 

正向代理和反向代理的区别:

正向代理:是代理客户端,为客户端收发请求,使真实客户端对服务器不可见;在客户这一端的,替客户收发请求(类似现在正常使用的charles的功能)

反向代理:是代理服务器,为服务器收发请求,使真实服务器对客户端不可见;在服务器这端的,替服务器收发请求,应用场景常见是就是请求分发到多台服务器的负载均衡应用。

一句话就是:

正向代理:代理端代理的是客户端。

反向代理:代理端代理的是服务端。

反向代理的设置

本地端口;

本地主机上的端口创建反向代理。该字段可能会自动填充一个可用的端口。如果有另一个应用程序使用该端口,则在反向代理启动时将收到一条警告消息。

例如。给定本地端口8001,您将连接到http:// localhost:8001 /

远程主机和端口

作为反向代理的目的地的远程主机的主机名或IP地址和端口。远程端口默认为80,这是HTTP的默认端口。

例如。输入 www.axihe.com的远程主机和80的远程端口,然后http//localhost8001 /将像您已连接到https://www.axihe.com/

 

Charles——charles 主界面的介绍_反向代理_30

 

 

 

重写重定向

重定向远程服务器的响应将被重写以与反向代理源地址相匹配。默认为开。
远程服务器的重定向响应是完全限定的URL,即使它们在同一网站内。

如果重定向到远程服务器地址,则需要将其重写为反向代理本地地址,否则客户端将使用重定向URL到远程主机,因此不再通过反向代理连接。

保留主机头

Host HTTP标头从传入请求不变地传递,而不是正常重写主机头以匹配反向代理远程主机。默认为关闭。

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

监听特定地址

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

禁用此选项时,反向代理将绑定到所有可用的本地地址。

 

 

charles 端口转发

端口转发

端口转发(Port forwarding),有时被叫做隧道,是安全壳(SSH) 为网络安全通信使用的一种方法。端口转发是转发一个网络端口从一个网络节点到另一个网络节点的行为,其使一个外部用户从外部经过一个被激活的NAT路由器到达一个在私有内部IP地址(局域网内部)上的一个端口。

Charles——charles 主界面的介绍_chrome_31

 

 

端口转发使您能够将本地TCP或UDP端口透明地转发到远程主机和端口。 所有在端口的请求和回复可能会记录在查尔斯。

端口转发流量记录在Charles中作为 socket//hostport/URL

如果您有要使用Charles监控的非HTTP应用程序,则端口转发非常有用。

将端口创建到原始目标服务器,然后将客户端应用程序连接到本地端口;

端口转发对客户端应用程序是透明的,并使您能够查看Charles先前可能无法使用的流量

例子

您可以将本地主机上的TCP端口2525转发到远程主机上的端口25。

然后当您连接到localhost时:2525 Charles将透明地将流量转发到远程主机,就像您直接连接一样。

您会看到在Charles中记录的流量为 socket//localhost2525 /。

当然了,这些功能我平时用不多;

 

 

将charles设置为chrome的代理

需要注意的是,Chrome 和 Firefox 浏览器并不一定使用的就是本机,可能是一些代理工具,而 Charles 是通过将自己设置成代理服务器来完成资源记录的,所以如果你的charles无法截取 Chrome 和 Firefox 浏览器的网络请求内容,需要在浏览器里做下修改。在 Chrome 中设置成使用系统的代理服务器设置即可,或者直接将代理服务器设置成 127.0.0.1:8888 也可达到相同效果。

Charles——charles 主界面的介绍_反向代理_32

 

 备注:如果您的chrome有用过改HOST的扩展工具(比如你用了 Host Switch Plus 这个扩展工具),请暂时关闭;否则chrome会通过你的扩展控制,不能使用charles;你的chrome中可能会看到您的网络代理设置是由扩展程序管理的。 这种的提示;如果你有修改HOST或者用host进行FQ的需求,我更加推荐你使用 SwitchHosts 这个工具;

 

 

 

charles 代理设置

charles的代理身份配置区域

这里应该没啥好说的了,

window/MAXCos proxy 是charles的代理启用开关;

如果你选中,则表示电脑使用charles作为代理(这里就是正向代理),取消同理;

因为为不用火狐浏览器,下面也是一样的道理,就不做说明了;

注意;如果你使用的是chrome,并且有用chrome的host相关扩展工具;

Charles——charles 主界面的介绍_chrome_33

 

 

请暂时关闭你的chrome扩展,并把代理设置为本机,否则charles是捕获不到的;

如上图,此时为使用了Host Switch Plus 这个host管理工具,此时为在chrome里是所有访问,都不会出现在charles里;

(如果你只想看到手机上的访问,电脑的chrome全部不捕获,可以使用扩展工具的方法,暂时避免,可以让你更集中);

关闭扩展程序后,默认即可,或者在 Chrome 中设置成使用系统的代理服务器设置即可,或者直接将代理服务器设置成 127.0.0.1:8888 也可达到相同效果。

 

proxy setting

Charles——charles 主界面的介绍_代理服务器_34

 

 

动态端口

启用动态端口选项来监听动态端口,每次查询启动时选择。这样可以避免与计算机上可能运行的其他网络服务的冲突,包括Charles的其他实例(如果是共享计算机)如果你开的端口很多,搞到你自己都记不清楚了,那么推荐你用这个;但是我都是写好一个端口的,比如代理写8888,别的就不会监听这个端口了,而且为了手机方便连接,都是使用指定好的端口。

注意;如果你charles设置了8888的端口,别的服务就不能再使用这个端口号了,否则冲突会发生意外的错误;

透明的HTTP代理

透明代理使Charles能够支持不支持HTTP代理服务器的客户端,或者不知道他们正在使用HTTP代理服务器,例如TCP / IP连接由路由器或防火墙重定向到Charles。这里可以被手机连接;

手机连接的时候,http代理那里写=选手动,并填写此时charles的本机地址和上面设置的8888端口即可;

options 里 主要是设置 绕过代理

Charles——charles 主界面的介绍_客户端_35

 

 

这里可以设置您的浏览器/操作系统遇到哪些域名的时候,使用默认而不用Charles;配置的列表使用空格或逗号分隔,并在Charles配置其代理设置时注入浏览器。 有关详细信息,请参阅操作系统和浏览器特定选项卡。

后面系统代理和火狐浏览器的就不写了,主要是一些开关和配置,因为也不用火狐,都默认就可以了;

 

 

 

 

 

charles SSL代理设置

这里最常用的设置就是第一个ssl proxying,这里记录了需要捕获哪些ssl的信息;

注意,如果你不在这里设置,虽然你安装了ssl的charles证书,你依然无法正常捕获;

Charles——charles 主界面的介绍_端口转发_36

 

 

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

具体请查看 http://www.charlesproxy.com/ssl 的说明,或者“帮助”菜单中的“SSL代理”菜单。

为在这里设置了通配符,表示为要捕获记录所有ssl协议的请求和响应;

具体请查看 Charles的HTTPS抓包方法及原理;

 

 

 

charles 访问控制设置

access control settings 访问账户设置

这里可以配置连接到charles时的一些配置;

Charles——charles 主界面的介绍_代理服务器_37

 

 

这个访问控制确定谁可以使用这个charles,

本机是永远都可以访问的,默认的访问控制列表如果是空的;

意味着除了这台电脑以外,没有任何设备可以使用charles。

如果你把下面的提示开始,未经授权的设备连接时候会提示你是否允许;

类似下面这种提示框

Charles——charles 主界面的介绍_客户端_38

 

 

当你手机访问的时候,电脑会提示的;

这里设置后的host,连接时候是无需确认的;

 

 

 

 

charles 外部代理设置

有时候您可能需要使用网络上的代理服务器才能访问Internet。

在这种情况下,您需要为Charles配置外部代理。

您可以为每种代理类型配置身份验证信息。

Charles支持基本身份验证和NTLM身份验证。对于NTLM身份验证,您可以输入“域名”选项。

如果您没有配置身份验证和外部代理请求认证,Charles会将验证请求传递给浏览器,

就像Charles本身正在请求身份验证一样。

排除列表

您可以输入绕过外部代理的loacation列表。

该列表是空格分隔的,每个location都是一个主机或ip地址与可选端口匹配(例如hostname:port),并且支持通配符。
请注意:之前的Charles自动在排除location列表中进行了前缀匹配。

在Charles 3.5中更改了支持全局通配符的系统。

Charles——charles 主界面的介绍_客户端_39

 

 

 

 

 

 

charles Web界面设置

charles Web界面设置

Web Inerface

Web界面可以让您使用Web浏览器控制查询,您可以访问 http://control.charles

的Web界面,当查询运行时,您可以启用此功能并配置下面的访问控制;

 

首先你必须要开启web inter face,否则你访问

http://control.charles

的时候就提示你没有开启;如下的提示;

33 Charles Web Interface

The Web Interface is disabled. You can enable it in the Web Interface Settings in the Proxy menu.

Charles——charles 主界面的介绍_客户端_40

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Charles——charles 主界面的介绍_端口转发_41

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Charles——charles 主界面的介绍_chrome_42

 

 

Charles——charles 主界面的介绍_代理服务器_43