作者：薪火_
鏈接：https://www.jianshu.com/p/831c0114179f
來源：簡書
簡介
Charles其實是一款代理服務器，通過成爲電腦或者瀏覽器的代理，然後截取請求和請求結果達到分析抓包的目的。該軟件是用Java寫的，能夠在Windows，Mac，Linux上使用，安裝Charles的時候要先裝好Java環境。
Charles是在 常用的網絡封包截取工具，在做移動開發時，我們爲了調試與服務器端的網絡通訊協議，常常需要截取網絡封包來分析。Charles 通過將自己設置成系統的網絡訪問代理服務器，使得所有的網絡訪問請求都通過它來完成，從而實現了網絡封包的截取和分析。除了在做移動開發中調試端口外，Charles 也可以用於分析第三方應用的通訊協議。配合 Charles 的 SSL 功能，Charles 還可以分析 HTTP協議。
Charles 是收費軟件，可以免費試用 30 天。試用期過後，未付費的用戶仍然可以繼續使用，但是每次使用時間不能超過 30 分鐘，並且啓動時將會有 10 秒種的延時。因此，該付費方案對廣大用戶還是相當友好的，即使你長期不付費，也能使用完整的軟件功能。只是當你需要長時間進行封包調試時，會因爲 Charles 強制關閉而遇到影響。（可以自行網上查找破解版軟件）
Charles 主要的功能包括：
截取 Http 和 Https 網絡封包。
支持重發網絡請求，方便後端調試。
支持修改網絡請求參數。
支持網絡請求的截獲並動態修改。
支持模擬慢速網絡。
1. Charles安裝
前提先安裝配置好Java環境，官網下載安裝Charles:https://www.charlesproxy.com/download/
2. HTTP抓包
（1）查看電腦IP地址
方法一： 打開”運行”（快捷鍵：win+R鍵；或者在任務欄的”搜索”按鈕中查找並點擊”運行”），輸入“cmd”後進入命令行窗口，在命令行窗口中輸入”ipconfig”命令查看IP
方法二： 在charles中查看 ：Help -> Local IP Address
（2）Charles代理設置
接下來打開Charles的代理設置：Proxy->Proxy Settings，設置一下端口號，默認的是8888，這個只要不和其他程序的衝突即可,並且勾選Enable transparent HTTP proxying。
（3）在手機設備、模擬器或者遠程瀏覽器上設置代理，抓取手機設備上的請求包（手機和電腦必須在同一個局域網內，並關閉電腦防火牆、其他代理或者翻牆軟件）
第一步：在手機wifi 上設置代理 -> 長按無線網絡-->修改網絡-->高級選項-->代理 手動-->手動輸入輸入IP、端口號
服務器IP：PC機器的IP（通過之前介紹的查看IP的方法）
端口號：8888（通過之前介紹的查看端口的方法）
第二步：Charles彈出詢問“allow”或者“deny”,點擊“allow”按鈕允許；出現手機的HTTP請求列表
安裝證書
第三步：抓取https數據需要在手機上安裝證書，HTTPS的抓包需要在HTTP抓包基礎上再進行設置
如果我們需要在iOS或Android機器上截取 Https 協議的通訊內容，還需要在手機上安裝相應的證書。
設置前抓包HTTPS接口顯示unknown（圖左），設置後接口正常展示，如下圖右
安裝證書
如果你發現返回的是亂碼，首先看是在http請求還是https請求，如果是http請求，那麼應該就是返回來的中文亂碼,解決方案是找到該軟件顯示包內容，Contents目錄下的info.plist，打開文件找到vmoption,添加-Dfile.encoding=UTF-8即可。
如果是https請求出現的亂碼，如下圖這種情況
https請求出現亂碼
這時候你就需要安裝Charles的CA證書了
以下爲在HTTP抓包基礎上進行HTTP抓包的進一步設置步驟:
Help -> SSL proxying -> Install charles root certificate on a Mobile Device or remote browser…
出現彈窗得到地址chls.pro/ssl
在手機自帶的系統瀏覽器輸入地址chls.pro/ssl，出現證書安裝頁面，點擊安裝，手機設置有密碼的輸入密碼進行安裝。安裝完證書後，就可以截取手機上的 Https 通訊內容了。不過同樣需要注意，默認情況下 Charles 並不做截取，你還需要在要截取的網絡請求上右擊，選擇 SSL proxy 菜單項。
注意2：iOS 10.3系統，需要在設置→通用→關於本機→證書信任設置裏面啓用完全信任Charles證書
Charles設置Proxy代理
Proxy -> SSL Proxying Settings... 勾選Enable SSL Proxying,點擊Add,點擊Add，Host設置要抓取的https接口，
Host : * (使用通配符表示檢測所有網絡請求；建議還是設置單個需要抓取的https host，儘量避免使用 * 通配符)
Port：443
比如想抓這個，Host填寫：https://api.weibo.cnPort填寫：443
！！！完成以上操作，就完成Charles抓取HTTP(S)數據包的所有配置了。查看Charles,我們可以看到數據包的內容了。
Charles 主界面介紹
主要是會話的兩種視圖模式以及對應的 requet/response 面板組成:
Structure視圖
Sequence視圖
Structure：樹狀結構顯示，將網絡請求按訪問的域名分類；
Sequence：水平結構顯示，將網絡請求按訪問的時間排序
Structure視圖模式下,列表會按照域名來歸類所有請求,而Sequence視圖則是按照請求發生的順序來展示;如果不習慣Sequence默認的上下視圖,可以修改爲類似Fiddler的左右視圖模式(有更符合眼睛的習慣):快捷鍵 cmd+,->Charles Preferences->Viewers選擇Sequence view layout爲Tall即可;
常用的功能在圖上已經有註釋,不多說,感覺Chales的右鍵功能比Fiddler多一點,簡單看幾個:
Save response: 保存response數據到文件中,方便後面用於重定向功能map local...;選擇多條記錄後再右鍵就會有Save All...可以方便的把所有response信息一次性導出到某個目錄中,然後通過map local...結合通配符來批量重定向請求;
Export: 可以將選中的多個會話信息完整導出成文件(*.chls),通過File - import來導入chls文件,方便不同開發人員進行調試或者現象復現分析;
repeat advanced...: 可以重發次數以及併發數,用於進行簡單的服務器壓測,看到有些簡友還用它來對付一般的釣魚網站,有點意思..
Filter ： 過濾，可以輸入關鍵字來快速篩選出 URL 中帶指定關鍵字的網絡請求
Overview ： 查看這次請求的詳細內容，例如耗時詳細列車了請求開始時間、結束時間，響應開始時間、結束時間，總耗時、DNS耗時、網絡延時等。
對於Size也詳細列出了請求頭大小、響應頭大小、壓縮比例等內容。
URL：進行網絡請求的鏈接；
Status：當前狀態，complete表示請求完成；
Responce Code：返回碼。不同的接口，不同的請求結果，返回碼都不同；
Protocol：使用的協議；
Method：請求方式，如GET請求，POST請求等；
Kept Alive：判斷當前是否正在鏈接（活躍）；
Content-Type:發送的內容類型，如這裏用的是XML文本，以UTF8的方式發送；
Client Address：客戶端的IP地址；
Remote Address：遠程服務器的IP；
Timing:
Request Start Time：請求開始的時間；
Request End Time：請求結束的時間；
Response Start Time：返回開始的時間；
Response End Time : 返回結束的時間；
Duration : 總時間；
Size:
Request Header ：請求的頭部大小；
Response Header：返回的頭部大小；
Request : 請求發送的大小；
Response：返回數據的大小；
Total：所有數據大小；
Request Compression : 請求壓縮；
Response Compression : 返回壓縮；
Request ： 查看請求內容（底下的Headers，Query String，Cookies，Raw。）
Headers：發送請求的頭部信息；
Query String : 發送參數列表；
Cookies： 瀏覽器緩存；
Raw：發送的原生數據，包括了頭部和參數；
Reponse : 查看響應內容
Headers：是返回的頭部信息；
Text：返回信息（除去頭部）後的文本；
Hex：返回信息的16進製表示；
XML：我返回的數據是XML。如果你返回的是JSON，這裏就會顯示JSON；
XML Text：如果你返回JSON，這裏會顯示JSON Text；
Raw：返回的所有原生數據，包括頭部；
Summary: 查看發送數據的一些簡要信息（主機，狀態碼，數據的類型，header和body大下，加載時間，總時間）
Chart: Summary中簡要信息以圖表形式展示
Notes: 其他信息
菜單
Proxy 菜單
這個用得比較多,在這裏設置跟蹤捕捉過濾功能:
Proxy菜單
過濾( Recording Settings )
Recording Settings
設置會話捕捉條件，include 面板用於啓用/停止可以捕捉/顯示的會話;
exclude 表示不顯示的會話,在會話列表中右鍵選擇 ignore 時,對應的url會出現在這裏;
record_setting_add
比較好用的是過濾條件支持通配符,*表示任意多個字符,?表示一個字符,如Protocol中有http,https和 "",選擇空白或者輸入*都可以表示任意協議的請求;
也可以通過主界面底部的Filter來簡單設置過濾條件,不支持通配符
filter
還有一種方法就是在一個網址上右擊，選擇Focus，然後其他的請求就會被放到一個叫Other Host的文件夾裏面，這樣也達到了過濾的目的。
設置允許連接的ip地址(Access control Settings)
access_control_settings
模擬網絡環境(Throttle Settings)
throttle_settings
在這裏選擇要模擬的網絡環境,選項比Fidder多很多,也可以自定義,最人性的還可以對指定的url進行網絡環境摸, 好評...
這裏設置完成後通過Proxy-Start Throttling(Ctrl+T)或者常用工具欄按鈕來啓用或停止;
設置爲代理服務器,並捕獲手機請求(Proxy Settings)
proxy_settings
端口號 Port 默認8888,跟Fiddler一樣,省得切換軟件的時候,手機還得重新設置wifi代理了;
記得啓用Enable transtarent HTTP proxying
手機上的設置跟Fiddler類似,切換到wifi設置頁面,選擇高級選項-->代理模式選擇手動,代理服務器設置爲 Charles 所在設備的ip,端口就是上面設定的8888, 注意: 手機和Charles所在機器需處於同一個wifi網絡中;
以上設定完成後,就可以charles中捕獲手機請求了,第一次連接的時候charles會彈出確認提示框,選擇 allow 就好了,後續可在 proxy -> access control settings 中進行管理:
mobile_connect
Tools菜單
tools
rewrite 動態修改 request/response 信息
跟map local類似,也可以對response進行修改,不過他改變的只是部份信息,比如:主機地址(Host),返回狀態碼(response status),返回信息內容(body)等:
rewrite
捕獲https請求
1. 在本機上安裝證書
help - ssl proxying
這裏可以直接選擇Install charles root certificate,會在本機上安裝證書,也可以如圖選擇保存證書,然後手動導入到需要的位置,操作類似:
安裝證書
mac上的操作請看這篇
2. 在手機上安裝證書
單擊help--ssl proxying-install charles root certificate on a mobile device or remote browser,會彈出提示框,然後在手機瀏覽器上輸入網址:chls.pro/ssl,然後根據提示保存證書即可:
3. 啓用https捕捉
enable https
啓用後就可以在會話視圖列表中看到https請求了;
4.斷點功能
方法:
在會話列表中右鍵點擊某個會話,然後在菜單中選擇Breakpoints;
通過Proxy-Breakpoint settings...中手動新建/啓用某個斷點;
要求勾選enable breakpoints
之後當下次再有該請求時,會自動進入斷點模式;
一個完整請求會進入斷點模式2次:
request的發出之前;
收到服務器的response但尚未返回給客戶端的時候;
斷點request的時候,可以修改request信息,不過我們程序都有對請求header做校驗和處理,修改參數後一般就直接報錯了,所以這裏看看response就好,反正操作類似:
breakpoint
在edit response中可以雙擊直接修改json文件的key/value值,很方便,修改完成後單擊execute繼續執行其他操作,將修改後的response返回給客戶端;
response 重定向功能
這個跟Fiddler的autoResponse功能類似,可以指定本地文件(map local...)也可以指定爲其他服務器(map remote...)上的文件,我們介紹前一種;
這裏的map local只能重定向response的數據內容部分,而headers
還是會保留服務器返回的,比如要修改返回碼之類的操作,目前來看,只能通過斷點或者rewrite來進行,這一點比Filder弱,不太方便,也可能是我還沒發現怎麼處理,有知道的請不吝告知,謝謝;
斷點可以用於臨時修改數據,也是一種重定向功能,若是要長期重定向,咱還是將返回重定向到本機文件比較方便,具體方法:
準備一份要返回給客戶端的 response 數據文件,可以從前面介紹的save Response來保存正常數據,然後修改,也可以自己構造一份(用於服務端api尚未發佈,但移動端又需要進行調試的時候);
右鍵單擊某個請求,從菜單中選擇map local ..., 也可以單擊Tools-Map Local...打開map lcoal settings來添加一個映射關係,兩種操作是一樣的,前者只不過直接把url信息給寫好了:
map local
完成設定後,後續符合條件的請求都會用本地映射文件替代;
最後: 我之前在Windows下是 Fiddler 和 Charles 配合使用,主要是 Fiddler 的https抓包一直出問題,而 Charles 就很一切正常,後來更換mbp後就一直用 Charles 了,不過Charles也有自己的不足:
刪除多個會話時會感覺得到卡,而Fiddler很順暢;
filter功能沒Fiddler強大;
Fiddler提供腳本自定義功能,如果是C#開發者的話,還可以很方便的集成fiddler_core到自己的應用中;
常見問題解決
1 . 手機無法抓包的問題
檢查是否配置好代理IP,端口號
檢查是否與電腦在同一個局域網
檢查是否關閉防火牆，代理，翻牆軟件
彈出詢問點擊“allow”或者“deny”時，誤點“deny”，關閉charles重啓，手機再次瀏覽則會重新彈出詢問
2 . 解決request和response信息中的中文亂碼問題。
方法一 ：修改charles windows版本安裝目錄下也有一個Charles.ini的配置文件
原配置文件
修改後的配置文件 增加vmarg.3參數，並設置編碼格式爲UTF-8
方法二 ： Tools -> Rewrite… -> Rules -> Add –>配置信息
選中 Request 和 Response
Match
Name : Content-Type
Value : application/x-zip
Replace
Name : Content-Type
Value : application/json;charset=UTF-8
選中 Replace All
–》點擊OK，完成配置。
！！！通過以上方法就可以解決Request和Response的中文亂碼問題了。
3 . 本地映射配置錯了，刪除錯誤的映射
Tools -> Map Local… -> 選中需要刪除的映射 -> Remove -> OK
注意：不抓包請關閉手機HTTP代理，否則斷開與電腦連接後會連不上網