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

簡書沒法自動目錄,咱手?jǐn)]一個(占個位,后續(xù)補(bǔ)...):

• 安裝

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

• 菜單

  • Proxy 菜單

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

    • 設(shè)置允許連接的ip地址

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

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

  • Tools菜單

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

• 捕獲https請求

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

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

  • 啟用https捕捉

• 斷點功能

• response重定向功能

安裝

直接上 官網(wǎng) 下載就好了,現(xiàn)在是v4.0.1,收費(fèi)軟件,找找破解方式,下個 charles.jar 替換下原有的就可以了;

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

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

[圖片上傳失敗...(image-3e45d1-1515741176133)]

image

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

可能是之前用Fiddler或者人眼閱讀的順序,習(xí)慣先左右后上下,但是Structure模式又不好找按序查找請求,對于不清楚api發(fā)生順序的情況下不方便理順邏輯,而sequence模式是上下模式,怎么看怎么浪費(fèi)時間,這點差點讓我放棄用它了...

常用的功能在圖上已經(jīng)有注釋,不多說,感覺chales的右鍵功能比fiddler多一點;

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

Export : 可以將選中的多個會話信息完整導(dǎo)出成文件,方便不同開發(fā)人員進(jìn)行調(diào)試或者現(xiàn)象復(fù)現(xiàn)分析,然后通過File - import 來導(dǎo)入;

repeat advanced...` : 可以對設(shè)置重發(fā)次數(shù)以及并發(fā)數(shù),可以用于進(jìn)行簡單的服務(wù)器壓測,看到有些簡友還用它來對付一般的釣魚網(wǎng)站,有點意思...

菜單

Proxy 菜單

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

image

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

image

include 面板用于啟用/停止可以捕捉/顯示的會話;

exclude 表示不顯示的會話,在會話列表中右鍵選擇 ignore 時,對應(yīng)的url會出現(xiàn)在這里;

image

比較好用的是過濾條件支持通配符, * 表示任意多個字符, ? 表示一個字符,如 Protocol 中有 http ,https 和 "",選擇空白或者輸入 * 都可以表示任意協(xié)議的請求;

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

image

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

image

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

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

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

image

端口號 Port 默認(rèn) 8888 ,跟Fiddler一樣,省得切換軟件的時候,手機(jī)還得重新設(shè)置wifi代理了;

記得啟用 Enable transtarent HTTP proxying

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

以上設(shè)定完成后,就可以charles中捕獲手機(jī)請求了,第一次連接的時候charles會彈出確認(rèn)提示框,選擇 allow 就好了:

image

Tools菜單

image

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

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

image

捕獲https請求

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

image

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

image

mac上的操作請看 這篇

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

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

image

3. 啟用https捕捉

image

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

斷點功能

可以在會話列表中右鍵點擊某個會話,然后在菜單中選擇 Breakpoints ,也可以在 Proxy - Breakpoint settings... 中手動新建/啟用某個斷點并且勾選 Proxy - enable breakpoints ,這樣,當(dāng)下次再有該請求時,會自動進(jìn)入斷點模式;

一個完整請求會進(jìn)入斷點模式2次,request的發(fā)出之前以及收到服務(wù)器的response但尚未返回給客戶端的時候;

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

image

在 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ù)器返回的,比如要修改返回碼之類的操作,目前來看,只能通過斷點來進(jìn)行,這一點比 Filder 弱很多,不太方便,也可能是我還沒發(fā)現(xiàn)怎么處理,有知道的請不吝告知,謝謝;

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

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

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

  image

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

小結(jié): 我現(xiàn)在是Fiddler和charles配合使用,主要是Fiddler的https捕獲我用的時候一直出問題,但是charles就很一切正常,除此之外,我用charles比較少,因為平常需要的基本功能兩者都滿足,但是:

1. charles 的 sequence 視圖是上下視圖模式,我完全不習(xí)慣,感覺眼睛橫向的時候基本都不需要動,很方便也舒服,當(dāng)然這個可以設(shè)定(mac下是 cmd+, -> Charles Preferences -> Viewers 選擇 sequence view layout 為 Tall 即可);

2. 在 charles 刪除幾百個會話信息的時候就可以感覺得到卡了那么一瞬間,而Fiddler 就很順暢;

3. charles 的 filter 功能沒 fiddler 強(qiáng)大;

4. fiddler 提供腳本自定義功能,如果是C#開發(fā)者的話,還可以很方便的集成fiddler_core到自己的應(yīng)用中;

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

另一篇文章地址傳送門

作者：BULL_DEBUG
鏈接：http://www.reibang.com/p/a595fb47864e
來源：簡書
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)患民，非商業(yè)轉(zhuǎn)載請注明出處。