上一篇我们已经介绍过如何在电脑端安装、配置Charles，以及手机端的配置，接下来我们介绍一下Charles的界面。

一、菜单栏

Charles 的主菜单包括：File、Edit、View、Proxy、Tools、Window、Help。用的最多的主菜单分别是 Proxy 和 Tools。

1、Proxy菜单

Charles 是一个 HTTP 和 SOCKS 代理服务器。代理请求和响应使 Charles 能够在请求从客户端传递到服务器时检查和更改请求，以及从服务器传递到客户端时的响应。下面主要介绍 Charles 提供的一些代理功能。Proxy 菜单的视图如下图所示：

[图片上传失败...(image-3a4f5b-1747483478515)]

Proxy 菜单包含以下功能：

• Start/Stop Recording：开始/停止记录会话。

• Start/Stop Throttling：开始/停止节流。

• Enable/Disable Breakpoints：开启/关闭断点模式。

• Recording Settings：记录会话设置。

• Throttle Settings：节流设置。

• Breakpoint Settings：断点设置。

• Reverse Proxies Settings：反向代理设置。

• Port Forwarding Settings：端口转发。

• Windows Proxy：记录计算机上的所有请求。

• Proxy Settings：代理设置。

• SSL Proxying Settings：SSL 代理设置。

• Access Control Settings：访问控制设置。

• External Proxy Settings：外部代理设置。

• Web Interface Settings：Web 界面设置。

Recording Settings(记录会话设置)

Recording Settings 和 Start/Stop Recording 配合使用，在 Start Recording 的状态下，可以通过 Recording Settings 配置 Charles 的会话记录行为。Recording Settings 的视图如下图所示：

[图片上传失败...(image-88765c-1747483478515)]

Recording Settings 有 Options、Include、Exclude 三个选项卡：

Options：通过 Recording Size Limits 限制记录数据的大小。当 Charles 记录时，请求、响应头和响应体存储在内存中，或写入磁盘上的临时文件。有时，内存中的数据量可能会变得太多，Charles 会通知您并停止录制。在这种情况下，您应该清除 Charles 会话以释放内存，然后再次开始录制。在录制设置中，您可以限制 Charles 将记录的最大大小; 这根本不会影响你的浏览，Charles 仅会停止录制。

Include：只有与配置的地址匹配的请求才会被录制。

Exclude：只有与配置的地址匹配的请求将不会被录制。

Include 和 Exclude 选项卡的操作相同，选择 Add，然后填入需要监控的Procotol、Host 和 Port等信息，这样就达到了过滤的目的。如下图所示：

[图片上传失败...(image-1164c2-1747483478515)]

还有一种方法就是在一个请求网址上右击选择 Focus，然后其他的请求就会被放到一个叫 Other Host 的分类里面，这样也达到了过滤的目的。

Throttle Settings(节流设置)

Throttle Settings 和 Start/Stop Throttling 配合使用，在 Start Throttling 的状态下，可以通过 Throttle Settings 配置 Charles 的网速模拟配置。Throttle Settings 的视图如下图所示：

[图片上传失败...(image-de7827-1747483478515)]

勾选 Enable Throttling 启用网速模拟配置，在 Throttle Preset 下选择网络类型即可，具体设置可以根据实际情况自行设置。如果只想模拟指定网站的慢速网络，可以再勾选上图中的 Only for selected hosts 项，然后在对话框的下半部分设置中增加指定的 hosts 项即可。

Throttle Settings 视图中的选项含义如下：

• Bandwidth：带宽

• Utilistation：利用百分比

• Round-trip：往返延迟

• MTU：字节

Breakpoint Settings(断点设置)

Breakpoint Settings 和 Enable/Disable Breakpoints 配合使用，在 Enable Breakpoints 的状态下，可以通过 Breakpoint Settings 配置 Charles 的断点模式。Breakpoint Settings 的视图如下图所示：

[图片上传失败...(image-abb438-1747483478515)]

勾选 Enable Breakpoints 启用断点模式，选择 Add，然后填入需要监控的Scheme、Procotol、Host 和 Port 等信息，这样就达到了设置断点的目的。然后可以来观察或者修改请求或者返回的内容，但是在这过程中需要注意请求的超时时间问题。或者可以在某个想要设置断点的请求网址上右击选择 Breakpoints 来设置断点。

二、工具栏导航

image

工具导航栏中提供了几种常用工具：

• [图片上传失败...(image-df03c-1747483478513)]

  ：清除捕获到的所有请求

• [图片上传失败...(image-f5a209-1747483478513)]

  ：红点状态说明正在捕获请求，灰色状态说明目前没有捕获请求。

• image

  ：开启或关闭SSL Proxying。

• [图片上传失败...(image-96e7a1-1747483478513)]

  ：灰色状态说明是没有开启网速节流，绿色状态说明开启了网速节流。

• [图片上传失败...(image-1dec32-1747483478513)]

  ：灰色状态说明是没有开启断点，红色状态说明开启了断点。

• [图片上传失败...(image-226270-1747483478513)]

  ：编辑修改请求，点击之后可以修改请求的内容。

• [图片上传失败...(image-589e22-1747483478513)]

  ：重复发送请求，点击之后选中的请求会被再次发送。

• [图片上传失败...(image-6bd127-1747483478513)]

  ：验证选中的请求的响应。

• [图片上传失败...(image-da83-1747483478513)]

  ：常用功能，包含了 Tools 菜单中的常用功能。

• [图片上传失败...(image-f9fbff-1747483478513)]

  ：常用设置，包含了 Proxy 菜单中的常用设置。

Charles 主要提供两种查看封包的视图，分别名为 Structure 和 Sequence。

• Structure： 此视图将网络请求按访问的域名分类（树状图）。

• Sequence： 此视图将网络请求按访问的时间排序（列表）。

使用时可以根据具体的需要在这两种视图之前来回切换。请求多了有些时候会看不过来，Charles 提供了一个简单的 Filter 功能，可以输入关键字来快速筛选出 URL 中带指定关键字的网络请求

<pre class="md-fences md-end-block" lang="tex" contenteditable="false" cid="n156" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: monospace, monospace; font-size: 0.9em; white-space: pre; display: block; break-inside: avoid; text-align: left; background: var(--code-block-bg-color); background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">对于某一个具体的网络请求，你可以查看其详细的请求内容和响应内容。如果请求内容是POST的表单，Charles 会自动帮你将表单进行分项显示。如果响应内容是 JSON 格式的，那么 Charles 可以自动帮你将 JSON 内容格式化，方便你查看。如果响应内容是图片，那么 Charles 可以显示出图片的预览。</pre>

三、请求的详细介绍

[图片上传失败...(image-3d0cca-1747483478514)]

首先我们来看一下常用的几个选项：Overview：会展示该请求的一个大体情况,例如：请求头，请求响应结束时间，请求开始时间以及自己的notes等

content：如上图所示的该请求的具体内容和服务器的相应内容（配合下面的导航栏进行查看该请求的具体内容header,cookies&&选择呈现方式form,raw）

summary：也是展示一个该请求的大体资源分布情况。例如：服务器响应了多长时间，host是什么等等

chart：以表格形式告诉我们一个响应时间的分布情况。

notes：已经很清楚了，点击之后自己可以对该请求记录一些东西，方便后续查看该接口的用途，可在overview中查看，如下图所示

上述该api的服务器的响应内容（只有在请求中选择content时才可以看到响应内容）

[图片上传失败...(image-6cb0a5-1747483478514)]

绿色区展示的是请求相应内容。同样，是点击导航栏会展示响应内容的详细情况。

• header：响应的头信息

• text：文本形式展示响应内容

• hex(16进制)和compressed（压缩）一般不予查看

• json：以json格式查看响应内容内容，简单明了

• json text：将json格式的内容展开书写

• raw：详情内容的详细情况