黃聰：移動應用抓包調試利器Charles

1、Charles是什麼？

 

Charles是在 Mac或Windows下經常使用的http協議網絡包截取工具，是一款屌的不行的抓包工具，在日常的測試與調式過程當中，掌握此工具就基本能夠不用其餘抓包工具了。

2、爲何是Charles？

爲何要用抓包工具？你們在日常移動App調試測試中是如何進行抓包的？

在咱們作開發與測試的過程當中，總免不了碰到網絡問題，特別是重後臺的產品，這個時候咱們每每的處理方法是抓個網絡包，看看到底應用發送和接收了些什麼鬼.....這個時候Charles上場了；Charles是一款屌的不行的截包工具，好用到沒朋友。

那麼Charles屌在哪裏呢？？？主要特色以下：

1.支持SSL代理，能夠截取分析SSL的請求

2.支持流量控制。能夠模擬慢速網絡(2G,3G)，以及等待時間較長的請求。

3.支持AJAX調試。能夠自動把JSON或者XML數據格式化，方便查看。

4.支持重發網絡請求，方便後端調試。

5.支持修改網絡請求參數。

6.支持網絡請求的截取和動態修改。

7.最重要的一個優勢就是有不一樣平臺的版本（Mac，Windows、Linux）即學一個打遍天下。

3、Charles基本工做原理

charles是經過網絡代理來進行抓包的，下面先了解一下http代理的原理：

1.普通http請求過程

 

•通常狀況下的HTTP請求與響應：

2.加入了Charles的HTTP代理的請求與響應過程

 

 

中間的代理服務器就是Charles

4、Charles的下載與安裝過程

1.官網下載地址：

http://www.charlesproxy.com/download/

2.Mac下安裝：

是一個安裝包是一個dmg後綴的文件。打開後將Charles拖到Application目錄下即完成安裝。

 

 

在Mac下你打開Launchpad便可看到一個像花瓶同樣的Charles程序圖標

3.Windows下安裝：

下載後直接雙擊根據安裝嚮導一步一步安裝便可

5、Http抓包操做步驟

Step 1：開啓Charleshttp代理；

Step 2：手機端Wifi添加代理；

Step 3：開啓Charles錄製功能；

Step 4：啓動應用開始抓包；

Step 5：分析抓取的數據包。

Step 1: 開啓Charleshttp代理

   a.設置Charles代理

 

第一次啓動默認會開啓本機的系統代理，由於咱們只是監控移動端的因此將此選去除（去掉選項前面的小鉤）

a.激活http代理功能

 

 

Step 2: 手機端Wifi添加代理

a. Android手機：

1.在手機端打開你的Wifi設置而後長按已經鏈接的Wifi在彈出來的菜單中選擇【修改網絡】

2.溝上[顯示高級]選項--【手動】

3.輸入代理服務器的IP與端口，IP即安裝了Charles的電腦IP地址，端口就是前面一步設置Charles時所設置的端口。

 

注意：手機所鏈接Wifi要與電腦在同一個LAN(局域網)。

b. iOS手機：

1.點擊你所鏈接的wifi

2.輸入代理服務器的IP與端口，

IP即安裝了Charles的電腦IP地址，端口就是前面一步設置Charles時所設置的端口。

 

注意：手機所鏈接Wifi要與電腦在同一個LAN(局域網)。

Step 3:開啓Charles錄製功能

 

 

1.當手機鏈接上代理後Charles會彈出相應的提示框，點擊Allow便可。2.點擊工具欄上的開始錄製按鈕，即啓動了Charles的抓包功能了。

Step 4：啓動應用開始抓包

 

1.在手機上操做相應的App進行抓包。2.在Charles的主界面上就可看到相應的請求內容。

Step 5：分析抓取的數據包

 

 

 

1.Charles 主要提供兩種查看封包的視圖，分別名爲 「Structure」和 「Sequence」：

    a.Structure 視圖將網絡請求按訪問的域名分類；

    b.Sequence 視圖將網絡請求按訪問的時間排序。

2.你們能夠根據具體的須要在這兩種視圖以前來回切換。請求多了有些時候會看不過來，Charles提供了一個簡單的Filter功能，能夠輸入關鍵字來快速篩選出URL 中帶指定關鍵字的網絡請求。

3.對於某一個具體的網絡請求，你能夠查看其詳細的請求內容和響應內容。若是請求內容是POST 的表單，Charles 會自動幫你將表單進行分項顯示。若是響應內容是 JSON 格式的，那麼 Charles能夠自動幫你將JSON 內容格式化，方便你查看。若是響應內容是圖片，那麼 Charles能夠顯示出圖片的預覽。

6、Https抓包操做步驟

Step 1：瞭解一下https的基本原理；

Step 2：在手機端安裝SSL證書；

Step 3：激活Charles的SSL代理；

Step 4：將指定的URL請求開啓SSL代理功能

Step 5：其餘步驟與Http抓包相同，請參考4、Http抓包操做步驟

Step 1：瞭解一下https的基本原理；

 

 

HTTPS實際上是有兩部分組成：HTTP+ SSL / TLS，也就是在HTTP上又加了一層處理加密信息的模塊。服務端和客戶端的信息傳輸都會經過TLS進行加密，因此傳輸的數據都是加密後的數據。具體是如何進行加密，解密，驗證的，且看圖,下面這個圖的解說

詳細說明，請參考：

http://blog.csdn.net/clh604/article/details/22179907

Step 2：在手機端安裝SSL證書

        1.將證書文件從Charles導出

        2.而後經過adb或者其餘工具將其複製到手機的SD卡中。

 

從Charles導出證書文件

      3.將證書文件導入Android手機

 

 

在手機的設置界面找到【安全】---》【從內部存儲設備或SD卡安裝】----》選擇SD卡上的證書---》彈出設置證書名對話框，輸入一個易記的名字，而後根據提示進行導入即呵。

4.將證書文件導入iOS手機

 

1.在iPhone手機上打開Safari瀏覽器，而後在地址欄中輸入www.charlesproxy.com/getssl。2.稍後會彈出安裝描述文件提示，點擊右上角的【安裝】按鈕進行證書安裝便可。

Step 3：激活Charles的SSL代理

 

 

1.選擇【Proxy】--->【SSL Proxying Settings..】設置。2.在彈出來的對話框中溝選【Enable SSL Proxying】。

Step 4：將指定的URL請求開啓SSL代理功能

 

 

1.選擇抓取的https連接，而後右鍵選擇【Enable SSL Proxying】。2.若是不激活SSL代理，因此https請求都是亂碼沒法查看。

 

 

再次請求這個Https時，其請求內容已經一目瞭然了。

7、Charles進階---修改請求也響應的內容

Step 1：設置Charless斷點。

Step 2：對指定的URL開啓斷點功能。

Step 3：編輯請求與響應的內容。

Step 1：設置Charless斷點

 

 

選擇【Breakpoint Settings…】--->勾選【Enable Breakpoints】來激活斷點功能

Step 2：對指定的URL開啓斷點功能。

 

1.選擇一個URL連接-à右鍵開啓菜單---》選擇【Breakpoints】便可開啓此請求的斷點。2.這樣Charles會遇到此請求時會彈出中斷對話框。

Step 3：編輯請求與響應的內容。

a.編輯請求內容

 

在中斷對話框中，用戶能夠點擊Edit Request來編輯請求的內容，編輯完成後而後點擊【Execute】發出去這個請求給服務端

b.編輯服務器響應的內容

 

在【Edit Request】對話中點擊【Execute】發出請求後，服務端返回來數據後，用戶點擊【Edit Response】可對響應內容進行編輯完成後而後點擊【Execute】發出去這個數據給客戶端。

8、Charles進階---弱網模擬

1.菜單中選擇【Proxy】--->【Throttle Settings..】-à激活【Enable Throttling】。

2.在Throttle Configuration設置弱網的參數。

3.如下是各類網制式的速率參考文檔：

移動網絡制式與網速的參考文檔

 

 

弱網模擬設置

做者：luckydaxian連接：https://www.jianshu.com/p/68684780c1b0