上一篇我們已經(jīng)介紹過如何在電腦端安裝、配置Charles，以及手機(jī)端的配置，接下來我們介紹一下Charles的界面。

一、菜單欄

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

1、Proxy菜單

Charles 是一個 HTTP 和 SOCKS 代理服務(wù)器。代理請求和響應(yīng)使 Charles 能夠在請求從客戶端傳遞到服務(wù)器時檢查和更改請求，以及從服務(wù)器傳遞到客戶端時的響應(yīng)。下面主要介紹 Charles 提供的一些代理功能。Proxy 菜單的視圖如下圖所示：

[圖片上傳失敗...(image-3a4f5b-1747483478515)]

Proxy 菜單包含以下功能：

• Start/Stop Recording：開始/停止記錄會話。

• Start/Stop Throttling：開始/停止節(jié)流。

• Enable/Disable Breakpoints：開啟/關(guān)閉斷點(diǎn)模式。

• Recording Settings：記錄會話設(shè)置。

• Throttle Settings：節(jié)流設(shè)置。

• Breakpoint Settings：斷點(diǎn)設(shè)置。

• Reverse Proxies Settings：反向代理設(shè)置。

• Port Forwarding Settings：端口轉(zhuǎn)發(fā)。

• Windows Proxy：記錄計算機(jī)上的所有請求。

• Proxy Settings：代理設(shè)置。

• SSL Proxying Settings：SSL 代理設(shè)置。

• Access Control Settings：訪問控制設(shè)置。

• External Proxy Settings：外部代理設(shè)置。

• Web Interface Settings：Web 界面設(shè)置。

Recording Settings(記錄會話設(shè)置)

Recording Settings 和 Start/Stop Recording 配合使用，在 Start Recording 的狀態(tài)下，可以通過 Recording Settings 配置 Charles 的會話記錄行為。Recording Settings 的視圖如下圖所示：

[圖片上傳失敗...(image-88765c-1747483478515)]

Recording Settings 有 Options、Include、Exclude 三個選項卡：

Options：通過 Recording Size Limits 限制記錄數(shù)據(jù)的大小。當(dāng) Charles 記錄時，請求、響應(yīng)頭和響應(yīng)體存儲在內(nèi)存中，或?qū)懭氪疟P上的臨時文件。有時，內(nèi)存中的數(shù)據(jù)量可能會變得太多，Charles 會通知您并停止錄制。在這種情況下，您應(yīng)該清除 Charles 會話以釋放內(nèi)存，然后再次開始錄制。在錄制設(shè)置中，您可以限制 Charles 將記錄的最大大小; 這根本不會影響你的瀏覽，Charles 僅會停止錄制。

Include：只有與配置的地址匹配的請求才會被錄制。

Exclude：只有與配置的地址匹配的請求將不會被錄制。

Include 和 Exclude 選項卡的操作相同，選擇 Add，然后填入需要監(jiān)控的Procotol、Host 和 Port等信息，這樣就達(dá)到了過濾的目的。如下圖所示：

[圖片上傳失敗...(image-1164c2-1747483478515)]

還有一種方法就是在一個請求網(wǎng)址上右擊選擇 Focus，然后其他的請求就會被放到一個叫 Other Host 的分類里面，這樣也達(dá)到了過濾的目的。

Throttle Settings(節(jié)流設(shè)置)

Throttle Settings 和 Start/Stop Throttling 配合使用，在 Start Throttling 的狀態(tài)下，可以通過 Throttle Settings 配置 Charles 的網(wǎng)速模擬配置。Throttle Settings 的視圖如下圖所示：

[圖片上傳失敗...(image-de7827-1747483478515)]

勾選 Enable Throttling 啟用網(wǎng)速模擬配置，在 Throttle Preset 下選擇網(wǎng)絡(luò)類型即可，具體設(shè)置可以根據(jù)實際情況自行設(shè)置。如果只想模擬指定網(wǎng)站的慢速網(wǎng)絡(luò)，可以再勾選上圖中的 Only for selected hosts 項，然后在對話框的下半部分設(shè)置中增加指定的 hosts 項即可。

Throttle Settings 視圖中的選項含義如下：

• Bandwidth：帶寬

• Utilistation：利用百分比

• Round-trip：往返延遲

• MTU：字節(jié)

Breakpoint Settings(斷點(diǎn)設(shè)置)

Breakpoint Settings 和 Enable/Disable Breakpoints 配合使用，在 Enable Breakpoints 的狀態(tài)下，可以通過 Breakpoint Settings 配置 Charles 的斷點(diǎn)模式。Breakpoint Settings 的視圖如下圖所示：

[圖片上傳失敗...(image-abb438-1747483478515)]

勾選 Enable Breakpoints 啟用斷點(diǎn)模式，選擇 Add，然后填入需要監(jiān)控的Scheme、Procotol、Host 和 Port 等信息，這樣就達(dá)到了設(shè)置斷點(diǎn)的目的。然后可以來觀察或者修改請求或者返回的內(nèi)容，但是在這過程中需要注意請求的超時時間問題?；蛘呖梢栽谀硞€想要設(shè)置斷點(diǎn)的請求網(wǎng)址上右擊選擇 Breakpoints 來設(shè)置斷點(diǎn)。

二、工具欄導(dǎo)航

image

工具導(dǎo)航欄中提供了幾種常用工具：

• [圖片上傳失敗...(image-df03c-1747483478513)]

  ：清除捕獲到的所有請求

• [圖片上傳失敗...(image-f5a209-1747483478513)]

  ：紅點(diǎn)狀態(tài)說明正在捕獲請求，灰色狀態(tài)說明目前沒有捕獲請求。

• image

  ：開啟或關(guān)閉SSL Proxying。

• [圖片上傳失敗...(image-96e7a1-1747483478513)]

  ：灰色狀態(tài)說明是沒有開啟網(wǎng)速節(jié)流，綠色狀態(tài)說明開啟了網(wǎng)速節(jié)流。

• [圖片上傳失敗...(image-1dec32-1747483478513)]

  ：灰色狀態(tài)說明是沒有開啟斷點(diǎn)，紅色狀態(tài)說明開啟了斷點(diǎn)。

• [圖片上傳失敗...(image-226270-1747483478513)]

  ：編輯修改請求，點(diǎn)擊之后可以修改請求的內(nèi)容。

• [圖片上傳失敗...(image-589e22-1747483478513)]

  ：重復(fù)發(fā)送請求，點(diǎn)擊之后選中的請求會被再次發(fā)送。

• [圖片上傳失敗...(image-6bd127-1747483478513)]

  ：驗證選中的請求的響應(yīng)。

• [圖片上傳失敗...(image-da83-1747483478513)]

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

• [圖片上傳失敗...(image-f9fbff-1747483478513)]

  ：常用設(shè)置，包含了 Proxy 菜單中的常用設(shè)置。

Charles 主要提供兩種查看封包的視圖，分別名為 Structure 和 Sequence。

• Structure： 此視圖將網(wǎng)絡(luò)請求按訪問的域名分類（樹狀圖）。

• Sequence： 此視圖將網(wǎng)絡(luò)請求按訪問的時間排序（列表）。

使用時可以根據(jù)具體的需要在這兩種視圖之前來回切換。請求多了有些時候會看不過來，Charles 提供了一個簡單的 Filter 功能，可以輸入關(guān)鍵字來快速篩選出 URL 中帶指定關(guān)鍵字的網(wǎng)絡(luò)請求

<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;">對于某一個具體的網(wǎng)絡(luò)請求，你可以查看其詳細(xì)的請求內(nèi)容和響應(yīng)內(nèi)容。如果請求內(nèi)容是POST的表單，Charles 會自動幫你將表單進(jìn)行分項顯示。如果響應(yīng)內(nèi)容是 JSON 格式的，那么 Charles 可以自動幫你將 JSON 內(nèi)容格式化，方便你查看。如果響應(yīng)內(nèi)容是圖片，那么 Charles 可以顯示出圖片的預(yù)覽。</pre>

三、請求的詳細(xì)介紹

[圖片上傳失敗...(image-3d0cca-1747483478514)]

首先我們來看一下常用的幾個選項：Overview：會展示該請求的一個大體情況,例如：請求頭，請求響應(yīng)結(jié)束時間，請求開始時間以及自己的notes等

content：如上圖所示的該請求的具體內(nèi)容和服務(wù)器的相應(yīng)內(nèi)容（配合下面的導(dǎo)航欄進(jìn)行查看該請求的具體內(nèi)容header,cookies&&選擇呈現(xiàn)方式form,raw）

summary：也是展示一個該請求的大體資源分布情況。例如：服務(wù)器響應(yīng)了多長時間，host是什么等等

chart：以表格形式告訴我們一個響應(yīng)時間的分布情況。

notes：已經(jīng)很清楚了，點(diǎn)擊之后自己可以對該請求記錄一些東西，方便后續(xù)查看該接口的用途，可在overview中查看，如下圖所示

上述該api的服務(wù)器的響應(yīng)內(nèi)容（只有在請求中選擇content時才可以看到響應(yīng)內(nèi)容）

[圖片上傳失敗...(image-6cb0a5-1747483478514)]

綠色區(qū)展示的是請求相應(yīng)內(nèi)容。同樣，是點(diǎn)擊導(dǎo)航欄會展示響應(yīng)內(nèi)容的詳細(xì)情況。

• header：響應(yīng)的頭信息

• text：文本形式展示響應(yīng)內(nèi)容

• hex(16進(jìn)制)和compressed（壓縮）一般不予查看

• json：以json格式查看響應(yīng)內(nèi)容內(nèi)容，簡單明了

• json text：將json格式的內(nèi)容展開書寫

• raw：詳情內(nèi)容的詳細(xì)情況