一、下載/安裝/配置
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），那么如何處理此問題呢？
- 手機和電腦在同一wifi下，手機wifi配置http代理，ip是電腦ip，端口一般默認8888
- 安裝SSL證書到手機，Help -> SSL Proxying -> Install Charles Root Certificate on a Mobile Device
- 在手機上輸入彈窗提示網址后，下載安裝證書
- charles，Proxy -> SSL Proxying Settings
- 點擊add： host（寫你要抓的網址url）；端口443
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目錄即可
二、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連接不會關閉，如果客戶端再次訪問這個服務器上的網頁，會繼續使用這一條已經建立的連接 |
| 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遵循的緩存機制。各個指令含義如下: |
三、關鍵詞解釋
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
其他信息
四、界面功能初探
工具條包含了Charles的大部分功能：
有幾個功能比較抽象，后面會詳細說明。
右鍵請求出現菜單，Charles的右鍵菜單功能比fiddler強大太多了。
雙擊請求進入列表視圖，類似fiddler，方便查看和過濾請求。
Charles的過濾查找功能非常贊，很快速：
請求詳情跟fiddler相似，但直觀不少：
五、網速模擬功能
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界面：
十、Charles目前尚有問題的地方
1.同樣設置在一些機器可以捕獲到Google Analytics的請求,但有些不行,暫時還找不到原因.
2.暫時無法捕捉到微信等請求,可能因為使用的協議不同所以無法捕獲,這也是其局限性之一.
3.在一些機器開啟charles捕獲鏈接時使用新浪微博登錄時會出現崩潰現象,原因也暫時不明.
也可以看看此人的博客，超好的哦~