本文的內容主要包括:
Charles 的簡介
如何安裝 Charles
將 Charles 設定成系統代理
Charles 主介面介紹
過濾網路請求
擷取 iPhone 上的網路封包
擷取 Https 通訊資訊
模擬慢速網路
修改網路請求內容
給伺服器做壓力測試
修改伺服器返回內容
反向代理
設定外部代理,解決與翻牆軟體的衝突
總結
簡介
Charles 是在 Mac 下常用的網路封包擷取工具,在做
移動開發時,我們為了除錯與伺服器端的網路通訊協議,常常需要擷取網路封包來分析。
Charles 通過將自己設定成系統的網路訪問代理伺服器,使得所有的網路訪問請求都通過它來完成,從而實現了網路封包的擷取和分析。
除了在做移動開發中除錯埠外,Charles 也可以用於分析第三方應用的通訊協議。配合 Charles 的 SSL 功能,Charles 還可以分析 Https 協議。
Charles 是收費軟體,可以免費試用 30 天。試用期過後,未付費的使用者仍然可以繼續使用,但是每次使用時間不能超過 30 分鐘,並且啟動時將會有 10 秒種的延時。因此,該付費方案對廣大使用者還是相當友好的,即使你長期不付費,也能使用完整的軟體功能。只是當你需要長時間進行封包除錯時,會因為 Charles 強制關閉而遇到影響。
Charles 主要的功能包括:
擷取 Http 和 Https 網路封包。
支援重發網路請求,方便後端除錯。
支援修改網路請求引數。
支援網路請求的截獲並動態修改。
支援模擬慢速網路。
Charles 4 新增的主要功能包括:
支援 Http 2。
支援 IPv6。
安裝 Charles
去 Charles 的官方網站(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”。
Structure 檢視將網路請求按訪問的域名分類。
Sequence 檢視將網路請求按訪問的時間排序。
大家可以根據具體的需要在這兩種檢視之前來回切換。請求多了有些時候會看不過來,Charles 提供了一個簡單的 Filter 功能,可以輸入關鍵字來快速篩選出 URL 中帶指定關鍵字的網路請求。
對於某一個具體的網路請求,你可以檢視其詳細的請求內容和響應內容。如果請求內容是 POST 的表單,Charles 會自動幫你將表單進行分項顯示。如果響應內容是 JSON 格式的,那麼 Charles 可以自動幫你將 JSON 內容格式化,方便你檢視。如果響應內容是圖片,那麼 Charles 可以顯示出圖片的預覽。
過濾網路請求
通常情況下,我們需要對網路請求進行過濾,只監控向指定目錄伺服器上傳送的請求。對於這種需求,以下幾種辦法:
方法一:在主介面的中部的 Filter 欄中填入需要過濾出來的關鍵字。例如我們的伺服器的地址是:http://yuantiku.com, 那麼只需要在 Filter 欄中填入 yuantiku 即可。
方法二:在 Charles 的選單欄選擇 “Proxy”->”Recording Settings”,然後選擇 Include 欄,選擇新增一個專案,然後填入需要監控的協議,主機地址,埠號。這樣就可以只擷取目標網站的封包了。如下圖所示:
通常情況下,我們使用方法一做一些臨時性的封包過濾,使用方法二做一些經常性的封包過濾。
方法三:在想過濾的網路請求上右擊,選擇 “Focus”,之後在 Filter 一欄勾選上 Focussed 一項,如下圖所示:
這種方式可以臨時性的,快速地過濾出一些沒有通過關鍵字的一類網路請求。
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 為代理後,在手機瀏覽器中訪問地址: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.yuantiku.com的 80 埠提供。
設定外部代理,解決與翻牆軟體的衝突
Charles 的原理是把自己設定成系統的代理伺服器,但是在中國,由於工作需要,我們常常需要使用 Google 搜尋,所以大部分程式設計師都有自己的翻牆軟體,而這些軟體的基本原理,也是把自己設定成系統的代理伺服器,來做到透明的翻牆。
為了使得兩者能夠和平共處,我們可以在 Charles 的External Proxy Settings中,設定翻牆的代理埠以及相關資訊。同時,我們也要關閉相關翻牆軟體的自動設定,使其不主動修改系統代理,避免 Charles 失效。
總結
通過 Charles 軟體,我們可以很方便地在日常開發中,擷取和除錯網路請求內容,分析封包協議以及模擬慢速網路。用好 Charles 可以極大的方便我們對於帶有網路請求的 App 的開發和除錯。
願本文幫助大家成為 Charles 的專家,祝大家玩得開心~
作者:菜刀文