http調試工具Charles Proxy用法詳解

 

https://www.charlesproxy.com/download/

 

Charles Proxy 一般稱爲Charles，Charles是目前最強大的http調試工具，在界面和功能上遠強於Fiddler，同時是全平臺支持，堪稱聖盃級工具，不過在這裏爲您提供了Charles和諧版，歡迎下載使用！

 

軟件名稱：	Charles
軟件版本：	3.11 b4
軟件大小：	60 MB
軟件受權：	和諧版本
適用平臺：	WinXP/2003/Vista/Windows7/8
下載地址：	http://www.veryhuo.com/down/html/98079.html

安裝說明：

一、先安裝裏面的原版，而後copy charles.jar覆蓋到安裝目錄下的lib目錄便可！

二、須要注意的是，破解補丁不通用，不要用於新版本，不然會致使沒法啓動。

啓動後，軟件界面如上圖。

Charles有個會話(session，不是指http中的session)的概念，能夠理解爲瀏覽器中的tab，這個功能在須要調試多個站點頁面時很實用，當你刷新頁面的時候，只會在當前session中捕獲請求。

(PS：ctrl+N建立個新的session，ctrl+W關閉當前session)

Charles的代理服務器啓動就可使用(會提示給firefox安裝插件)，若是沒有捕獲到請求，請清理下瀏覽器緩存。

界面功能初探

工具條包含了Charles的大部分功能：

有幾個功能比較抽象，後面會詳細說明。

右鍵請求出現菜單，Charles的右鍵菜單功能比fiddler強大太多了。

雙擊請求進入列表視圖，相似fiddler，方便查看和過濾請求。

Charles的過濾查找功能很是贊，很快速：

請求詳情跟fiddler類似，但直觀很多：

工具視圖基本講解完畢，接下來咱們用Charles作點事情。

本地代理和遠程代理

Charles的代理服務器端口跟fiddler同樣都是8888，即你的本機ip:8888。

咱們的目標將一個壓縮文件代理成本地的源碼文件。

點擊「Map Local」後：

index-min.js代理成index.js，刷新頁面試試。

代理成功，so easy!

Charles的樹狀視圖比fiddler的列表視圖好的地方在於，屢次刷新後的請求會被概括到樹裏面，更加一目瞭然，用fiddler的時候，有點強迫症的同窗，都要點擊clear，有木有…

Charles是支持子目錄代理哦，很是實用的功能：(使用通配符*)

本地地址選擇個子目錄，不須要通配符。

如何判斷是否代理成功呢?

這點Charles比fiddler人性化多了。

校驗是否代理成功，最省力的方式是點擊工具條上的刷新按鈕，刷新單個請求，若是代理成功，Charles會往「Notes」界面打個log，好比 Mapped to local file: C:\www\htdocs\gallery\uploader\1.5\build\index-min.js。

去除代理配置

小技巧：全部的配置開關均可以經過工具條上的「工具」設置(倒數第二個按鈕)。

去掉代理配置：

小技巧：建議開啓No Caching，不緩存請求。

mobile代理功能

手機或平板頁面的調試，咱們須要把請求代理到pc端的Charles上。

必須確保mobile端和pc端連的是相同的無線網絡。

ios的配置很是簡單

(上圖借用我同事自寒的截圖)

服務器ip設置成pc的ip，端口好設置成8888便可。

而後mobile終端能夠刷新試試。

安卓機器的代理

首先，安卓機器必須有root權限，其次須要藉助app才行，在安卓的任意市場搜索 ProxyDroid，灰常好用的代理app。

有些瀏覽器是自帶了代理配置功能，好比opera mobile，輸入opera:config ，不過我試了下沒代理成功，不知道是否是手機問題。

wp8的代理設置也很簡單，手機鏈接wifi 並進行設置下 設置–WiFi–長按鏈接好的WIFI–彈出編輯選項。

試試遠程代理

代理配置

Charles支持https和sockets的代理，還支持SSL，很是全面。

網速模擬功能

throttle功能對於前端來講很是實用，能夠看頁面在低網速下的表現，從而找出優化的點。

在線上環境一般有些由於網速慢致使的bug，在本機沒法重現，那時候就很抓瞎，若是嫌遠程麻煩，推薦使用throttle。

首先先配置下throttle。

咱們要看頁面在3G環境下的表現：

(Charles的預配置對於中國的網絡環境並不許確，電信、移動、網通的速度還有有明顯差別。)

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

Bandwidth(帶寬)、Utilistation(利用百分比)、Round-trip(往返延遲)、MTU(字節)(MTU的說明請看百度百科)。

斷點功能

Charles另外一個很是實用的功能，對於開發者和測試人員來講，堪稱神器。Charles可以斷到發送請求前(篡改Request)和請求後(篡改Response)。

場景：ajax發送請求，咱們須要測試接口的各類邊界狀況，好比出錯、超時等表現，Charles的斷點+隨意篡改，很是方便測試。

upload.php是咱們要測試的上傳接口，右鍵選擇「BreakPoints」，開啓斷點。

小技巧：不用在web界面中操做，使用repeat功能，就可再次發送同樣的請求：

斷點列表查看

能夠指定斷點「get」請求仍是「post」請求。

重複發送請求

repeat功能對於測試同窗特別有用，能夠檢驗接口的健壯性。

repeat功對於前端的價值是不須要刷新頁面，只須要repeat請求，好比檢驗代理是否成功，修改請求後執行等。

「repeat」重複發送一次請求。

「repeat Advances」能夠自定義重複次數和重複間隔。

捕獲記錄控制

捕獲的請求太多，容易產生干擾，Charles能夠對捕獲記錄進行過濾。

而後配置「exclude」：

web界面

Charles有個有趣的web界面：

強大的是能夠控制是否遠程能夠訪問這個界面，還能夠設置用戶名和密碼…碉堡了…

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

Charles還有其餘有趣功能等待你們挖掘，因爲用的比較少，這裏就再也不累述。