1.簡介
上一篇透過宏哥的介紹想必各位小夥伴或者童鞋們對Charles已經有了一個理性地認識，今天宏哥在從Charles的外貌介紹和分享一下，讓小夥伴們或者童鞋們再對Charles有一個感性的認識，今天主要是對Charles的介面進行一個詳細的介紹。
2.Charles主介面概覽
Charles的主介面分為：①主導航欄、②請求檢視導航欄【樹狀檢視和列表檢視】、③捕獲請求列表、④過濾器、⑤請求內容詳情、⑥請求內容導航欄、⑦響應內容詳情和⑧響應內容導航欄八部分組成，如下圖所示：
3.Charles主介面詳解
3.1主導航選單欄
Charles頂部為主導航選單欄，選單導航欄下面為工具導航欄。如下圖所示：
3.1.1選單欄
Charles 的主選單包括：File、Edit、View、Proxy、Tools、Window、Help。用的最多的主選單分別是 Proxy 和 Tools。如下圖所示：
3.1.2工具欄
工具導航欄中提供了幾種常用工具，如下圖所示：
下面從左至右依次介紹：
【掃帚】圖形按鈕：點選之後可清除抓取到的所有請求
【紅點】圖形按鈕：紅點亮時表示正在抓取請求，紅點灰色時表示當前不在抓取請求狀態。此功能是領抓取的資料顯示或者不顯示的設定。 這個本人認為是charles工具很方便的一個，一般都使其為不顯示抓取狀態，只有當自己測試的時候的前後，在令其為抓取並顯示狀態。這樣可以快準狠的獲取到相關自己想要的資訊，而不必在一堆資料請求中去尋找。
【鎖頭】圖形按鈕：上鎖表示開啟了SSL Proxying，開啟鎖表示沒有開啟SSL Proxying
【烏龜】圖形按鈕：灰色時表示網速設定正常，綠色時表示開啟慢速網路。此功能宏哥在Fiddler中也介紹過。測試時，會用到網速模擬，具體的在後面功能部分介紹，此處略.....
【六邊形】圖形按鈕：灰色時表示斷點未開啟，紅色時表示正在使用斷點
【筆?】圖形按鈕：編輯修改請求，點選後可以修改請求的內容。編輯修改功能，可以對下圖中的請求資訊進行修改，修改完畢後點選Execute就可以傳送一個修改後的請求資料包。
【重新整理】圖形按鈕：重複傳送請求，點選後選中的請求會被再次傳送
【對勾】圖形按鈕：驗證選中的請求的響應，校驗請求的結果。
【扳手】圖形按鈕：常用功能，包含了 Tools 選單中的常用功能
【齒輪】圖形按鈕：常用設定，包含了 Proxy 選單中的常用設定
3.2請求檢視導航欄
1.Charles 主要提供兩種檢視封包的檢視，分別名為Structure和Sequence。如下圖所示：
兩者區別：
Structure： 此檢視將網路請求按訪問的域名分類
Sequence： 此檢視將網路請求按訪問的時間排序
使用時可以根據具體的需要在這兩種檢視之前來回切換。
2. 顯示模式
Charles有兩種顯示模式，stucture 和sequence。支援來回切換。
（1） Structure形式如下圖 優點：可以很清晰的看到請求的資料結構，而且是以域名劃分請求資訊的，可以很清晰的去分析和處理資料。如下圖所示：
（2）Sequence形式如下圖 優點：可以看到全部請求，這裡的結果以資料請求的順序來顯示，最新的請求顯示在最下面。如下圖所示：
綜上，兩種形式各有千秋，structure 適合對單一系列的訪問請求從宏觀上進行把握，可以快速定位。sequence 適合精確定位內容，因為每條sequence 都有size，status等屬性資訊，方便快速定位這條結果的價值.
對於我自己來說，更傾向於Charles的第一種樹狀檢視，比fiddler的列表檢視好的地方在於：多次重新整理後的請求會被歸納到樹裡面，更加一目瞭然，用fiddler的時候，有點強迫症的同學，都要點選clear，有木有…
3.3捕獲請求列表
Charles 抓取介面後會展示在檢視導航欄下，預設是選擇的：Structure 檢視，當資料多時可採用過濾器過濾。如下圖所示：
捕獲請求列表展示的是我們抓取的所有的請求，點選【+】後便可以展開該host 域名下的所有請求。點選請求後即可在 “請求內容區” 看見該請求所對應的相應內容。
3.4過濾器—Filter
Charles 快捷過濾器，可直接輸入想要的資料進行匹配過濾，這裡就不做詳解，後面詳細講，如下圖所示：
3.5請求內容詳情
Charles請求詳情跟Fiddler相似，但直觀不少，從這裡就可以看出Charles的強大之處。
Charles 請求內容區展示某一介面請求的請求內容，可以切換導航欄檢視請求的各種詳細情況，如下圖所示：
導航欄介紹：
Overview：展示當前請求的一個大體情況
content：展示當前請求的具體內容和伺服器的相應內容
summary：展示當前請求的大體資源分佈情況
chart：以表格形式告訴我們介面響應時間的分佈情況
notes：筆記，點選後自己可以對當前請求記錄一些東西，方便後續檢視該介面的用途，可在overview中檢視
3.5.1 overview—請求總覽
（1）URL（統一資源定位符）
https:協議方案名 M.xxx.baidu.com:伺服器地址，這裡是DNS可解析的名稱。同事也可以是ipv4d地址名，還可以是[0:0:0:0:0:0:0:1]這樣用方括號括起來的IPV6地址名。 App/getindexPage：帶層次的檔案路徑。指定伺服器上的檔案路徑來定位特指的資源。 URL——請求url的路徑、檔案和查詢字串 Status——狀態是否已完成 Response Code——響應狀態碼 Protocol——該seesion使用的協議（Http/https/ftp）
TLS
Protocol——該seesion使用的協議（Http/https/ftp） Session Resumed——該session恢復 Cipher Suit——密碼套件 ALPN——應用層協議協商（Application-Layer Protocol Negotiation，簡稱ALPN）是一個傳輸層安全協議(TLS) 的擴充套件, ALPN 使得應用層可以協商在安全連線層之上使用什麼協議, 避免了額外的往返通訊, 並且獨立於應用層協議。 ALPN 用於 HTTP/2 連線, 和HTTP/1.x 相比, ALPN 的使用增強了網頁的壓縮率減少了網路延時。 ALPN 和 HTTP/2 協議是伴隨著 Google 開發 SPDY 協議出現的。 Client Certificates——客戶端證照 Sever Certificates——服務端證照 Method——該seesion使用的方法（get/post/put等） Kept Alive——keepalive，是在TCP中一個可以檢測死連線的機制。 Content-Type——響應的content-type頭 Client Address——客戶端地址 Remote Address——遠端地址 Tags——標籤
Connection
Client Connection——客戶端連線
Server Connection——服務端連線
WebSocket
Origin——源頭地址
Version——版本
Protocol——協議
Extensions——擴充套件
Messages Sent——訊息傳送
Messages Received——訊息接收
Control Frames Sent——傳送的控制幀
Control Frames Received——接收控制幀
Timing ：
Request Start Time——接收到的第一個請求的第一個位元組的時間點 Request End Time——傳送到客戶端的最後一個響應的最後一個位元組的時間 Response Start Time——響應開始時間 Response End Time——響應結束時間 Duration——整個請求—響應持續時間 DNS——所有選中的session解析DNS所花費的時間的總和 Connect——所有選中session建立TCP/IP連線所花費的時間總和 TLS Handshake——TLS握手協議 Request——請求耗費時間 Response——響應耗費時間 Latency——延遲 Speed——速度 Request Speed——請求速度 Response Speed——響應速度
Size
Request——請求大小
Response——響應大小
Total——請求+響應位元組大小
3.5.2 request—請求頭
名詞解釋：
（1）Appid : 在COM中，安全控制的最小單位是程式，每個程式都有對應的安全控制策略。程式的安全控制策略儲存在登錄檔中，儲存位置為：HKCR\AppID\訪問許可權、啟動許可權等安全配置資訊。開發COM元件時，可以在COM元件對應的CLSID子鍵下
新建字串型別的項，名稱：AppID，值：該COM元件所在程式的AppID值。
channel：渠道包來源
Contextuuid:裝置唯一標識
3.5.3 response—請求結果
Json格式，具體含義參考介面文件。（其中raw是原始資料包的狀態）
3.5.4 summary—請求詳情
3.5.5 時間線圖表
3.6請求內容導航欄
Charles 請求內容導航欄是對請求內容進行不同的展示，切換至對應展示對應的形式，如下圖所示：
導航欄介紹：
Headers：當前請求的頭資訊
Text：文字形式展示當前介面請求內容
Hex：十六進位制展示，一般不使用
JSON：以json格式展示當前介面請求內容
JSON Text：以json text格式展示當前介面請求內容
Raw：原始碼展示當前介面請求內容
3.7響應內容詳情
Charles 響應內容區展示某一介面請求的響應內容，可以切換導航欄檢視響應的各種詳細情況，如下圖所示：
3.8響應內容導航欄
Charles 響應內容導航欄與 “請求內容導航欄” 內容相似，如下圖所示：
導航欄介紹：
Headers：響應的頭資訊
Text：文字形式展示響應內容
Hex：十六進位制展示，一般不使用
JavaScript：以JavaScript格式檢視響應內容內容
JSON：以json格式檢視響應內容內容
JSON Text：以JSON Text格式檢視響應內容內容
Raw：原始碼形式展示響應內容
敲黑板：請求內容導航欄與響應內容導航欄根據不同的介面情況展示的內容也會不一致，但大體都是這些內容。
3.9charles右鍵選單
1.在網址/域名上右鍵可以獲得下面選單，如下圖所示：
區域 1 基本操作 ：基本的URL複製，檔案儲存，以及選中檔案內搜尋
區域 2 重寫操作 ：重寫傳送請求(呼叫介面合適)，或者發到gitlist裡
區域 3 檢視區 ：排序之類的
區域 4 設定關注 ：可以設定哪些你關心的或者需要忽略的
區域 5 清除區 ：垃圾清理使用
區域 6 SSL代理啟用 ：選擇是否啟用SSL代理
區域 7 工具區：對應常見工具的入口
區域 8 對映區 ：把檔案對映到本地或者原創URL
2.在 overview區域 和 contents區域 右鍵可以獲得下面操作的入口，如下圖所示：
原理類似上面介紹的，可以對請求和響應的檢視格式進行設定；
4.小結
好了，到此宏哥就將Charles工具常用的基本上全都講解和分享完了，今天時間也不早了，就到這裡！感謝您耐心的閱讀~~