轉(zhuǎn)自http://blog.csdn.net/lmmilove/article/details/50244537
先記錄下問題：本來之前經(jīng)常使用 charles來抓firefox上的包，結(jié)果最近firefox 版本升級之后，安裝charles.xpi插件的時候一直提示附加組件未驗證的錯誤，修改瀏覽器相關權限位后也無效，貌似是firefox48版本之后此權限位就已經(jīng)失效了，解決方法貌似只有裝個低版本來解決了，如果大家有其他方式請留言。
- Charles 的簡介
- 如何安裝 Charles
- 將 Charles 設置成系統(tǒng)代理
- Charles 主界面介紹
- 過濾網(wǎng)絡請求
- 截取 iPhone 上的網(wǎng)絡封包
- 截取 Https 通訊信息
- 模擬慢速網(wǎng)絡
- 修改網(wǎng)絡請求內(nèi)容
- 給服務器做壓力測試
- 修改服務器返回內(nèi)容
- 總結(jié)
簡介
Charles 是在 Mac 下常用的網(wǎng)絡封包截取工具，在做 移動開發(fā)時，我們?yōu)榱苏{(diào)試與服務器端的網(wǎng)絡通訊協(xié)議，常常需要截取網(wǎng)絡封包來分析。
Charles 通過將自己設置成系統(tǒng)的網(wǎng)絡訪問代理服務器，使得所有的網(wǎng)絡訪問請求都通過它來完成，從而實現(xiàn)了網(wǎng)絡封包的截取和分析。
除了在做移動開發(fā)中調(diào)試端口外，Charles 也可以用于分析第三方應用的通訊協(xié)議。配合 Charles 的 SSL 功能，Charles 還可以分析 Https 協(xié)議。
Charles 是收費軟件，可以免費試用 30 天。試用期過后，未付費的用戶仍然可以繼續(xù)使用，但是每次使用時間不能超過 30 分鐘，并且啟動時將會有 10 秒種的延時。因此，該付費方案對廣大用戶還是相當友好的，即使你長期不付費，也能使用完整的軟件功能。只是當你需要長時間進行封包調(diào)試時，會因為 Charles 強制關閉而遇到影響。
Charles 主要的功能包括：
- 截取 Http 和 Https 網(wǎng)絡封包。
- 支持重發(fā)網(wǎng)絡請求，方便后端調(diào)試。
- 支持修改網(wǎng)絡請求參數(shù)。
- 支持網(wǎng)絡請求的截獲并動態(tài)修改。
- 支持模擬慢速網(wǎng)絡。
安裝 Charles
去 Charles 的官方網(wǎng)站（http://www.charlesproxy.com）下載最新版的 Charles 安裝包，是一個 dmg 后綴的文件。打開后將 Charles 拖到 Application 目錄下即完成安裝。
將 Charles 設置成系統(tǒng)代理
之前提到，Charles 是通過將自己設置成代理服務器來完成封包截取的，所以使用 Charles 的第一步是將其設置成系統(tǒng)的代理服務器。
啟動 Charles 后，第一次 Charles 會請求你給它設置系統(tǒng)代理的權限。你可以輸入登錄密碼授予 Charles 該權限。你也可以忽略該請求，然后在需要將 Charles 設置成系統(tǒng)代理時，選擇菜單中的 “Proxy” –> “Mac OS X Proxy” 來將 Charles 設置成系統(tǒng)代理。如下所示：
之后，你就可以看到源源不斷的網(wǎng)絡請求出現(xiàn)在 Charles 的界面中。
需要注意的是，Chrome 和 Firefox 瀏覽器默認并不使用系統(tǒng)的代理服務器設置，而 Charles 是通過將自己設置成代理服務器來完成封包截取的，所以在默認情況下無法截取 Chrome 和 Firefox 瀏覽器的網(wǎng)絡通訊內(nèi)容。如果你需要截取的話，在 Chrome 中設置成使用系統(tǒng)的代理服務器設置即可，或者直接將代理服務器設置成 127.0.0.1:8888 也可達到相同效果。
Charles 主界面介紹
Charles 主要提供兩種查看封包的視圖，分別名為 “Structure” 和 “Sequence”。
- Structure 視圖將網(wǎng)絡請求按訪問的域名分類。
- Sequence 視圖將網(wǎng)絡請求按訪問的時間排序。
大家可以根據(jù)具體的需要在這兩種視圖之前來回切換。請求多了有些時候會看不過來，Charles 提供了一個簡單的 Filter 功能，可以輸入關鍵字來快速篩選出 URL 中帶指定關鍵字的網(wǎng)絡請求。
對于某一個具體的網(wǎng)絡請求，你可以查看其詳細的請求內(nèi)容和響應內(nèi)容。如果請求內(nèi)容是 POST 的表單，Charles 會自動幫你將表單進行分項顯示。如果響應內(nèi)容是 JSON 格式的，那么 Charles 可以自動幫你將 JSON 內(nèi)容格式化，方便你查看。如果響應內(nèi)容是圖片，那么 Charles 可以顯示出圖片的預覽。
過濾網(wǎng)絡請求
通常情況下，我們需要對網(wǎng)絡請求進行過濾，只監(jiān)控向指定目錄服務器上發(fā)送的請求。對于這種需求，以下幾種辦法：
方法一：在主界面的中部的 Filter 欄中填入需要過濾出來的關鍵字。例如我們的服務器的地址是：http://yuantiku.com , 那么只需要在 Filter 欄中填入 yuantiku 即可。
方法二：在 Charles 的菜單欄選擇 “Proxy”–>“Recording Settings”，然后選擇 Include 欄，選擇添加一個項目，然后填入需要監(jiān)控的協(xié)議，主機地址，端口號。這樣就可以只截取目標網(wǎng)站的封包了。如下圖所示：
通常情況下，我們使用方法一做一些臨時性的封包過濾，使用方法二做一些經(jīng)常性的封包過濾。
方法三：在想過濾的網(wǎng)絡請求上右擊，選擇 “Focus”，之后在 Filter 一欄勾選上 Focussed 一項，如下圖所示：
這種方式可以臨時性的，快速地過濾出一些沒有通過關鍵字的一類網(wǎng)絡請求。
截取 iPhone 上的網(wǎng)絡封包
Charles 通常用來截取本地上的網(wǎng)絡封包，但是當我們需要時，我們也可以用來截取其它設備上的網(wǎng)絡請求。下面我就以 iPhone 為例，講解如何進行相應操作。
Charles 上的設置
要截取 iPhone 上的網(wǎng)絡請求，我們首先需要將 Charles 的代理功能打開。在 Charles 的菜單欄上選擇 “Proxy”–>“Proxy Settings”，填入代理端口 8888，并且勾上 “Enable transparent HTTP proxying” 就完成了在 Charles 上的設置。如下圖所示:
iPhone 上的設置
首先我們需要獲取 Charles 運行所在電腦的 IP 地址，Charles 的頂部菜單的 “Help”–>“Local IP Address”，即可在彈出的對話框中看到 IP 地址，如下圖所示：
在 iPhone 的 “ 設置 ”–>“ 無線局域網(wǎng) ” 中，可以看到當前連接的 wifi 名，通過點擊右邊的詳情鍵，可以看到當前連接上的 wifi 的詳細信息，包括 IP 地址，子網(wǎng)掩碼等信息。在其最底部有「HTTP 代理」一項，我們將其切換成手動，然后填上 Charles 運行所在的電腦的 IP，以及端口號 8888，如下圖所示：
設置好之后，我們打開 iPhone 上的任意需要網(wǎng)絡通訊的程序，就可以看到 Charles 彈出 iPhone 請求連接的確認菜單（如下圖所示），點擊 “Allow” 即可完成設置。
[圖片上傳失敗...(image-89589d-1519910375721)]
截取 Https 通訊信息
安裝證書
如果你需要截取分析 Https 協(xié)議相關的內(nèi)容。那么需要安裝 Charles 的 CA 證書。具體步驟如下。
首先我們需要在 Mac 電腦上安裝證書。點擊 Charles 的頂部菜單，選擇 “Help” –> “SSL Proxying” –> “Install Charles Root Certificate”，然后輸入系統(tǒng)的帳號密碼，即可在 KeyChain 看到添加好的證書。如下圖所示：
需要注意的是，即使是安裝完證書之后，Charles 默認也并不截取 Https 網(wǎng)絡通訊的信息，如果你想對截取某個網(wǎng)站上的所有 Https 網(wǎng)絡請求，可以在該請求上右擊，選擇 SSL proxy，如下圖所示：
這樣，對于該 Host 的所有 SSL 請求可以被截取到了。
截取移動設備中的 Https 通訊信息
如果我們需要在 iOS 或 Android 機器上截取 Https 協(xié)議的通訊內(nèi)容，還需要在手機上安裝相應的證書。點擊 Charles 的頂部菜單，選擇 “Help” –> “SSL Proxying” –> “Install Charles Root Certificate on a Mobile Device or Remote Browser”，然后就可以看到 Charles 彈出的簡單的安裝教程。如下圖所示：
按照我們之前說的教程，在設備上設置好 Charles 為代理后，在手機瀏覽器中訪問地址：http://charlesproxy.com/getssl，即可打開證書安裝的界面，安裝完證書后，就可以截取手機上的 Https 通訊內(nèi)容了。不過同樣需要注意，默認情況下 Charles 并不做截取，你還需要在要截取的網(wǎng)絡請求上右擊，選擇 SSL proxy 菜單項。
模擬慢速網(wǎng)絡
在做移動開發(fā)的時候，我們常常需要模擬慢速網(wǎng)絡或者高延遲的網(wǎng)絡，以測試在移動網(wǎng)絡下，應用的表現(xiàn)是否正常。Charles 對此需求提供了很好的支持。
在 Charles 的菜單上，選擇 “Proxy”–>“Throttle Setting” 項，在之后彈出的對話框中，我們可以勾選上 “Enable Throttling”，并且可以設置 Throttle Preset 的類型。如下圖所示：
如果我們只想模擬指定網(wǎng)站的慢速網(wǎng)絡，可以再勾選上圖中的 “Only for selected hosts” 項，然后在對話框的下半部分設置中增加指定的 hosts 項即可。
修改網(wǎng)絡請求內(nèi)容
有些時候為了調(diào)試服務器的接口，我們需要反復嘗試不同參數(shù)的網(wǎng)絡請求。Charles 可以方便地提供網(wǎng)絡請求的修改和重發(fā)功能。只需要在以往的網(wǎng)絡請求上點擊右鍵，選擇 “Edit”，即可創(chuàng)建一個可編輯的網(wǎng)絡請求。如下所示：
我們可以修改該請求的任何信息，包括 URL 地址、端口、參數(shù)等，之后點擊 “Execute” 即可發(fā)送該修改后的網(wǎng)絡請求（如下圖所示）。Charles 支持我們多次修改和發(fā)送該請求，這對于我們和服務器端調(diào)試接口非常方便，如下圖所示：
給服務器做壓力測試
我們可以使用 Charles 的 Repeat 功能來簡單地測試服務器的并發(fā)處理能力，方法如下。
我們在想打壓的網(wǎng)絡請求上（POST 或 GET 請求均可）右擊，然后選擇 「Repeat Advanced」菜單項，如下所示：
接著我們就可以在彈出的對話框中，選擇打壓的并發(fā)線程數(shù)以及打壓次數(shù)，確定之后，即可開始打壓。
悄悄說一句，一些寫得很弱的投票網(wǎng)站，也可以用這個辦法來快速投票。當然，我也拿 Charles 的 Repeat 功能給一些詐騙的釣魚網(wǎng)站喂了不少垃圾數(shù)據(jù)，上次不小心還把一個釣魚網(wǎng)站的數(shù)據(jù)庫打掛了，嗯，請叫我雷鋒。
修改服務器返回內(nèi)容
有些時候我們想讓服務器返回一些指定的內(nèi)容，方便我們調(diào)試一些特殊情況。例如列表頁面為空的情況，數(shù)據(jù)異常的情況，部分耗時的網(wǎng)絡請求超時的情況等。如果沒有 Charles，要服務器配合構造相應的數(shù)據(jù)顯得會比較麻煩。這個時候，使用 Charles 相關的功能就可以滿足我們的需求。
根據(jù)具體的需求，Charles 提供了 Map 功能、 Rewrite 功能以及 Breakpoints 功能，都可以達到修改服務器返回內(nèi)容的目的。這三者在功能上的差異是：
- Map 功能適合長期地將某一些請求重定向到另一個網(wǎng)絡地址或本地文件。
- Rewrite 功能適合對網(wǎng)絡請求進行一些正則替換。
- Breakpoints 功能適合做一些臨時性的修改。
Map 功能
Charles 的 Map 功能分 Map Remote 和 Map Local 兩種，顧名思義，Map Remote 是將指定的網(wǎng)絡請求重定向到另一個網(wǎng)址請求地址，Map Local 是將指定的網(wǎng)絡請求重定向到本地文件。
在 Charles 的菜單中，選擇 “Tools”–>“Map Remote” 或 “Map Local” 即可進入到相應功能的設置頁面。
對于 Map Remote 功能，我們需要分別填寫網(wǎng)絡重定向的源地址和目的地址，對于不需要限制的條件，可以留空。下圖是一個示例，我將所有 ytk1.yuanku.ws（測試服務器）的請求重定向到了 www.yuantiku.com（線上服務器）。
對于 Map Local 功能，我們需要填寫的重定向的源地址和本地的目標文件。對于有一些復雜的網(wǎng)絡請求結(jié)果，我們可以先使用 Charles 提供的 “Save Response…” 功能，將請求結(jié)果保存到本地（如下圖所示），然后稍加修改，成為我們的目標映射文件。
下圖是一個示例，我將一個指定的網(wǎng)絡請求通過 Map Local 功能映射到了本地的一個經(jīng)過修改的文件中。
Rewrite 功能
Rewrite 功能功能適合對某一類網(wǎng)絡請求進行一些正則替換，以達到修改結(jié)果的目的。
例如，我們的客戶端有一個 API 請求是獲得用戶昵稱，而我當前的昵稱是 “tangqiaoboy”，如下所示：
我們想試著直接修改網(wǎng)絡返回值，將 tangqiaoboy 換成成 iosboy。于是我們啟用 Rewrite 功能，然后設置如下的規(guī)則：
完成設置之后，我們就可以從 Charles 中看到，之后的 API 獲得的昵稱被自動 Rewrite 成了 iosboy，如下圖所示：
Breakpoints 功能
上面提供的 Rewrite 功能最適合做批量和長期的替換，但是很多時候，我們只是想臨時修改一次網(wǎng)絡請求結(jié)果，這個時候，使用 Rewrite 功能雖然也可以達到目的，但是過于麻煩，對于臨時性的修改，我們最好使用 Breakpoints 功能。
Breakpoints 功能類似我們在 Xcode 中設置的斷點一樣，當指定的網(wǎng)絡請求發(fā)生時，Charles 會截獲該請求，這個時候，我們可以在 Charles 中臨時修改網(wǎng)絡請求的返回內(nèi)容。
下圖是我們臨時修改獲取用戶信息的 API，將用戶的昵稱進行了更改，修改完成后點擊 “Execute” 則可以讓網(wǎng)絡請求繼續(xù)進行。
需要注意的是，使用 Breakpoints 功能將網(wǎng)絡請求截獲并修改過程中，整個網(wǎng)絡請求的計時并不會暫停，所以長時間的暫停可能導致客戶端的請求超時。
