簡介
Charles是在Mac下常用的截取網絡封包的工具,在做iOS開發時,我們為了調試與伺服器端的網絡通訊協定,常常需要截取網絡封包來分析。Charles通過将自己設定成系統的網絡通路代理伺服器,使得所有的網絡通路請求都通過它來完成,進而實作了網絡封包的截取和分析。
Charles是收費軟體,可以免費試用30天。試用期過後,未付費的使用者仍然可以繼續使用,但是每次使用時間不能超過30分鐘,并且啟動時将會有10秒種的延時。
Charles主要的功能包括:
- 支援SSL代理。可以截取分析SSL的請求。
- 支援流量控制。可以模拟慢速網絡以及等待時間(latency)較長的請求。
- 支援AJAX調試。可以自動将json或xml資料格式化,友善檢視。
- 支援AMF調試。可以将Flash Remoting 或 Flex Remoting資訊格式化,友善檢視。
- 支援重發網絡請求,友善後端調試。
- 支援修改網絡請求參數。
- 支援網絡請求的截獲并動态修改。
- 檢查HTML,CSS和RSS内容是否符合W3C标準。
安裝Charles
去Charles的官方網站(http://www.charlesproxy.com)下載下傳最新版的Charles安裝包,是一個dmg字尾的檔案。打開後将Charles拖到Application目錄 下即完成安裝。
安裝SSL證書
如果你需要截取分析SSL協定相關的内容。那麼需要安裝Charles的CA憑證。具體步驟如下:
- 去 http://www.charlesproxy.com/ssl.zip 下載下傳CA憑證檔案。
- 解壓該zip檔案後,輕按兩下其中的.crt檔案,這時候在彈出的菜單中選擇“總是信任”,如下所示:
- 從鑰匙串通路中即可看到添加成功的證書。如下所示:
将Charles設定成系統代理
之前提到,Charles是通過将自己設定成代理伺服器來完成封包截取的,是以使用Charles的第一步是将其設定成系統的代理伺服器。
啟動Charles後,第一次Charles會請求你給它設定系統代理的權限。你可以輸入登入密碼授予Charles該權限。你也可以忽略該請求, 然後在需要将Charles設定成系統代理時,選擇菜單中的 "Proxy" -> "Mac OS X Proxy"來将Charles設定成系統代理。如下所示:
之後,你就可以看到源源不斷的網絡請求出現在Charles的界面中。
Charles主界面介紹
Charles主要提供2種檢視封包的視圖,分别名為“Structure”和"Sequence"。
- Structure視圖将網絡請求按通路的域名分類。
- Sequence視圖将網絡請求按通路的時間排序。
大家可以根據具體的需要在這兩種視圖之前來回切換。
對于某一個具體的網絡請求,你可以檢視其詳細的請求内容和響應内容。如果響應内容是JSON格式的,那麼Charles可以自動幫你将JSON内容格式化,友善你檢視。
過濾網絡請求
通常情況下,我們需要對網絡請求進行過濾,隻監控向指定目錄伺服器上發送的請求。對于這種需求,我們有2種辦法。
- 在主界面的中部的Filter欄中填入需要過濾出來的關鍵字。例如我們的伺服器的位址是:http://yuantiku.com,那麼隻需要在Filter欄中填入yuantiku即可。
- 在Charles的菜單欄選擇"Proxy"->"Recording Settings",然後選擇Include欄,選擇添加一個項目,然後填入需要監控的協定,主機位址,端口号。這樣就可以隻截取目标網站的封包了。如下圖所示:
通常情況下,我們使用方法1做一些臨時性的封包過濾,使用方法2做一些經常性的封包過濾。
截取iPhone上的網絡封包
Charles通常用來截取本地上的網絡封包,但是當我們需要時,我們也可以用來截取其它裝置上的網絡請求。下面我就以iPhone為例,講解如何進行相應操作。
Charles上的設定
要截取iPhone上的網絡請求,我們首先需要将Charles的代理功能打開。在Charles的菜單欄上選擇 “Proxy”->"Proxy Settings",填入代理端口8888,并且勾上"Enable transparent HTTP proxying" 就完成了在Charles上的設定。如下圖所示:
iPhone上的設定
首先我們需要擷取Charles運作所在電腦的IP位址,打開Terminal,輸入
ifconfig en0
, 即可獲得該電腦的IP,如下圖所示:
在iPhone的 “設定”->“無線區域網路“中,可以看到目前連接配接的wifi名,通過點選右邊的詳情鍵,可以看到目前連接配接上的wifi的詳細資訊,包括IP位址,子 網掩碼等資訊。在其最底部有“HTTP代理”一項,我們将其切換成手動,然後填上Charles運作所在的電腦的IP,以及端口号8888,如下圖所示:
設定好之後,我們打開iPhone上的任意需要網絡通訊的程式,就可以看到Charles彈出iPhone請求連接配接的确認菜單(如下圖所示),點選“Allow”即可完成設定。
截取SSL資訊
Charles預設并不截取SSL的資訊,如果你想對截取某個網站上的所有SSL網絡請求,可以在該請求上右擊,選擇SSL proxy,如下圖所示:
這樣,對于該Host的所有SSL請求可以被截取到了。
模拟慢速網絡
在做iPhone開發的時候,我們常常需要模拟慢速網絡或者高延遲的網絡,以測試在移動網絡下,應用的表現是否正常。Charles對此需求提供了很好的支援。
在Charles的菜單上,選擇"Proxy"->"Throttle Setting"項,在之後彈出的對話框中,我們可以勾選上“Enable Throttling”,并且可以設定Throttle Preset的類型。如下圖所示:
如果我們隻想模拟指定網站的慢速網絡,可以再勾選上圖中的"Only for selected hosts"項,然後在對話框的下半部分設定中增加指定的hosts項即可。
修改網絡請求内容
有些時候為了調試伺服器的接口,我們需要反複嘗試不同參數的網絡請求。Charles可以友善地提供網絡請求的修改和重發功能。隻需要在以往的網絡請求上點選右鍵,選擇“Edit”,即可建立一個可編輯的網絡請求。如下所示:
我們可以修改該請求的任何資訊,包括url位址,端口,參數等,之後點選“Execute”即可發送該修改後的網絡請求(如下圖所示)。Charles支援我們多次修改和發送該請求,這對于我們和伺服器端調試接口非常友善。
亂碼
剛開始用着挺好的啊,怎麼一言不合,就來個亂碼呢?
于是,便在 Google 中輸入「Charles 亂碼」,我保證,你能搜到的絕對是這樣的答案:
可我告訴你,反正我嘗試了在各種地方進行添加,最後都沒有成功。
而我最終解決了亂碼的問題,但根本沒有涉及到
Info.plist
。你隻要確定,我接下來提及的問題,你有正确進行設定。
安裝 SSL 證書
Mac 端
首先去 http://www.charlesproxy.com/ssl.zip 下載下傳
CA 證書檔案,然後輕按兩下 .crt 檔案,選擇「總是信任」按鈕,在鑰匙串通路中即可看到添加成功的證書。
看看,人家說的多麼簡單啊,可事實呢?當我通路上述網址時,出現的是如下的文字:
If you are running Charles
v3.10 or later, please go to Charles and consult the SSL Proxying
submenu in the Help menu, for instructions on installing your new
Charles Root Certificate.
我那蹩腳的英文告訴我:如果你使用的是 v3.10 及之後的版本,安裝方法已經變了,正确的姿勢:啟動 Charles 軟體,在菜單中找到 Help
-> SSL Proxying -> Install Charles Root Certificate. 如下圖所示:
圖檔來自
随後是這樣的:
圖檔來自
iPhone 端
步驟:Help -> SSL Proxying ->Install Charles Root Certificate on a Mobile Device…
Mac 上的設定
- 在 Charles 的工具欄上點選設定按鈕,選擇 SSL Proxy Settings,選中 Enable SSL Proxying。(别急,選完先别關掉)
- SSL 頁籤的 Locations 裡填寫要抓包的域名和端口,點選 Add 按鈕,在彈出的表單中 Host 填寫域名。比如填api.instagram.com,Port 填 443
圖檔來自
關于亂碼,如果沒有做這項操作,則肯定會出現亂碼。而至于否是在
Info.plist
中添加
UTF-8
的字段,反正最後我沒加,但一切正常。
總結
通過Charles軟體,我們可以很友善地在日常開發中,截取和調試網絡請求内容,分析封包協定以及模拟慢速網絡。用好Charles可以極大的友善我們對于帶有網絡請求的App的開發和調試。
原文位址:http://www.infoq.com/cn/articles/network-packet-analysis-tool-charles/