1. 程式人生 > >Charles(最強大的http除錯工具)詳細教程(下)

Charles(最強大的http除錯工具)詳細教程(下)

上半部分講解了Charles最常用功能代理的使用,下半部分繼續演示Charles的特色有趣的功能。

網速模擬功能

throttle功能對於前端來說非常實用,可以看頁面在低網速下的表現,從而找出優化的點。

在線上環境通常有些因為網速慢導致的bug,在本機無法重現,那時候就很抓瞎,如果嫌遠端麻煩,推薦使用throttle。

首先先配置下throttle。

2013-11-17 8-19-04

我們要看頁面在3G環境下的表現:

2013-11-17 8-21-20

(Charles的預配置對於中國的網路環境並不準確,電信、移動、網通的速度還有有明顯差異。)

解析下圖上幾個配置的含義:

Bandwidth(頻寬)、Utilistation(利用百分比)、Round-trip(往返延遲)、MTU(位元組)(MTU的說明請看

百度百科)。

牛逼的斷點功能

Charles另一個非常實用的功能,對於開發者和測試人員來說,堪稱神器。Charles能夠斷到傳送請求前(篡改Request)和請求後(篡改Response)。

場景:ajax傳送請求,我們需要測試介面的各種邊界情況,比如出錯、超時等表現,Charles的斷點+隨意篡改,非常方便測試。

2013-11-17 8-43-05

upload.php是我們要測試的上傳介面,右鍵選擇“BreakPoints”,開啟斷點。

小技巧:不用在web介面中操作,使用repeat功能,就可再次傳送一樣的請求:

2013-11-17 8-46-27

斷點列表檢視

2013-11-17 14-49-35

2013-11-17 14-51-13

可以指定斷點“get”請求還是“post”請求。

重複傳送請求

repeat功能對於測試同學特別有用,可以檢驗介面的健壯性。

repeat功對於前端的價值是不需要重新整理頁面,只需要repeat請求,比如檢驗代理是否成功,修改請求後執行等。

2013-11-17 15-00-13

“repeat”重複傳送一次請求。

“repeat Advances”可以自定義重複次數和重複間隔。

2013-11-17 15-01-59

捕獲記錄控制

捕獲的請求太多,容易產生干擾,Charles可以對捕獲記錄進行過濾。

2013-11-17 15-07-03

然後配置“exclude”:

2013-11-17 15-10-54

web介面

Charles有個有趣的web介面:

2013-11-16 16-52-03

2013-11-16 16-53-08

強大的是可以控制是否遠端可以訪問這個介面,還可以設定使用者名稱和密碼…碉堡了…

瀏覽器輸入http://control.charles/ 

2013-11-16 16-55-45

Charles還有其他有趣功能等待大家挖掘,由於用的比較少,這裡就不再累述。