首發於 樊浩柏科學院
Charles 是在 Mac 下經常使用的截取網絡封包的工具(Win 環境也已支持),在移動端開發過程當中,咱們常須要截取網絡包分析服務端的通信協議。Charles 將本身設置成系統的網絡訪問代理服務器,不只能夠提供 SSL 代理,還支持流量的控制、支持重發網絡請求、支持修改網絡請求參數、支持網絡響應截獲並動態修改。html
從 Charles 的 官方網站 下載最新的安裝包,下載晚完成安裝便可。瀏覽器
Charles 是付費軟件,固然免費狀態也可使用。可使用以下信息完成註冊:服務器
Registered Name: https://zhile.io License Key: 48891cf209c6d32bf4
若是註冊失敗,能夠嘗試 這種方法。網絡
因爲 Charles 是經過將本身設置成代理服務器來完成封包截取的,因此第一步是須要將 Charles 設置成系統的代理服務器。併發
啓動 Charles 後,菜單中的 「Proxy」 -> 「Windos Proxy(或者Mac OS X Proxy)」, 來將 Charles 設置成系統代理。以下所示:工具
配置後,就能夠在界面中看到截取的網絡請求。可是,Chrome 和 Firefox 瀏覽器默認並不使用系統的代理服務器設置, 因此須要將 Chrome 和 Firefox 設置成使用系統的代理服務器,或者直接設置成地址127.0.0.1:8888
。測試
若是 Chrome 已安裝了 Host Switch Plus 插件,則須要暫時關閉。網站
通常狀況下,咱們只須要監聽指定服務器上發送的請求,可使用以下辦法解決:spa
fanhaobai
,則過濾輸出只包含 fanhaobai 信息的請求。方式 1 和方式 3 能夠快速地過濾臨時性網絡請求,使用方式 2 過濾永久性網絡請求。插件
Charles 除了能夠截取本地的網絡包,做爲代理服務器後,一樣能夠截取移動設備的網絡請求包。
截取移動設備網絡包時,須要先將 Charles 的代理功能打開。在 Charles 的菜單欄上選擇 「Proxy」 -> 」Proxy Settings」,填入默認代理端口 8888,且勾選 「Enable transparent HTTP proxying」 就完成了設置。以下圖所示:
首先,經過 Charles 的頂部菜單的 「Help」 -> 」Local IP Address」 獲取本地電腦的 IP 地址,例如個人本機電腦爲192.168.1.102
。
在 iPhone 的 」設置「 -> 」無線局域網「 中,對當前局域網鏈接設置 HTTP 代理(端口默認爲 8888),以下圖:
設置完成後,打開 iPhone 的任意程序,在 Charles 就能夠彈出鏈接確認窗口,點擊 」Allow」 便可。
在 Android 上操做同 iPhone,只是某些系統設置方式不一致而已。
若是須要截取並分析 Https 協議信息,須要安裝 Charles 的 CA 證書。
點擊 Charles 的頂部菜單,選擇 「Help」 -> 「SSL Proxying」 -> 「Install Charles Root Certificate」,便可完成證書的安裝。以下圖所示:
建議將證書安裝在 」受信任的根證書頒發機構「 存儲區。
特別說明,即便安裝完證書後,Charles 默認是不會截取 Https 網絡通信的信息。對於須要截取分析站點 Https 請求,能夠右擊請求記錄,選擇 SSL proxy 便可,如圖所示:
若是在 iPhone 或 Android 機器上截取 Https 協議的通信內容,須要手機上安裝相應的證書。點擊 Charles 的頂部菜單,選擇 「Help」 -> 「SSL Proxying」 -> 「Install Charles Root Certificate on a Mobile Device or Remote Browser」,而後按照 Charles 的提示的安裝教程安裝便可。以下圖所示:
在上述 截取移動設備網絡包 爲手機設置好代理後,手機瀏覽器中訪問地址http://chls.pro/ssl
,便可打開證書安裝的界面。安裝完證書後,就能夠截取手機上的 Https 通信內容了。注意,一樣須要在要截取的網絡請求上右擊,選擇 SSL proxy 菜單項。
若是 SSL proxy 後出現以下錯誤:
可將證書設置爲信任便可,例如 iPhone 下 「設置」 -> 「通用」 -> 「關於本機」 -> 「證書信任設置」 下:
在作 App 開發調試時,常常須要模擬慢請求或者高延遲網絡,以測試應用在網絡異常狀況變現是否正常,而這使用 Charles 就輕鬆幫咱們完成。
在 Charles 的菜單上,選擇 「Proxy」 -> 」Throttle Setting」 項,在彈出的窗口中,能夠勾選上 「Enable Throttling」,而且能夠設置 Throttle Preset 的類型。以下圖所示:
固然能夠經過 「Only for selected hosts」 項,只模擬指定站點的慢請求。
有時爲了調試服務端的接口,咱們須要反覆嘗試不一樣參數的網絡請求。Charles 能夠方便地提供網絡請求的修改和重發功能。只需在該網絡請求上點擊右鍵,選擇 「Compose」,便可建立一個可編輯的網絡請求。
咱們能夠修改該請求的任何信息,包括 URL 地址、端口、參數等,以後點擊 「Execute」 便可發送該修改後的網絡請求。Charles 支持咱們屢次修改和發送該請求,這對於咱們和服務器端調試接口很是方便,以下圖所示:
有候爲方便咱們調試一些特殊狀況,須要服務器返回一些特定的響應內容。例如數據爲空或者數據異常的狀況,部分耗時的網絡請求超時的狀況等。一般讓服務端配合,構造相應的數據顯得會比較麻煩,這個時候,使用 Charles 就能夠知足咱們的需求。
根據不一樣的場景需求,Charles 提供了 Map 功能、 Rewrite 功能以及 Breakpoints 功能,均可以達到修改服務器返回內容的目的。這三者在功能上的差別是:
Charles 的 Map 功能分 Map Remote 和 Map Local 兩種。Map Remote 是將指定的網絡請求重定向到另外一個網址請求地址,而 Map Local 是將指定的網絡請求重定向到本地文件。在 Charles 的菜單中,選擇 「Tools」 -> 」Map Remote」 或 「Map Local」 ,便可進入到相應功能的設置頁面。
對於 Map Remote 功能(選中 Enable Map Remote),咱們須要填寫網絡重定向的源地址和目的地址,對於其餘非必需字段能夠留空。下圖是一個示例,我將測試環境t.fanhaobai.com
的請求重定向到了生產環境www.fanhaobai.com
。
對於 Map Local 功能(選中 Enable Map Local),咱們須要填寫的重定向的源地址和本地的目標文件。對於有一些複雜的網絡請求結果,咱們能夠先使用 Charles 提供的 「Save Response…」 功能,將請求結果保存到本地並稍加修改,成爲咱們的目標映射文件。
Rewrite 功能功能適合對某一類網絡請求進行一些正則替換,以達到修改結果的目的。
例如,將服務端返回的www.fanhaobai.com
所有替換爲www.baidu.com
,以下:
將響應中的www.fanhaobai.com
所有替換爲www.baidu.com
。因而在 「Tools」 -> "Rewrite" 下配置以下的規則:
選中 「Enable Rewrite」 啓用 Rewrite 功能 ,響應以下:
上面提供的 Rewrite 功能最適合作批量和長期的替換,可是不少時候,咱們只是想臨時修改一次網絡請求結果,這個時候,咱們最好使用 Breakpoints 功能。
在須要打斷點的請求上右擊並選擇 「Breakpoints」,從新請求該地址,能夠發現客戶端被掛起,Charles 操做界面以下:
此時能夠修改請求信息,但這裏只修改響應信息,故點擊 「Execute」 後選擇 「Edit Response」 項,修改 title 爲fanhaobai.com
,以下:
繼續點擊 「Execute」 ,可看見響應的 title 已經變爲fanhaobai.com
。
咱們可使用 Charles 的 Repeat 功能來簡單地測試服務器的併發處理能力。在想壓測的網絡請求上右擊,而後選擇 "Repeat Advanced」 項,以下所示:
這樣咱們就能夠在上圖的對話框中,選擇壓測的併發線程數以及壓測次數,肯定以後,便可開始壓力測試了。
Charles 的反向代理功能容許咱們將本地的端口映射到遠程的另外一個端口上。