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

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

掘金博客地址

一些需求場(chǎng)景

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

安裝

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

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

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

Structure視圖

Sequence視圖

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

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

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

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

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

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

菜單

Proxy 菜單

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

Proxy menu

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

record_setting

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

record_setting_add

也可以通過(guò)主界面底部的 Filter 來(lái)簡(jiǎn)單設(shè)置過(guò)濾條件,不支持通配符

filter

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

access_control_settings

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

throttle_settings

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

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

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

proxy_settings

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

mobile wifi setting

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

mobile_connect

Tools菜單

tools

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

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

rewrite

捕獲https請(qǐng)求

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

help - ssl proxying

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

安裝證書(shū)

mac上的操作請(qǐng)看 這篇

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

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

安裝證書(shū)

3. 啟用https捕捉

enable https

啟用后就可以在會(huì)話(huà)視圖列表中看到https請(qǐng)求了;

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

方法:

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

   要求勾選 enable breakpoints

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

一個(gè)完整請(qǐng)求會(huì)進(jìn)入斷點(diǎn)模式2次:

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

斷點(diǎn)request的時(shí)候,可以修改request信息,不過(guò)我們程序都有對(duì)請(qǐng)求header做校驗(yàn)和處理,修改參數(shù)后一般就直接報(bào)錯(cuò)了,所以這里看看response就好,反正操作類(lèi)似:

breakpoint

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

response 重定向功能

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

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

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

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

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

  map local

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

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

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

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