我們在進行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的幾個常用功能，后續有時間看看把其他功能進行補充。

總結

以上是生活随笔為你收集整理的charles使用(安装、mock、限速、断点功能)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。