目標：
- 能夠用charles分析前後端問題
- 能夠用charles模擬弱網測試環境
- 能夠用charles的斷點構建異常的測試場景
工具簡介
是什麼
基於HTTP協議的代理伺服器，透過成為電腦或者瀏覽器的代理，擷取請求和請求結果達到分析抓包的目的。
特點：跨平臺、半免費（免費版和收費版）
工作原理
前置步驟：
- 執行charles並配置代理
- 在客戶端上面需要配置代理
步驟：
- 客戶端傳送請求
- charles接收後發給服務端
- 服務端返回請求結果給charles
- charles轉發給客戶端
主要功能
- 支援HTTP以及HTTPS代理
- 支援流量控制（可以做弱網環境測試）
- 支援介面併發請求（可以做一些簡單的效能/壓力測試）
- 支援重發網路請求（可以做簡單介面測試）
- 支援斷點除錯
優點
和Fiddler對比的優點：
- 支援linux、macos
- 支援按照域名和按照介面檢視報文，簡潔明瞭
- 支援反向代理
- 網路限速可以選擇網路型別
- 可以解析AMF協議
安裝與配置
安裝
charles下載安裝教程詳細講解（抓包）-CSDN部落格
元件介紹
頁面佈局
主導航欄
請求導航欄
請求資料欄
代理設定
Charles配置代理
客戶端配置代理
Windows（谷歌瀏覽器為例）
注：在charles中，可以使用選單欄中help>>>local ip address檢視本機ip地址
MacOS
常規方法
快捷設定
IOS代理設定
- 在IOS手機中選擇“設定”>>>“無線區域網”
- 點選已連線的無線網路名稱
- 在HTTP代理的配置代理中選擇“手動'
- 輸入伺服器P地址及端點，點選“儲存”
Android手機代理設定
- 在Android.手機中選擇“設定”>>>“WLAN”
- 長按已連線的無線網路名稱，點選“修改網路
- 勾選“顯示高階選項”
- 在代理選擇項中選擇“手功”
- 輸入伺服器P地址及埠，點選“儲存”
訪問控制
場景1：某IP地址在IP Range中，該IP地址可以訪問網路
場景2：某IP不在IP Range中，勾選了Prompt to allow unauthorized connections，則當該IP地址訪問網路的時候，會提示確認彈窗
場景3：某IP不在IP Range中，沒有勾選Prompt to allow unauthorized connections，則預設該IP不可訪問網路
案例
抓包分析問題
測試過程中經常會遇到定位問題是前端還是後端的場景，這個時候可以透過抓包工具Charles，透過對抓取到的報文進行分析，從而定位問題
抓包分析的步驟如下：
- Charles代理配置
- 客戶端代理配置
- 操作客戶端軟體
- 分析請求資料
舉個例子：在人事管理系統中修改員工的資訊時，如果員工姓名超長
會產生以下兩個問題
問題一：會提示“系統繁忙”
問題二：會顯示兩次提示資訊
經過抓包分析，後臺響應報文只有一次返回，返回資訊為“系統繁忙”，所以問題一可以定位為後臺問題，後臺返回提示資訊不夠友好，問題二可以定位為前端問題，因為後臺只返回了一次，前端彈窗提示了兩次。
未配置證書抓取HTTPS資料
如果沒有配置證書，直接使用charles抓取https資料，會發現都是亂碼
Windows
證書配置
Charles Https代理配置
- 在Charlesi視窗中點選選單“proxy”->“SSL proxying setting
- 在開啟的設定視窗中勾選“Enable SSL Proxying'
- 點選“OK”
MacOS證書配置
IOS證書配置
第五步：返回“通用”頁面，選擇“關於本機”
第六步：點選“證書信任設定”，啟用Charles Proxy CA證書並確認
提示：IOS手機證書，需要先把手機代理設定為電腦地址後才能下載證書（別人說的，不知道真假）
Charles流量配置（模擬弱網）
參考資料：
流量配置可以讓Charles模擬不同網路環境下的操作，可以用來做弱網測試
步驟如下：
- 在Charles視窗中點選選單“Proxy”->“Throttle Setting”
- 在開啟的設定視窗中勾選“Enable Throttling”
- 在“Throttle preset'”下拉框中選擇對應的網路型別
- 點選“OK”
可靠性影響是否丟失資料，穩定性影響是否斷網
Charles斷點配置
斷點配置一般用來構建異常的測試場景，步驟如下：
- 右擊介面連結，選擇“Breakpoints”
- 在瀏覽器重新整理對應介面的頁面
- 此時會自動跳轉到Charles並顯示出介面請求資訊
- 點選“Edit Request”,修改請求的資訊，點選“Execute”
- 點選“Edit Response”
- 在資料格式欄中選擇合適的顯示格式，比如“Json”
- 修改對應的資料，點選“Execute”
- 回到瀏覽器檢視資料應該為修改之後的Responsel的資訊
