Charles簡介

Charles是一個HTTP代理服務(wù)器,HTTP監(jiān)視器,反轉(zhuǎn)代理服務(wù)器,是目前最強大的http調(diào)試工具，在界面和功能上遠強于Fiddler，同時是全平臺支持，唯一的缺陷是收費的。Charles通過將自己設(shè)置成系統(tǒng)的網(wǎng)絡(luò)訪問代理服務(wù)器，使得所有的網(wǎng)絡(luò)訪問請求都通過它來完成，它允許一個開發(fā)者查看所有連接互聯(lián)網(wǎng)的HTTP通信，這些包括request, response和HTTP headers （包含cookies與caching信息），從而實現(xiàn)了網(wǎng)絡(luò)封包的截取和分析。

主要功能

• 支持SSL代理?？梢越厝》治鯯SL的請求。
• 支持流量控制?？梢阅M慢速網(wǎng)絡(luò)以及等待時間（latency）較長的請求。
• 支持AJAX調(diào)試。可以自動將json或xml數(shù)據(jù)格式化，方便查看。
• 支持AMF調(diào)試?？梢詫lash Remoting 或 Flex Remoting信息格式化，方便查看。
• 支持重發(fā)網(wǎng)絡(luò)請求，方便后端調(diào)試。
• 支持修改網(wǎng)絡(luò)請求參數(shù)。
• 支持網(wǎng)絡(luò)請求的截獲并動態(tài)修改。
• 檢查HTML，CSS和RSS內(nèi)容是否符合W3C標(biāo)準(zhǔn)。

Charles界面介紹

image.png

右鍵的各個選項

image.png

Charles設(shè)置過濾器

• 臨時過濾器設(shè)置

  
  
  image.png

• 長久過濾器設(shè)置

  
  
  image.png

image.png

Charles抓取接口詳解

將瀏覽器取消緩存，打開Charles，刷新頁面即可看到請求

image.png

抓取到的http請求，可查看響應(yīng)

image.png

抓取https請求

點擊 Charles菜單下 Help -> SSL Proxying -> Install Charles Root Certifacate 選擇添加。

image.png

從應(yīng)用鑰匙串訪問搜索Charles，找到添加的證書，雙擊證書，在信任下選擇始終信任。

通過Charles抓包的時候需要在菜單Proxy -> SSL Proxying中配置需要開啟Enable SSL Proxying并配置需要抓包的域名,可統(tǒng)一配置成* 443

image.png

客戶端代理(抓取客戶端的請求)

要抓取客戶端的請求，需要在客戶端設(shè)置代理，設(shè)置—網(wǎng)絡(luò)—手動設(shè)置代理，輸入ip地址和端口，端口見Proxy Setting中的端口號，就可以抓取到http的請求，如果要抓取https的請求，要在手機上安裝證書，Android和iOS均可，具體的可以百度
charles安裝ssl證書和charles使能ssl功能
手機證書鏈接：https://www.charlesproxy.com/assets/legacy-ssl/charles.crt

模擬慢速網(wǎng)絡(luò)

在 Charles 的菜單上，直接點擊小烏龜圖標(biāo)，即可使得電腦訪問使用慢速網(wǎng)絡(luò)，如果有特殊的設(shè)置，可以選擇 “Proxy”->”Throttle Setting” 項，在之后彈出的對話框中，我們可以勾選上 “Enable
Throttling”，并且可以設(shè)置 Throttle Preset 的類型。如下圖所示：

image.png

如果我們只想模擬指定網(wǎng)站的慢速網(wǎng)絡(luò)，可以再勾選上圖中的 “Only for selected hosts” 項，然后在對話框的下半部分設(shè)置中增加指定的
hosts 項即可。

修改網(wǎng)絡(luò)請求的內(nèi)容

修改請求參數(shù)

有些時候為了調(diào)試服務(wù)器的接口，我們需要反復(fù)嘗試不同參數(shù)的網(wǎng)絡(luò)請求。Charles
可以方便地提供網(wǎng)絡(luò)請求的修改和重發(fā)功能。只需要在以往的網(wǎng)絡(luò)請求上點擊右鍵，選擇 “Edit”，即可創(chuàng)建一個可編輯的網(wǎng)絡(luò)請求。如下所示：

image.png

我們可以修改該請求的任何信息，包括 URL 地址、端口、參數(shù)等，之后點擊 “Execute” 即可發(fā)送該修改后的網(wǎng)絡(luò)請求（如下圖所示）。Charles
支持我們多次修改和發(fā)送該請求，這對于我們和服務(wù)器端調(diào)試接口非常方便

修改響應(yīng)

有些時候我們想讓服務(wù)器返回一些指定的內(nèi)容，方便我們調(diào)試一些特殊情況。例如列表頁面為空的情況，數(shù)據(jù)異常的情況，部分耗時的網(wǎng)絡(luò)請求超時的情況等。如果沒有 Charles，要服務(wù)器配合構(gòu)造相應(yīng)的數(shù)據(jù)顯得會比較麻煩。這個時候，使用 Charles 相關(guān)的功能就可以滿足我們的需求。
根據(jù)具體的需求，Charles 提供了 Map 功能、 Rewrite 功能以及 Breakpoints功能，都可以達到修改服務(wù)器返回內(nèi)容的目的。這三者在功能上的差異是：

1. Map 功能適合長期地將某一些請求重定向到另一個網(wǎng)絡(luò)地址或本地文件。
2. Rewrite 功能適合對網(wǎng)絡(luò)請求進行一些正則替換。
3. Breakpoints 功能適合做一些臨時性的修改。

• Map 功能
  Charles 的 Map 功能分 Map Remote 和 Map Local 兩種，顧名思義，Map Remote 是將指定的網(wǎng)絡(luò)請求重定向到另一個網(wǎng)址請求地址，Map Local是將指定的網(wǎng)絡(luò)請求重定向到本地文件。
  在 Charles 的菜單中，選擇 “Tools”->”Map Remote” 或 “Map Local” 即可進入到相應(yīng)功能的設(shè)置頁面。
  1.對于 Map Remote
  功能，我們需要分別填寫網(wǎng)絡(luò)重定向的源地址和目的地址，對于不需要限制的條件，可以留空。
  對于 Map Local 功能，我們需要填寫的重定向的源地址和本地的目標(biāo)文件。對于有一些復(fù)雜的網(wǎng)絡(luò)請求結(jié)果，我們可以先使用 Charles 提供的“Save Response…” 功能，將請求結(jié)果保存到本地，然后稍加修改，成為我們的目標(biāo)映射文件，命名為test.json。
  然后copy這個URL，用tools—Map Loacl 設(shè)置，如圖：
  

  Charles會往“Notes”界面打個log，可以查看是否map映射成功
  image.png
  
  然后再次發(fā)送請求，即可拿到修改后的響應(yīng)
  
  image.png

• Rewrite 功能
  Rewrite 功能功能適合對某一類網(wǎng)絡(luò)請求進行一些正則替換，以達到修改結(jié)果的目的。
  例如，我們的客戶端有一個 API 請求是獲得phoneNo，而我當(dāng)前的phoneNo是 “15510400131”，如下所示：

  
  
  image.png
  
  

  我們想試著直接修改網(wǎng)絡(luò)返回值，將 15510400131換成成 110。于是我們啟用 Rewrite 功能，然后設(shè)置如下的規(guī)則：

  
  
  image.png
  
  完成設(shè)置之后，我們就可以從 Charles 中看到，之后的 API 獲得的phoneNo被自動 Rewrite 成了 110，如下圖所示：
  
  image.png
• Breakpoints 功能
  上面提供的 Rewrite 功能最適合做批量和長期的替換，但是很多時候，我們只是想臨時修改一次網(wǎng)絡(luò)請求結(jié)果，這個時候，使用 Rewrite 功能雖然也可以達到目的，但是過于麻煩，對于臨時性的修改，我們最好使用 Breakpoints 功能。

Breakpoints 功能類似我們在 開發(fā)編輯器 中設(shè)置的斷點一樣，當(dāng)指定的網(wǎng)絡(luò)請求發(fā)生時，Charles 會截獲該請求，這個時候，我們可以在 Charles 中臨時修改網(wǎng)絡(luò)請求的返回內(nèi)容。

下圖是我們臨時修改phoneNo的 API，將phoneNo進行了更改，修改完成后點擊 “Execute” 則可以讓網(wǎng)絡(luò)請求繼續(xù)進行。

需要注意的是，使用 Breakpoints 功能將網(wǎng)絡(luò)請求截獲并修改過程中，整個網(wǎng)絡(luò)請求的計時并不會暫停，所以長時間的暫?？赡軐?dǎo)致客戶端的請求超時。

給服務(wù)器做壓力測試

我們可以使用 Charles 的 Repeat 功能來簡單地測試服務(wù)器的并發(fā)處理能力，方法如下。
我們在想打壓的網(wǎng)絡(luò)請求上（POST 或 GET 請求均可）右擊，然后選擇 「Repeat Advanced」菜單項，可以設(shè)置次數(shù)，做簡單的壓測，如下所示：

image.png

接著我們就可以在彈出的對話框中，選擇打壓的并發(fā)線程數(shù)以及打壓次數(shù)，確定之后，即可開始打壓。

image.png

結(jié)語

Charles還有很多好用的功能可以供我們使用，有興趣的大家可以一起交流