我們在進(jìn)行B/S架構(gòu)的Web項(xiàng)目開發(fā)時，在前端頁面與后臺交互的調(diào)試的時候，通常使用在JSP中加入“debugger;”斷點(diǎn)，然后使用瀏覽器的F12開發(fā)者工具來查看可能出錯的地方的數(shù)據(jù)。或者使用HttpWatch來抓包分析。

在開發(fā)移動端項(xiàng)目沒有網(wǎng)頁的情況下，就不能通過這種方式抓取數(shù)據(jù)進(jìn)行分析了。這時可以使用Charles滿足以上要求。Charles是一款Http代理服務(wù)器和Http監(jiān)視器，當(dāng)移動端在無線網(wǎng)連接中按要求設(shè)置好代理服務(wù)器，使所有對網(wǎng)絡(luò)的請求都經(jīng)過Charles客戶端來轉(zhuǎn)發(fā)時，Charles可以監(jiān)控這個客戶端各個程序所有連接互聯(lián)網(wǎng)的Http通信。

Charles 主要的功能包括：

1）截取 Http 和 Https 網(wǎng)絡(luò)封包。

2）支持重發(fā)網(wǎng)絡(luò)請求，方便后端調(diào)試。

3）支持修改網(wǎng)絡(luò)請求參數(shù)。

4）支持網(wǎng)絡(luò)請求的截獲并動態(tài)修改。

5）支持模擬慢速網(wǎng)絡(luò)。

?

1.Charles安裝與配置：

1.1.打開瀏覽器訪問Charles官網(wǎng)https://www.charlesproxy.com/，下載相應(yīng)系統(tǒng)的Charles安裝包，然后一鍵安裝即可。

安裝完成之后，打開Charles，界面如下：

首先，電腦安裝證書：

以上步驟確認(rèn)安裝證書；

1.2.以上由于勾選了如下選項(xiàng)，抓取到了電腦本地發(fā)送的請求，展示了強(qiáng)求相關(guān)域名；

1.3.上圖中，有些請求是鎖的標(biāo)志，有的不是，有鎖的標(biāo)志是因?yàn)闆]有允許，需要先允許再重新請求相關(guān)請求，就可以正常查看了；

做如下操作，允許某個請求：

1.4.可以看到請求欄有很多很多的鎖標(biāo)志，這時一個一個打開太過繁瑣，工作量很大，此時可以做相關(guān)設(shè)置允許所有：

如下：

如上操作之后，可以正常獲取網(wǎng)絡(luò)請求；

1.5.以上操作抓取到了電腦本地請求，那么如何抓取移動端APP的請求呢？

需求做以下配置：

1）查看Charles端口：

2）查看電腦IP：

兩種方法：

打開cmd,進(jìn)入dos窗口，輸入ipconfig查看電腦IP;

可以看到IP如下：

已經(jīng)知道電腦IP和Charles端口，那么可以在手機(jī)WiFi處做如下配置：

確認(rèn)之后，查看Charles頁面是否有如下提示，如有提示，表示連接成功了，注意點(diǎn)擊allow允許：

?

配置好之后，手機(jī)在瀏覽器中輸入chls.pro/ssl安裝證書：

輸入之后，跳轉(zhuǎn)如下頁面：(以iOS為例，安卓也差不多)

如上配置成功，可以成功抓取移動端請求了；

注意：

安裝證書時如果提示不安全，繼續(xù)即可，安裝這個證書是保證Charles可以截取到你手機(jī)與服務(wù)端請求的交互，進(jìn)行代理，不會有其他的安全隱患；

查看電腦IP時，提供另一種方式也可，推薦使用上面ipconfig的方式：

2.以上操作完成了安裝與配置操作，下面開始介紹Charles常用功能：

2.1.基本功能;

1）界面

Structure模式的優(yōu)點(diǎn) :

1.以域名劃分請求信息 可以很容易定位需要分析和處理的數(shù)據(jù)。

2.清晰看請求的數(shù)據(jù)結(jié)構(gòu)，

?

展開域名，可以看到請求，我這邊手機(jī)隨意打開一個應(yīng)用，看到如上請求，選中任意請求，右邊可以看到常用的概要，請求和響應(yīng)數(shù)據(jù)；

Sequence模式：

Sequence模式的優(yōu)點(diǎn) :

1.請求快就在前面顯示, 因?yàn)檫@里是以數(shù)據(jù)請求的順序去執(zhí)行的

2.可以很清晰的看到全部請求,(包括資源請求,圖片,文本,音樂等等)

?

在sequence中可以看到按時間順序排序的請求，統(tǒng)一可以看到請求和響應(yīng)，看需求使用；

Filter處也可以過濾請求;

2）mock功能：

Charles 的 Map 功能分 Map Remote 和 Map Local 兩種，顧名思義，Map Remote 是將指定的網(wǎng)絡(luò)請求重定向到另一個網(wǎng)址請求地址，Map Local 是將指定的網(wǎng)絡(luò)請求重定向到本地文件。

當(dāng)需求修改數(shù)據(jù)時，可使用mock功能。

步驟;

1)選中一個請求，保存響應(yīng)：

2）報保存的響應(yīng)復(fù)制到bejson格式化工具中轉(zhuǎn)換：

3）在保存的文件中把精選排行改成精選：

4)在Charles中做如下設(shè)置：

5）手機(jī)重新刷新請求;

可以看到圖標(biāo)變成文本圖形，說明mock成功，看響應(yīng)數(shù)據(jù)，是修改后的精選文案，查看手機(jī)顯示：

看到手機(jī)展示由精選排行變?yōu)樾薷暮蟮木x，mock成功！！

注意：

上面用的是mock local功能，還有mock remote功能也是一樣使用：

3）限速功能：

在做移動開發(fā)的時候，我們常常需要模擬慢速網(wǎng)絡(luò)或者高延遲的網(wǎng)絡(luò)，以測試在移動網(wǎng)絡(luò)下，應(yīng)用的表現(xiàn)是否正常(如模擬應(yīng)用在網(wǎng)絡(luò)較慢時的響應(yīng)時間等情景)。Charles 對此需求提供了很好的支持。

限速之后，看手機(jī)的響應(yīng)，可以看到頁面響應(yīng)更慢了，如果效果不明顯，可以模擬較極端的情況。

4）斷點(diǎn)功能：

有些時候?yàn)榱苏{(diào)試服務(wù)器的接口，我們需要反復(fù)嘗試不同參數(shù)的網(wǎng)絡(luò)請求。Charles 可以方便地提供網(wǎng)絡(luò)請求的修改和重發(fā)功能。只需要在以往的網(wǎng)絡(luò)請求上點(diǎn)擊右鍵，選擇 “Edit”，即可創(chuàng)建一個可編輯的網(wǎng)絡(luò)請求。

步驟;

1)選中需要修改的接口，右鍵-breakpoint，加入斷點(diǎn)：

2）在斷點(diǎn)設(shè)置中進(jìn)行設(shè)置：

3）手機(jī)刷新頁面，重新請求這個接口，根據(jù)需求進(jìn)行編輯：

4）查看手機(jī);

修改成功！！

?

以上，介紹了Charles的幾個常用功能，后續(xù)有時間看看把其他功能進(jìn)行補(bǔ)充。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。