原文連結：http://zhoubotong.site/post/4.html
經常我們移動開發經常都需要抓包除錯,這裡我用的是Charles,在此記錄下使用心得操作;

基於:
Charles v4.x
系統: Windows10/mac10.13

一些需求場景

1. 前後端同時開始某個功能迭代, 約定好介面資料格式後, 前端同學通過代理軟體的重定向功能來模擬伺服器response,而不同等待後端;

2. 手動復現某些response,比如500錯誤;

3. 弱網環境模擬;

安裝

直接上 官網 下載就好了,我是百度找的一個綠色破解版;

基本結構

主要是會話的兩種檢視模式以及對應的 requet/response 面板組成:

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... : 可以重發次數以及併發數,用於進行簡單的伺服器壓測,看到有些簡友還用它來對付一般的釣魚網站,有點意思...

選單

Proxy 選單

這個用得比較多,在這裡設定跟蹤捕捉過濾功能:

設定會話捕捉條件(Recording Settings)

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

• exclude表示不顯示的會話,在會話列表中右鍵選擇ignore時,對應的url會出現在這裡;

比較好用的是過濾條件支援萬用字元,*表示任意多個字元,?表示一個字元,如Protocol中有http,https和 "",選擇空白或者輸入*都可以表示任意協議的請求;
也可以通過主介面底部的Filter來簡單設定過濾條件,不支援萬用字元

設定允許連線的ip地址(Access control Settings)

模擬網路環境(Throttle Settings)

在這裡選擇要模擬的網路環境,選項比Fidder多很多,也可以自定義,最人性的還可以對指定的url進行網路環境摸, 好評...

這裡設定完成後通過 Proxy - Start Throttling(Ctrl+T) 或者常用工具欄按鈕來啟用或停止;

設定為代理伺服器,並捕獲手機請求( Proxy Settings )

埠號 Port 預設 8888 ,跟Fiddler一樣,省得切換軟體的時候,手機還得重新設定wifi代理了;
記得啟用 Enable transtarent HTTP proxying

手機上的設定跟Fiddler類似,切換到wifi設定頁面,選擇Proxy 選擇 manual ,代理伺服器設定為 Charles 所在裝置的ip,埠就是上面設定的 8888 , 注意: 手機和Charles所在機器需處於同一個wifi網路中;

以上設定完成後,就可以charles中捕獲手機請求了,第一次連線的時候charles會彈出確認提示框,選擇 allow 就好了,後續可在 proxy -> access control settings 中進行管理:

Tools選單

rewrite 動態修改 request/response 資訊

跟 map local 類似,也可以對response進行修改,不過他改變的只是部份資訊,比如:主機地址( Host ),返回狀態碼( response status),返回資訊內容( body )等:

捕獲https請求

1. 在本機上安裝證書

這裡可以直接選擇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捕捉

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

斷點功能(臨時修改內容)

方法:

1. 在會話列表中右鍵點選某個會話,然後在選單中選擇 Breakpoints ;

2. 通過 Proxy - Breakpoint settings... 中手動新建/啟用某個斷點;

   要求勾選 enable breakpoints

之後當下次再有該請求時,會自動進入斷點模式;

一個完整請求會進入斷點模式2次:

• request的發出之前;

• 收到伺服器的response但尚未返回給客戶端的時候;

斷點request的時候,可以修改request資訊,不過我們程式都有對請求header做校驗和處理,修改引數後一般就直接報錯了,所以這裡看看response就好,反正操作類似:

在 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資訊給寫好了:

• 完成設定後,後續符合條件的請求都會用本地對映檔案替代;

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

1. 刪除多個會話時會感覺得到卡,而 Fiddler 很順暢;

2. filter 功能沒 Fiddler 強大;

3. Fiddler 提供指令碼自定義功能,如果是C#開發者的話,還可以很方便的整合fiddler_core到自己的應用中;