Charles使用心得總結

1、下載/安裝/配置

1.1下載並安裝Charles.

mac版和window版都有,下載能夠去Charles官網(http://www.charlesproxy.com/download/),下載下來的是試用版(截止2013.08.25最新版本是3.7),雖然只是試用版有必定限制,好比開機delay10s,每隔5分鐘提示你轉爲試用版,30分鐘後強行關閉,但鑑於他強大的功能,30分鐘其實已經足夠.目前3.6在百度上有破解版,自行百度之.

1.2 配置Charles

1)打開charles後,在proxy標籤項關閉自身代理,此選項開啓會抓取電腦的網絡請求，影響咱們測試。實際上咱們在測試手機app並不須要，故關閉。以下:

 ​

2)設置pc端代理。以下圖選擇proxy setting.以下圖所示:

 ​

Proxies一項設置以下,默認端口爲8888，用於手機連上代理的端口.

 ​

接下來SSL一項以下設置:

 ​

即容許ssl代理，下方的*.*是要經過add按鈕添加進去的。在按」add」按鈕以後兩個輸入框均輸入」*」,」*」便可.

3) 設置容許代理的ip地址範圍。打開proxy->access control setting,以下：

 ​

將你容許的ip地址段填寫進去。以下圖：

 ​

肯定本身要填的ip地址段，

簡單的方式：點擊菜單欄，選擇help---》右擊，選擇Local IP Address,便可查看到本機的IP

笨辦法：window使用cmd命令行 輸入ipconfig回車 便可看到本身目前所在的ip，如192.168.0.108（首先這個ip地址最好是無線路由分配的），便可以設置爲192.168.0.0/24.如此設置以後192.168.0.0~192.168.0.255的地址都可以訪問你的電腦，經過你的電腦進行代理上網。以下圖：

​

1.3設置手機端的相關參數

前提注意事項：

ios 抓包https網頁（如未配置，會顯示unknown），那麼如何處理此問題呢？

step1：給手機安裝SSL證書

• 手機和電腦在同一wifi下，手機wifi配置http代理，ip是電腦ip，端口通常默認8888
• 安裝SSL證書到手機，Help -> SSL Proxying -> Install Charles Root Certificate on a Mobile Device
• 在手機上輸入彈窗提示網址後，下載安裝證書

ios 10以上，須要到通用-關於手機-證書信任證書

step2：charles SSL Proxying 增長你想要抓的網址

• charles，Proxy -> SSL Proxying Settings
• 點擊add： host（寫你要抓的網址url）；端口443

兩步作完以後手機再次發起請求，charles已經能看到https網頁的接口數據了

 

iOS：點擊連接wifi後方的「i」進入詳情頁，拉倒最下方「http代理」處，點擊「手動」並填寫IP和端口號

 

 ​            ​

Android：在wifi界面，長按所鏈接wifi彈出菜單中選擇「代理設置」後填寫IP和端口保存。

   ​     ​

Android手機Charles證書如何處理？

• Help -> SSL Proxying -> Save Charles Root Certificate...，將這個保存到桌面（只要記住在哪裏便可），選擇哪一個格式的均可以，命名爲1.cer

• 將1.cer文件發送到Android手機上

• 再次進入手機設置，點擊「安全和隱私----更多安全設置->從存儲設備安裝->Download->.crt文件->肯定」，在彈出窗，對證書命名爲：Charles，點擊肯定（首次安裝證書會讓輸入鎖屏密碼）。至此證書安裝成功！當即在電腦端對手機網絡進行抓包吧！
• 上述步驟不一樣廠商的手機仍是稍微有些區別的
• 在Android手機上找到1.cer文件，打開手機的密碼，而後從新命名1.cer文件便可。

而後關閉pc端的防火牆，測試是否鏈接電腦成功。（此步驟很重要）

測試方法：點擊隨便一個應用,看charles的Structure欄中有沒有出現一些文件夾，相似下圖，若是有則成功；

 ​

1.4如何安裝破解版

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

2、charles經常使用的一些功能介紹

2.1 忽略請求功能

因爲某些時候咱們只須要關注某一個應用的請求,因此過濾掉其餘不須要顯示的請求可讓咱們集中精力在該應用.點擊某行右鍵選擇ignore（以下圖），能夠將此連接忽視，將干擾的網絡請求屏蔽，防止影響咱們測試：

​

 

2.2 複製原連接

此功能能夠複製請求的原連接，只要你使用Chrome瀏覽器安裝了son viewer的插件，黏貼上去回車便可看到返回的數據結構。同時也方便於發給服務器的開發人員調試用。以下:

 ​

2.3 清空捕獲的網絡請求

正常狀態下在structure欄裏按ctrl+a,而後按delete鍵，就能夠清除全部捕獲的網絡請求，

2.4查看請求的相關數據

以下圖，overview能夠方便的看出請求的時間長短，請求的大小和返回數據的大小，即數據請求的大概狀況；

Request用於查看請求的參數是否攜帶正確。以下圖:

 ​

而response能夠查看返回的數據結構是否是咱們想要的，以下圖，能夠明確的看到拿到的封面數據是否正確。

 ​

注：使用代理沒法訪問一些安全驗證網站如新浪微博綁定頁面，目前android版使用代理直接訪問在某些機器上會直接閃退關掉該頁面，故須要綁定時請關閉代理以後再鏈接上代理驗證。

2.5分區介紹

Client 頭域

Accept	瀏覽器端能夠接受的媒體類型
Accept-Encoding	瀏覽器申明本身接收的編碼方法，一般指定壓縮方法，是否支持壓縮，支持什麼壓縮方法（gzip，deflate）
Accept-Language	瀏覽器申明本身接收的語言
User-Agent	告訴HTTP服務器， 客戶端使用的操做系統和瀏覽器的名稱和版本.

 

Transport 頭域

Connection	Connection: keep-alive 當一個網頁打開完成後，客戶端和服務器之間用於傳輸HTTP數據的TCP鏈接不會關閉，若是客戶端再次訪問這個服務器上的網頁，會繼續使用這一條已經創建的鏈接 Connection: close 表明一個Request完成後，客戶端和服務器之間用於傳輸HTTP數據的TCP鏈接會關閉， 當客戶端再次發送Request，須要從新創建TCP鏈接。
Host	主要用於指定被請求資源的Internet主機和端口號，它一般從HTTP URL中提取出來的

 

Entity頭域

Content-Length	發送給HTTP服務器數據的長度。
Content-Type

 

Miscellaneous 頭域

Referer

提供了Request的上下文信息的服務器，告訴服務器我是從哪一個連接過來的，好比從我主頁上連接到一個朋友那裏，他的服務器就可以從HTTP Referer中統計出天天有多少用戶點擊我主頁上的連接訪問他的網站。

 

Cookie/Login 頭域

Cookie

最重要的header, 將cookie的值發送給HTTP 服務器

 

Cache 頭域

If-Modified-Since	把瀏覽器端緩存頁面的最後修改時間發送到服務器去，服務器會把這個時間與服務器上實際文件的最後修改時間進行對比。若是時間一致，那麼返回304，客戶端就直接使用本地緩存文件。若是時間不一致，就會返回200和新的文件內容。客戶端接到以後，會丟棄舊文件，把新文件緩存起來，並顯示在瀏覽器中。
If-None-Match	If-None-Match和ETag一塊兒工做，工做原理是在HTTP Response中添加ETag信息。 當用戶再次請求該資源時，將在HTTP Request 中加入If-None-Match信息(ETag的值)。若是服務器驗證資源的ETag沒有改變（該資源沒有更新），將返回一個304狀態告訴客戶端使用本地緩存文件。不然將返回200狀態和新的資源和Etag. 使用這樣的機制將提升網站的性能
Pragma	防止頁面被緩存
Cache-Control	這個用來指定Response-Request遵循的緩存機制。各個指令含義以下: Cache-Control:Public 能夠被任何緩存所緩存（） Cache-Control:Private 內容只緩存到私有緩存中 Cache-Control:no-cache 全部內容都不會被緩存

 

3、關鍵詞解釋

3.1 session

Charles有個會話（session，不是指http中的session）的概念，能夠理解爲瀏覽器中的tab，這個功能在須要調試多個站點頁面時很實用，當你刷新頁面的時候，只會在當前session中捕獲請求。（PS：ctrl+N建立個新的session，ctrl+W關閉當前session）

3.2 Structure/Sequence

Structure是樹狀結構顯示，Sequence是水平結構顯示

垃圾桶圖標 ： 功能是clear，清理掉全部請求顯示信息

Filter ： 過濾

3.3 Overview 

overview查看此次請求的詳細內容，例如耗時詳細列舉了請求開始時間、結束時間，響應開始時間、結束時間，總耗時、DNS耗時、網絡延時等。
Size：也詳細列出了請求頭大小、響應頭大小、壓縮比例等內容。
URL：進行網絡請求的連接；

Status：當前狀態，complete表示請求完成；

Responce Code：返回碼。不一樣的接口，不一樣的請求結果，返回碼都不一樣；

Protocol：使用的協議；

Method：請求方式，如GET請求，POST請求等；

Kept Alive：判斷當前是否正在連接（活躍）；

Content-Type：發送的內容類型，如這裏用的是XML文本，以UTF8的方式發送；

Client Address：客戶端的IP地址；

Remote Address：遠程服務器的IP；

 

3.4 Timing

Request Start Time：請求開始的時間； 

Request End Time：請求結束的時間； 

Response Start Time：返回開始的時間； 

Response End Time : 返回結束的時間； 

Duration : 總時間； 

 

3.5 Size

Request Header ：請求的頭部大小； 

Request Header：返回的頭部大小； 

Request : 請求發送的大小； 

Response：返回數據的大小； 

Total：全部數據大小； 

Request Compression : 請求壓縮； 

Response Compression : 返回壓縮； 

 

3.6 Request/Response

request查看請求內容（底下的Headers，Query String，Cookies，Raw。）

Headers：發送請求的頭部信息；

Query String : 發送參數列表；

Cookies： 瀏覽器緩存；

Raw：發送的原生數據，包括了頭部和參數；

Reponse : 查看響應內容

Headers：是返回的頭部信息；

Text：返回信息（除去頭部）後的文本；

Hex：返回信息的16進製表示；

XML：我返回的數據是XML。

若是你返回的是JSON，這裏就會顯示JSON；

XML Text：若是你返回JSON，這裏會顯示JSON Text；

Raw：返回的全部原生數據，包括頭部；

3.7 Summary

 查看發送數據的一些簡要信息（主機，狀態碼，數據的類型，header和body大下，加載時間，總時間）

3.8 Chart

 Summary中簡要信息以圖表形式展現

3.9 Notes

其餘信息

 

4、界面功能初探

 ​

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

 ​

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

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

 ​

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

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

 ​

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

​

 

5、網速模擬功能

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

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

首先先配置下throttle。

 ​

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

 ​

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

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

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

 

6、斷點功能

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

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

 ​

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

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

 ​

斷點列表查看

 

 ​   ​

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

7、重複發送請求 

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

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

 ​

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

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

 ​

 

8、捕獲記錄控制 

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

 ​

而後配置「exclude」：

 ​

9、web界面 

Charles有個有趣的web界面：

 ​

 

10、Charles目前尚有問題的地方

1.一樣設置在一些機器能夠捕獲到Google Analytics的請求,但有些不行,暫時還找不到緣由.

2.暫時沒法捕捉到微信等請求,可能由於使用的協議不一樣因此沒法捕獲,這也是其侷限性之一.

3.在一些機器開啓charles捕獲連接時使用新浪微博登陸時會出現崩潰現象,緣由也暫時不明.

 

也能夠看看此人的博客，超好的哦~

https://blog.csdn.net/s0228g0228/article/details/52778895