移動開發(fā)經(jīng)常都需要抓包調(diào)試,之前用的是Windows的 Fiddler ,某日才發(fā)現(xiàn)mac上的 Charles 也有Windows版本,一查原來是mac/linux/Windows都支持,好定西啊,我是比較喜歡跨平臺的東東的,以后切換開發(fā)環(huán)境的時候就比較平滑了,在此記錄下使用心得操作;

基于:
Charles v4.x
系統(tǒng): Windows10/mac10.13

掘金博客地址

一些需求場景

1. 前后端同時開始某個功能迭代, 約定好接口數(shù)據(jù)格式后, 前端同學(xué)通過代理軟件的重定向功能來模擬服務(wù)器response,而不同等待后端;
2. 手動復(fù)現(xiàn)某些response,比如500錯誤;
3. 弱網(wǎng)環(huán)境模擬;

安裝

直接上 官網(wǎng) 下載就好了,最新的是v4.2.1,收費(fèi)軟件,免費(fèi)試用30天,到期不影響功能;

基本結(jié)構(gòu)

主要是會話的兩種視圖模式以及對應(yīng)的 requet/response 面板組成:

Structure視圖

Sequence視圖

Structure 視圖模式下,列表會按照域名來歸類所有請求,而 Sequence 視圖則是按照請求發(fā)生的順序來展示;

如果不習(xí)慣 Sequence 默認(rèn)的上下視圖,可以修改為類似 Fiddler 的左右視圖模式(有更符合眼睛的習(xí)慣): 快捷鍵 cmd+, -> Charles Preferences -> Viewers 選擇 Sequence view layout 為 Tall 即可;

常用的功能在圖上已經(jīng)有注釋,不多說,感覺 Chales 的右鍵功能比 Fiddler 多一點(diǎn),簡單看幾個:

• Save response : 保存response數(shù)據(jù)到文件中,方便后面用于重定向功能 map local...;

選擇多條記錄后再右鍵就會有 Save All... 可以方便的把所有response信息一次性導(dǎo)出到某個目錄中,然后通過 map local... 結(jié)合通配符來批量重定向請求;

• Export : 可以將選中的多個會話信息完整導(dǎo)出成文件(*.chls),通過File - import 來導(dǎo)入chls文件,方便不同開發(fā)人員進(jìn)行調(diào)試或者現(xiàn)象復(fù)現(xiàn)分析;
• repeat advanced... : 可以重發(fā)次數(shù)以及并發(fā)數(shù),用于進(jìn)行簡單的服務(wù)器壓測,看到有些簡友還用它來對付一般的釣魚網(wǎng)站,有點(diǎn)意思...

菜單

Proxy 菜單

這個用得比較多,在這里設(shè)置跟蹤捕捉過濾功能:

Proxy menu

設(shè)置會話捕捉條件( Recording Settings )

record_setting

• include 面板用于啟用/停止可以捕捉/顯示的會話;
• exclude 表示不顯示的會話,在會話列表中右鍵選擇 ignore 時,對應(yīng)的url會出現(xiàn)在這里;

record_setting_add

也可以通過主界面底部的 Filter 來簡單設(shè)置過濾條件,不支持通配符

filter

設(shè)置允許連接的ip地址( Access control Settings )

access_control_settings

模擬網(wǎng)絡(luò)環(huán)境( Throttle Settings )

throttle_settings

在這里選擇要模擬的網(wǎng)絡(luò)環(huán)境,選項比Fidder多很多,也可以自定義,最人性的還可以對指定的url進(jìn)行網(wǎng)絡(luò)環(huán)境摸, 好評...

這里設(shè)置完成后通過 Proxy - Start Throttling(Ctrl+T) 或者常用工具欄按鈕來啟用或停止;

設(shè)置為代理服務(wù)器,并捕獲手機(jī)請求( Proxy Settings )

proxy_settings

手機(jī)上的設(shè)置跟Fiddler類似,切換到wifi設(shè)置頁面,選擇Proxy 選擇 manual ,代理服務(wù)器設(shè)置為 Charles 所在設(shè)備的ip,端口就是上面設(shè)定的 8888 , 注意: 手機(jī)和Charles所在機(jī)器需處于同一個wifi網(wǎng)絡(luò)中;

mobile wifi setting

以上設(shè)定完成后,就可以charles中捕獲手機(jī)請求了,第一次連接的時候charles會彈出確認(rèn)提示框,選擇 allow 就好了,后續(xù)可在 proxy -> access control settings 中進(jìn)行管理:

mobile_connect

Tools菜單

tools

rewrite 動態(tài)修改 request/response 信息

跟 map local 類似,也可以對response進(jìn)行修改,不過他改變的只是部份信息,比如:主機(jī)地址( Host ),返回狀態(tài)碼( response status),返回信息內(nèi)容( body )等:

rewrite

捕獲https請求

1. 在本機(jī)上安裝證書

help - ssl proxying

這里可以直接選擇 Install charles root certificate,會在本機(jī)上安裝證書,也可以如圖選擇保存證書,然后手動導(dǎo)入到需要的位置,操作類似:

安裝證書

mac上的操作請看 這篇

2. 在手機(jī)上安裝證書

單擊 help -- ssl proxying - install charles root certificate on a mobile device or remote browser ,會彈出提示框,然后在手機(jī)瀏覽器上輸入網(wǎng)址: chls.pro/ssl ,然后根據(jù)提示保存證書即可:

安裝證書

3. 啟用https捕捉

enable https

啟用后就可以在會話視圖列表中看到https請求了;

斷點(diǎn)功能(臨時修改內(nèi)容)

方法:

1. 在會話列表中右鍵點(diǎn)擊某個會話,然后在菜單中選擇 Breakpoints ;
2. 通過 Proxy - Breakpoint settings... 中手動新建/啟用某個斷點(diǎn);

   要求勾選 enable breakpoints

之后當(dāng)下次再有該請求時,會自動進(jìn)入斷點(diǎn)模式;

一個完整請求會進(jìn)入斷點(diǎn)模式2次:

• request的發(fā)出之前;
• 收到服務(wù)器的response但尚未返回給客戶端的時候;

斷點(diǎn)request的時候,可以修改request信息,不過我們程序都有對請求header做校驗和處理,修改參數(shù)后一般就直接報錯了,所以這里看看response就好,反正操作類似:

breakpoint

在 edit response 中可以雙擊直接修改json文件的key/value值,很方便,修改完成后單擊 execute 繼續(xù)執(zhí)行其他操作,將修改后的response返回給客戶端;

response 重定向功能

這個跟Fiddler的 autoResponse 功能類似,可以指定本地文件( map local... )也可以指定為其他服務(wù)器( map remote... )上的文件,我們介紹前一種;

這里的 map local 只能重定向 response 的數(shù)據(jù)內(nèi)容部分,而 headers
還是會保留服務(wù)器返回的,比如要修改返回碼之類的操作,目前來看,只能通過斷點(diǎn)或者 rewrite 來進(jìn)行,這一點(diǎn)比 Filder 弱,不太方便,也可能是我還沒發(fā)現(xiàn)怎么處理,有知道的請不吝告知,謝謝;

斷點(diǎn)可以用于臨時修改數(shù)據(jù),也是一種重定向功能,若是要長期重定向,咱還是將返回重定向到本機(jī)文件比較方便,具體方法:

• 準(zhǔn)備一份要返回給客戶端的 response 數(shù)據(jù)文件,可以從前面介紹的 save Response 來保存正常數(shù)據(jù),然后修改,也可以自己構(gòu)造一份(用于服務(wù)端api尚未發(fā)布,但移動端又需要進(jìn)行調(diào)試的時候);

• 右鍵單擊某個請求,從菜單中選擇 map local ... , 也可以單擊 Tools - Map Local... 打開 map lcoal settings 來添加一個映射關(guān)系,兩種操作是一樣的,前者只不過直接把url信息給寫好了:
  

  map local

• 完成設(shè)定后,后續(xù)符合條件的請求都會用本地映射文件替代;

最后: 我之前在Windows下是 Fiddler 和 Charles 配合使用,主要是 Fiddler 的https抓包一直出問題,而 Charles 就很一切正常,后來更換mbp后就一直用 Charles 了,不過 Charles 也有自己的不足:

1. 刪除多個會話時會感覺得到卡,而 Fiddler 很順暢;
2. filter 功能沒 Fiddler 強(qiáng)大;
3. Fiddler 提供腳本自定義功能,如果是C#開發(fā)者的話,還可以很方便的集成fiddler_core到自己的應(yīng)用中;

擴(kuò)展閱讀: Fiddler的使用技巧