目錄及更新說明

更新記錄：

• 2013 年 12 月，第一版。
• 2015 年 11 月，增加 Rewrite 相關介紹。
• 2016 年 8 月，增加 Charles 4 的介紹，反向代理功能和設定外部代理，並且介紹瞭如何解決與翻牆軟體的衝突。

本文的內容主要包括：

• Charles 的簡介
• 如何安裝 Charles
• 將 Charles 設定成系統代理
• Charles 主介面介紹
• 過濾網路請求
• 擷取 iPhone 上的網路封包
• 擷取 Https 通訊資訊
• 模擬慢速網路
• 修改網路請求內容
• 給伺服器做壓力測試
• 修改伺服器返回內容
• 反向代理
• 設定外部代理，解決與翻牆軟體的衝突
• 總結

Charles 限時優惠

Charles 4 正版限時優惠優惠活動（限時：2016 年 8 月 8 日 - 15 日），優惠 30 元，

簡介

Charles 是在 Mac 下常用的網路封包擷取工具，在做
移動開發時，我們為了除錯與伺服器端的網路通訊協議，常常需要擷取網路封包來分析。

Charles 通過將自己設定成系統的網路訪問代理伺服器，使得所有的網路訪問請求都通過它來完成，從而實現了網路封包的擷取和分析。

除了在做移動開發中除錯埠外，Charles 也可以用於分析第三方應用的通訊協議。配合 Charles 的 SSL 功能，Charles 還可以分析 Https 協議。

Charles 是收費軟體，可以免費試用 30 天。試用期過後，未付費的使用者仍然可以繼續使用，但是每次使用時間不能超過 30 分鐘，並且啟動時將會有 10 秒種的延時。因此，該付費方案對廣大使用者還是相當友好的，即使你長期不付費，也能使用完整的軟體功能。只是當你需要長時間進行封包除錯時，會因為 Charles 強制關閉而遇到影響。

Charles 主要的功能包括：

1. 擷取 Http 和 Https 網路封包。
2. 支援重發網路請求，方便後端除錯。
3. 支援修改網路請求引數。
4. 支援網路請求的截獲並動態修改。
5. 支援模擬慢速網路。

Charles 4 新增的主要功能包括：

1. 支援 Http 2。
2. 支援 IPv6。

安裝 Charles

去 Charles 的官方網站（http://www.charlesproxy.com）下載最新版的 Charles 安裝包，是一個 dmg 字尾的檔案。開啟後將 Charles 拖到 Application 目錄下即完成安裝。

將 Charles 設定成系統代理

之前提到，Charles 是通過將自己設定成代理伺服器來完成封包擷取的，所以使用 Charles 的第一步是將其設定成系統的代理伺服器。

啟動 Charles 後，第一次 Charles 會請求你給它設定系統代理的許可權。你可以輸入登入密碼授予 Charles 該許可權。你也可以忽略該請求，然後在需要將 Charles 設定成系統代理時，選擇選單中的 “Proxy” -> “Mac OS X Proxy” 來將 Charles 設定成系統代理。如下所示：

之後，你就可以看到源源不斷的網路請求出現在 Charles 的介面中。

需要注意的是，Chrome 和 Firefox 瀏覽器預設並不使用系統的代理伺服器設定，而 Charles 是通過將自己設定成代理伺服器來完成封包擷取的，所以在預設情況下無法擷取 Chrome 和 Firefox 瀏覽器的網路通訊內容。如果你需要擷取的話，在 Chrome 中設定成使用系統的代理伺服器設定即可，或者直接將代理伺服器設定成 127.0.0.1:8888 也可達到相同效果。

Charles 主介面介紹

Charles 主要提供兩種檢視封包的檢視，分別名為 “Structure” 和 “Sequence”。

1. Structure 檢視將網路請求按訪問的域名分類。
2. Sequence 檢視將網路請求按訪問的時間排序。

大家可以根據具體的需要在這兩種檢視之前來回切換。請求多了有些時候會看不過來，Charles 提供了一個簡單的 Filter 功能，可以輸入關鍵字來快速篩選出 URL 中帶指定關鍵字的網路請求。

對於某一個具體的網路請求，你可以檢視其詳細的請求內容和響應內容。如果請求內容是 POST 的表單，Charles 會自動幫你將表單進行分項顯示。如果響應內容是 JSON 格式的，那麼 Charles 可以自動幫你將 JSON 內容格式化，方便你檢視。如果響應內容是圖片，那麼 Charles 可以顯示出圖片的預覽。

過濾網路請求

通常情況下，我們需要對網路請求進行過濾，只監控向指定目錄伺服器上傳送的請求。對於這種需求，以下幾種辦法：

方法一：在主介面的中部的 Filter 欄中填入需要過濾出來的關鍵字。例如我們的伺服器的地址是：http://yuantiku.com , 那麼只需要在 Filter 欄中填入 yuantiku 即可。

方法二：在 Charles 的選單欄選擇 “Proxy”->”Recording Settings”，然後選擇 Include 欄，選擇新增一個專案，然後填入需要監控的協議，主機地址，埠號。這樣就可以只擷取目標網站的封包了。如下圖所示：

通常情況下，我們使用方法一做一些臨時性的封包過濾，使用方法二做一些經常性的封包過濾。

方法三：在想過濾的網路請求上右擊，選擇 “Focus”，之後在 Filter 一欄勾選上 Focussed 一項，如下圖所示：

這種方式可以臨時性的，快速地過濾出一些沒有通過關鍵字的一類網路請求。

擷取 iPhone 上的網路封包

Charles 通常用來擷取本地上的網路封包，但是當我們需要時，我們也可以用來擷取其它裝置上的網路請求。下面我就以 iPhone 為例，講解如何進行相應操作。

Charles 上的設定

要擷取 iPhone 上的網路請求，我們首先需要將 Charles 的代理功能開啟。在 Charles 的選單欄上選擇 “Proxy”->”Proxy Settings”，填入代理埠 8888，並且勾上 “Enable transparent HTTP proxying” 就完成了在 Charles 上的設定。如下圖所示:

iPhone 上的設定

首先我們需要獲取 Charles 執行所在電腦的 IP 地址，Charles 的頂部選單的 “Help”->”Local IP Address”，即可在彈出的對話方塊中看到 IP 地址，如下圖所示：

在 iPhone 的 “ 設定 “->” 無線區域網 “ 中，可以看到當前連線的 wifi 名，通過點選右邊的詳情鍵，可以看到當前連線上的 wifi 的詳細資訊，包括 IP 地址，子網掩碼等資訊。在其最底部有「HTTP 代理」一項，我們將其切換成手動，然後填上 Charles 執行所在的電腦的 IP，以及埠號 8888，如下圖所示：

設定好之後，我們開啟 iPhone 上的任意需要網路通訊的程式，就可以看到 Charles 彈出 iPhone 請求連線的確認選單（如下圖所示），點選 “Allow” 即可完成設定。

擷取 Https 通訊資訊

安裝證書

如果你需要擷取分析 Https 協議相關的內容。那麼需要安裝 Charles 的 CA 證書。具體步驟如下。

首先我們需要在 Mac 電腦上安裝證書。點選 Charles 的頂部選單，選擇 “Help” -> “SSL Proxying” -> “Install Charles Root Certificate”，然後輸入系統的帳號密碼，即可在 KeyChain 看到新增好的證書。如下圖所示：

需要注意的是，即使是安裝完證書之後，Charles 預設也並不擷取 Https 網路通訊的資訊，如果你想對擷取某個網站上的所有 Https 網路請求，可以在該請求上右擊，選擇 SSL proxy，如下圖所示：

這樣，對於該 Host 的所有 SSL 請求可以被擷取到了。

擷取移動裝置中的 Https 通訊資訊

如果我們需要在 iOS 或 Android 機器上擷取 Https 協議的通訊內容，還需要在手機上安裝相應的證書。點選 Charles 的頂部選單，選擇 “Help” -> “SSL Proxying” -> “Install Charles Root Certificate on a Mobile Device or Remote Browser”，然後就可以看到 Charles 彈出的簡單的安裝教程。如下圖所示：

按照我們之前說的教程，在裝置上設定好 Charles 為代理後，在手機瀏覽器中訪問地址：http://charlesproxy.com/getssl，即可開啟證書安裝的介面，安裝完證書後，就可以擷取手機上的 Https 通訊內容了。不過同樣需要注意，預設情況下 Charles 並不做擷取，你還需要在要擷取的網路請求上右擊，選擇 SSL proxy 選單項。

模擬慢速網路

在做移動開發的時候，我們常常需要模擬慢速網路或者高延遲的網路，以測試在行動網路下，應用的表現是否正常。Charles 對此需求提供了很好的支援。

在 Charles 的選單上，選擇 “Proxy”->”Throttle Setting” 項，在之後彈出的對話方塊中，我們可以勾選上 “Enable Throttling”，並且可以設定 Throttle Preset 的型別。如下圖所示：

如果我們只想模擬指定網站的慢速網路，可以再勾選上圖中的 “Only for selected hosts” 項，然後在對話方塊的下半部分設定中增加指定的 hosts 項即可。

修改網路請求內容

有些時候為了除錯伺服器的介面，我們需要反覆嘗試不同引數的網路請求。Charles 可以方便地提供網路請求的修改和重發功能。只需要在以往的網路請求上點選右鍵，選擇 “Edit”，即可建立一個可編輯的網路請求。如下所示：

我們可以修改該請求的任何資訊，包括 URL 地址、埠、引數等，之後點選 “Execute” 即可傳送該修改後的網路請求（如下圖所示）。Charles 支援我們多次修改和傳送該請求，這對於我們和伺服器端除錯介面非常方便，如下圖所示：

給伺服器做壓力測試

我們可以使用 Charles 的 Repeat 功能來簡單地測試伺服器的併發處理能力，方法如下。

我們在想打壓的網路請求上（POST 或 GET 請求均可）右擊，然後選擇 「Repeat Advanced」選單項，如下所示：

接著我們就可以在彈出的對話方塊中，選擇打壓的併發執行緒數以及打壓次數，確定之後，即可開始打壓。

悄悄說一句，一些寫得很弱的投票網站，也可以用這個辦法來快速投票。當然，我也拿 Charles 的 Repeat 功能給一些詐騙的釣魚網站餵了不少垃圾資料，上次不小心還把一個釣魚網站的資料庫打掛了，嗯，請叫我雷鋒。

修改伺服器返回內容

有些時候我們想讓伺服器返回一些指定的內容，方便我們除錯一些特殊情況。例如列表頁面為空的情況，資料異常的情況，部分耗時的網路請求超時的情況等。如果沒有 Charles，要伺服器配合構造相應的資料顯得會比較麻煩。這個時候，使用 Charles 相關的功能就可以滿足我們的需求。

根據具體的需求，Charles 提供了 Map 功能、 Rewrite 功能以及 Breakpoints 功能，都可以達到修改伺服器返回內容的目的。這三者在功能上的差異是：

1. Map 功能適合長期地將某一些請求重定向到另一個網路地址或本地檔案。
2. Rewrite 功能適合對網路請求進行一些正則替換。
3. Breakpoints 功能適合做一些臨時性的修改。

Map 功能

Charles 的 Map 功能分 Map Remote 和 Map Local 兩種，顧名思義，Map Remote 是將指定的網路請求重定向到另一個網址請求地址，Map Local 是將指定的網路請求重定向到本地檔案。

在 Charles 的選單中，選擇 “Tools”->”Map Remote” 或 “Map Local” 即可進入到相應功能的設定頁面。

對於 Map Remote 功能，我們需要分別填寫網路重定向的源地址和目的地址，對於不需要限制的條件，可以留空。下圖是一個示例，我將所有 ytk1.yuanku.ws（測試伺服器）的請求重定向到了 www.yuantiku.com（線上伺服器）。

對於 Map Local 功能，我們需要填寫的重定向的源地址和本地的目標檔案。對於有一些複雜的網路請求結果，我們可以先使用 Charles 提供的 “Save Response…” 功能，將請求結果儲存到本地（如下圖所示），然後稍加修改，成為我們的目標對映檔案。

下圖是一個示例，我將一個指定的網路請求通過 Map Local 功能對映到了本地的一個經過修改的檔案中。

Map Local 在使用的時候，有一個潛在的問題，就是其返回的 Http Response Header 與正常的請求並不一樣。這個時候如果客戶端校驗了 Http Response Header 中的部分內容，就會使得該功能失效。解決辦法是同時使用 Map Local 以下面提到的 Rewrite 功能，將相關的 Http 頭 Rewrite 成我們希望的內容。

Rewrite 功能

Rewrite 功能功能適合對某一類網路請求進行一些正則替換，以達到修改結果的目的。

例如，我們的客戶端有一個 API 請求是獲得使用者暱稱，而我當前的暱稱是 “tangqiaoboy”，如下所示：

我們想試著直接修改網路返回值，將 tangqiaoboy 換成成 iosboy。於是我們啟用 Rewrite 功能，然後設定如下的規則：

完成設定之後，我們就可以從 Charles 中看到，之後的 API 獲得的暱稱被自動 Rewrite 成了 iosboy，如下圖所示：

Breakpoints 功能

上面提供的 Rewrite 功能最適合做批量和長期的替換，但是很多時候，我們只是想臨時修改一次網路請求結果，這個時候，使用 Rewrite 功能雖然也可以達到目的，但是過於麻煩，對於臨時性的修改，我們最好使用 Breakpoints 功能。

Breakpoints 功能類似我們在 Xcode 中設定的斷點一樣，當指定的網路請求發生時，Charles 會截獲該請求，這個時候，我們可以在 Charles 中臨時修改網路請求的返回內容。

下圖是我們臨時修改獲取使用者資訊的 API，將使用者的暱稱進行了更改，修改完成後點選 “Execute” 則可以讓網路請求繼續進行。

需要注意的是，使用 Breakpoints 功能將網路請求截獲並修改過程中，整個網路請求的計時並不會暫停，所以長時間的暫停可能導致客戶端的請求超時。

反向代理

Charles 的反向代理功能允許我們將本地的埠對映到遠端的另一個埠上。例如，在下圖中，我將本機的 61234 埠對映到了遠端（www.yuantiku.com）的80埠上了。這樣，當我訪問本地的 61234 埠時，實際返回的內容會由 www.yuantiku.com 的 80 埠提供。

設定外部代理，解決與翻牆軟體的衝突

Charles 的原理是把自己設定成系統的代理伺服器，但是在中國，由於工作需要，我們常常需要使用 Google 搜尋，所以大部分程式設計師都有自己的翻牆軟體，而這些軟體的基本原理，也是把自己設定成系統的代理伺服器，來做到透明的翻牆。

為了使得兩者能夠和平共處，我們可以在 Charles 的 External Proxy Settings 中，設定翻牆的代理埠以及相關資訊。同時，我們也要關閉相關翻牆軟體的自動設定，使其不主動修改系統代理，避免 Charles 失效。

總結

通過 Charles 軟體，我們可以很方便地在日常開發中，擷取和除錯網路請求內容，分析封包協議以及模擬慢速網路。用好 Charles 可以極大的方便我們對於帶有網路請求的 App 的開發和除錯。

願本文幫助大家成為 Charles 的專家，祝大家玩得開心～