移動開發經常都需要抓包調試,之前用的是Windows的 Fiddler ,某日才發現mac上的 Charles 也有Windows版本,一查原來是mac/linux/Windows都支持,好定西啊,我是比較喜歡跨平臺的東東的,以后切換開發環境的時候就比較平滑了,在此記錄下使用心得操作;
基于:
Charles v4.x
系統: Windows10/mac10.13
一些需求場景
- 前后端同時開始某個功能迭代, 約定好接口數據格式后, 前端同學通過代理軟件的重定向功能來模擬服務器response,而不同等待后端;
- 手動復現某些response,比如500錯誤;
- 弱網環境模擬;
安裝
直接上 官網 下載就好了,最新的是v4.2.1,收費軟件,免費試用30天,到期不影響功能;
基本結構
主要是會話的兩種視圖模式以及對應的 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來簡單設置過濾條件,不支持通配符
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請求了;
斷點功能(臨時修改內容)
方法:
- 在會話列表中右鍵點擊某個會話,然后在菜單中選擇
Breakpoints; - 通過
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信息給寫好了:
map local 完成設定后,后續符合條件的請求都會用本地映射文件替代;
最后: 我之前在Windows下是 Fiddler 和 Charles 配合使用,主要是 Fiddler 的https抓包一直出問題,而 Charles 就很一切正常,后來更換mbp后就一直用 Charles 了,不過 Charles 也有自己的不足:
- 刪除多個會話時會感覺得到卡,而
Fiddler很順暢; -
filter功能沒Fiddler強大; -
Fiddler提供腳本自定義功能,如果是C#開發者的話,還可以很方便的集成fiddler_core到自己的應用中;
擴展閱讀: Fiddler的使用技巧
