Charles 的 調試 & Mock 數據技巧

Charles 擁有 Map 、Rewriter、Breakpoint 3大調試技巧,非常值得客戶端開發學習一波。

Charles 的 Map Local 功能(將網絡請求重定向到本地文件)

針對一個有數據的請求,提前把 Response 保存到本地

在charles「Tools -> Map Local」
勾選 Enable Map Local,點擊 Add 添加一個規則

填寫對應匹配規則,然後指向本地一個文件路徑,點擊OK。

命中規則後,會在Overview界面裏有一條Note記錄。

也可以對着某個請求,右鍵,選擇「Map Local…」

這樣可以自動填充url規則





——————————————————————————————

Charles 的 Rewriter 功能(將網絡請求改寫)

勾選Enable Rewriter,點擊 Add 添加一個規則


Rewriter 玩法一: 改寫Response的某個開關的值
很多時候你只想改某個值,使用 Map Local 太重又很繁瑣。而且把不相關的返回都固定下來了。此時就可以使用 Rewriter 修改某一個值。
先添加一個攔截規則

配置Rewriter規則是,針對response的body。把「“is_open_vehicles”:\s*0,」替換爲「“is_open_vehicles”: 1,」

!!!注意!!!:因爲這裏匹配規則有bug,無法匹配空格,所以key-value之間的一個空格使用了「\s*」替代,並且要勾選上Regex

Rewriter如果命中了,會在Overview界面裏有一條Note記錄。


Rewriter 玩法二: 改寫host指向某個域名

經常的場景是,後端開發說「我這代碼還沒穩定,還不敢發佈到測試環境,要不你來連我的本機IP」,此時就可以使用這個功能。

其他的 Rewriter rule type 看字面意思都能理解,怎麼使用我們就靠自己發揮想象力了。





——————————————————————————————

Charles 的 Map Remote 功能(將網絡請求重定向到其他域名)

如果會用了Map Local,那看Map Remote這界面應該挺好理解。比上面介紹的 Rewriter host 或者 Rewriter url 更強大。

這功能我一開始用的不多,主要想着「本來就是後端沒開發好,才用Charles 的 Map Local 指向一個本地的文件,可以提前模擬請求結果,這讓我重定向到其他遠端有什麼用?」
然後我發現了 Easy Mock 這種第三方平臺,可以很方便的管理 Mock 數據和 API 文檔,創建的 Mock 接口可以同時供多個開發者使用。並且還有一些黑魔法。

比如按照這個網站設定的語法,寫成「@pick([‘張三’, ‘李四’, ‘王五’, ‘趙六’])」 這種樣式,可以隨機返回 張三、李四、王五。還有隨機生成字符串、隨機生成郵箱等語法功能。





——————————————————————————————

Charles 的 Breakpoints 功能(斷點)

設置斷點後,可以隨意改寫 Request 繼續發送,也可以改寫 Response 供客戶端使用。然後這個功能很強大,但是開發很少用。因爲客戶端請求普遍都設置了超時時間,手忙腳亂在10秒內改請求內容,這體驗簡直了。





——————————————————————————————

Charles基礎配置使用

1.查看IP地址

在網絡設置中 或者 在charles「Help -> Local IP Address」查看IP地址

2.設置Charles端口

在charles「Proxy -> Proxy Settings」設置端口
比如這裏是8888

3.手機WIFI配置代理

輸入上面兩個步驟獲取到的 IP 和 端口

爲了實現可以抓https的請求,還需要在手機安裝charles證書。這裏以Android手機爲例子。

4.配置HTTPS證書

保存Charles證書到本地

5.手機安裝Charles證書

把證書上傳到手機,如使用命令 adb push /Users/Yao/Downloads/charles-ssl-proxying-certificate.pem /sdcard/Download/
Android手機普遍直接直接點開文件安裝會提示「沒有找到應用打開該類型文件」
以MIUI爲例,可以通過以下路徑安裝「密碼、隱私與安全」->「系統安全」->「加密與憑證」->「從存儲設備安裝」,找到自己的charles證書點擊安裝。

6.允許SSL代理

在charles「Proxy -> SSL Proxying Settings」設置允許抓取的SSL匹配規則,這裏配置了允許抓取所有SSL連接。

以上就配置完Charles基礎抓包設置了。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章