我們在進行B/S架構的Web項目開發時，在前端頁面與後臺交互的調試的時候，通常使用在JSP中加入“debugger;”斷點，然後使用瀏覽器的F12開發者工具來查看可能出錯的地方的數據。或者使用HttpWatch來抓包分析。
在開發移動端項目沒有網頁的情況下，就不能通過這種方式抓取數據進行分析了。這時可以使用Charles滿足以上要求。Charles是一款Http代理服務器和Http監視器，當移動端在無線網連接中按要求設置好代理服務器，使所有對網絡的請求都經過Charles客戶端來轉發時，Charles可以監控這個客戶端各個程序所有連接互聯網的Http通信。
Charles 主要的功能包括：
1）截取 Http 和 Https 網絡封包。
2）支持重發網絡請求，方便後端調試。
3）支持修改網絡請求參數。
4）支持網絡請求的截獲並動態修改。
5）支持模擬慢速網絡。
1.Charles安裝與配置：
1.1.打開瀏覽器訪問Charles官網https://www.charlesproxy.com/，下載相應系統的Charles安裝包，然後一鍵安裝即可。
安裝完成之後，打開Charles，界面如下：
首先，電腦安裝證書：
以上步驟確認安裝證書；
1.2.以上由於勾選瞭如下選項，抓取到了電腦本地發送的請求，展示了強求相關域名；
1.3.上圖中，有些請求是鎖的標誌，有的不是，有鎖的標誌是因爲沒有允許，需要先允許再重新請求相關請求，就可以正常查看了；
做如下操作，允許某個請求：
1.4.可以看到請求欄有很多很多的鎖標誌，這時一個一個打開太過繁瑣，工作量很大，此時可以做相關設置允許所有：
如下：
如上操作之後，可以正常獲取網絡請求；
1.5.以上操作抓取到了電腦本地請求，那麼如何抓取移動端APP的請求呢？
需求做以下配置：
1）查看Charles端口：
2）查看電腦IP：
兩種方法：
- 打開cmd,進入dos窗口，輸入ipconfig查看電腦IP;
可以看到IP如下：
已經知道電腦IP和Charles端口，那麼可以在手機WiFi處做如下配置：
確認之後，查看Charles頁面是否有如下提示，如有提示，表示連接成功了，注意點擊allow允許：
配置好之後，手機在瀏覽器中輸入chls.pro/ssl安裝證書：
輸入之後，跳轉如下頁面：(以iOS爲例，安卓也差不多)
如上配置成功，可以成功抓取移動端請求了；
注意：
- 安裝證書時如果提示不安全，繼續即可，安裝這個證書是保證Charles可以截取到你手機與服務端請求的交互，進行代理，不會有其他的安全隱患；
- 查看電腦IP時，提供另一種方式也可，推薦使用上面ipconfig的方式：
2.以上操作完成了安裝與配置操作，下面開始介紹Charles常用功能：
2.1.基本功能;
1）界面
Structure模式的優點 :
1.以域名劃分請求信息 可以很容易定位需要分析和處理的數據。
2.清晰看請求的數據結構，
展開域名，可以看到請求，我這邊手機隨意打開一個應用，看到如上請求，選中任意請求，右邊可以看到常用的概要，請求和響應數據；
Sequence模式：
Sequence模式的優點 :
1.請求快就在前面顯示, 因爲這裏是以數據請求的順序去執行的
2.可以很清晰的看到全部請求,(包括資源請求,圖片,文本,音樂等等)
在sequence中可以看到按時間順序排序的請求，統一可以看到請求和響應，看需求使用；
Filter處也可以過濾請求;
2）mock功能：
Charles 的 Map 功能分 Map Remote 和 Map Local 兩種，顧名思義，Map Remote 是將指定的網絡請求重定向到另一個網址請求地址，Map Local 是將指定的網絡請求重定向到本地文件。
當需求修改數據時，可使用mock功能。
步驟;
1)選中一個請求，保存響應：
2）報保存的響應複製到bejson格式化工具中轉換：
3）在保存的文件中把精選排行改成精選：
4)在Charles中做如下設置：
5）手機重新刷新請求;
可以看到圖標變成文本圖形，說明mock成功，看響應數據，是修改後的精選文案，查看手機顯示：
看到手機展示由精選排行變爲修改後的精選，mock成功！！
注意：
上面用的是mock local功能，還有mock remote功能也是一樣使用：
3）限速功能：
在做移動開發的時候，我們常常需要模擬慢速網絡或者高延遲的網絡，以測試在移動網絡下，應用的表現是否正常(如模擬應用在網絡較慢時的響應時間等情景)。Charles 對此需求提供了很好的支持。
限速之後，看手機的響應，可以看到頁面響應更慢了，如果效果不明顯，可以模擬較極端的情況。
4）斷點功能：
有些時候爲了調試服務器的接口，我們需要反覆嘗試不同參數的網絡請求。Charles 可以方便地提供網絡請求的修改和重發功能。只需要在以往的網絡請求上點擊右鍵，選擇 “Edit”，即可創建一個可編輯的網絡請求。
步驟;
1)選中需要修改的接口，右鍵-breakpoint，加入斷點：
2）在斷點設置中進行設置：
3）手機刷新頁面，重新請求這個接口，根據需求進行編輯：
4）查看手機;
修改成功！！
以上，介紹了Charles的幾個常用功能，後續有時間看看把其他功能進行補充。