在日常開發(fā)中，我們無法看到應(yīng)用程序與服務(wù)器之間發(fā)送和接收的內(nèi)容，沒有這種可見性，我們?cè)诖_定故障的確切位置時(shí)會(huì)非常困難且耗時(shí)。而Charles是一個(gè)運(yùn)行在PC上的Web代理，我們將應(yīng)用程序配置為通過Charles訪問網(wǎng)絡(luò)，便可以在Charles上記錄并顯示發(fā)送和接收的所有數(shù)據(jù)，進(jìn)而可以大大提高調(diào)試程序的效率。

從下圖可以看出Charles的角色：

Charles有以下幾個(gè)常用功能：

• 請(qǐng)求預(yù)覽：通過分組或序列視圖預(yù)覽和過濾請(qǐng)求數(shù)據(jù);
• 請(qǐng)求抓包：抓取HTTP和HTTPS的請(qǐng)求數(shù)據(jù)和響應(yīng)數(shù)據(jù);
• 請(qǐng)求斷點(diǎn)：攔截指定的請(qǐng)求或響應(yīng)，預(yù)覽中間的數(shù)據(jù);
• 數(shù)據(jù)修改：修改請(qǐng)求數(shù)據(jù)和響應(yīng)數(shù)據(jù)以配合數(shù)據(jù)測試;
• 請(qǐng)求重發(fā)：指定請(qǐng)求重復(fù)發(fā)送，以測試后端功能和性能;
• 網(wǎng)速模擬：設(shè)置網(wǎng)速延遲，模擬手機(jī)上2G/3G/4G網(wǎng)絡(luò);

由于Charles的功能很多，很難在文章中詳盡介紹，所以作者以在項(xiàng)目中對(duì)Charles的使用為切入點(diǎn)，對(duì)最常用、最有用的幾個(gè)功能進(jìn)行介紹。

一、安裝Charles

Charles是收費(fèi)軟件，有30天的免費(fèi)試用期限，

之后每使用30分鐘會(huì)被強(qiáng)退一次，重啟后可繼續(xù)使用。

從Charles官網(wǎng)可以獲取Charles安裝包。

二、請(qǐng)求預(yù)覽

Charles啟動(dòng)后，就運(yùn)行在抓包模式。由于Charles會(huì)自動(dòng)配置PC瀏覽器的代理，所以，隨意打開一個(gè)網(wǎng)頁(只要有網(wǎng)絡(luò)請(qǐng)求即可)即可預(yù)覽到請(qǐng)求信息。

PS：如果使用插件為瀏覽器設(shè)置了獨(dú)立代理，請(qǐng)關(guān)閉插件或者設(shè)置成系統(tǒng)代理。

Charles提供了Structure和Sequence兩種預(yù)覽模式。

Structure以域名對(duì)請(qǐng)求進(jìn)行分組，可以很方便地預(yù)覽同一域名下的請(qǐng)求數(shù)據(jù)，也方便于日常開發(fā)中對(duì)某一服務(wù)接口的分析和處理。圖示如下：

Sequence以時(shí)間順序顯示請(qǐng)求信息，可以最直接的預(yù)覽請(qǐng)求信息。在此模式下，可以使用Filter過濾請(qǐng)求，針對(duì)性分析。圖示如下：

在兩種模式下，都可以通過切換標(biāo)簽(Overview、Request、Response等)預(yù)覽不同類型的請(qǐng)求信息。在最常用的Request和Response標(biāo)簽下，還可以通過切換子標(biāo)簽(Headers、Cookies、Text等)預(yù)覽對(duì)應(yīng)標(biāo)簽詳細(xì)內(nèi)容。圖示如下：

三、請(qǐng)求抓包

使用工具欄的白圓紅點(diǎn)按鈕(快捷鍵是“Command+R”)可以使Charles在抓包(Start Recording)和不抓包(Stop Recording)之間切換。使用此按鈕，在需要調(diào)試時(shí)再打開抓包功能可以有效減少干擾信息，而快速抓取到需要調(diào)試的請(qǐng)求。

對(duì)從手機(jī)(以iPhone示例)發(fā)出的請(qǐng)求進(jìn)行抓包，需要保證iPhone和PC工作在同一局域網(wǎng)內(nèi)。

第1步：獲取PC的IP地址

在Charles菜單欄 -> Help -> Local IP Address中可以查看PC的IP地址。圖示如下：

也可以在Mac終端使用命令ifconfig en1查看PC的IP地址。圖示如下：

第2步：配置iPhone代理

在iPhone的 設(shè)置 -> 無線局域網(wǎng) -> 局域網(wǎng)信息(i) -> 配置代理 -> 手動(dòng)中配置代理，服務(wù)器輸入框中填寫PC的IP地址，端口輸入框中填寫Charles的代理端口(一般是8888)。圖示如下：

具體的端口可以從Charles菜單欄 -> Proxy -> Proxy Settings中查看。圖示如下：

iPhone代理配置完成后，Charles會(huì)彈出連接提示框，點(diǎn)擊Allow之后即可使用Charles對(duì)從該iPhone發(fā)出的請(qǐng)求進(jìn)行抓包了。圖示如下：

第3步：抓包HTTPS請(qǐng)求

在配置iPhone代理完畢后，就可以通過Structure或者Sequence窗口預(yù)覽HTTP請(qǐng)求的數(shù)據(jù)了。但由于HTTPS請(qǐng)求被加密過，預(yù)覽請(qǐng)求時(shí)只能預(yù)覽到亂碼數(shù)據(jù)。要預(yù)覽到HTTPS請(qǐng)求的數(shù)據(jù)明文，需要PC和iPhone安裝證書授權(quán)。

(1) PC安裝證書

在Charles菜單欄 -> Help -> SSL Proxying -> Install Charles Root Certificate中可以為PC安裝證書，證書可以在Mac的鑰匙串中查看。圖示如下：

證書可以在Mac的鑰匙串中查看，雙擊證書，將信任權(quán)限設(shè)定為始終信任。圖示如下：

(2) iPhone安裝證書

在iPhone瀏覽器中訪問 http://charlesproxy.com/getssl 可以下載證書并安裝。此地址一般不會(huì)變化，可以在Charles 菜單欄 -> Help -> SSL Proxying -> Install Charles Root Certificate on a Mobile Device or Remote Browser中查看***的官方證書下載地址。圖示如下：

基于iOS的證書信任機(jī)制，在安裝完成并信任證書后，需要到iPhone設(shè)置 -> 關(guān)于本機(jī) -> 證書信任設(shè)置 中啟用根證書。圖示如下：

這樣，就可以使用Charles中抓包iPhone發(fā)出的HTTPS請(qǐng)求并預(yù)覽明文數(shù)據(jù)了。

抓包模擬器上的HTTPS請(qǐng)求需要點(diǎn)擊Install Charles Root Certificate in iOS Simulators安裝證書。

(3) 啟動(dòng)抓包SSL權(quán)限

在Charles菜單欄 -> Proxy -> SSL Proxying Settings中勾選Enable SSL Proxying，然后在Locations中添加需要抓包的Host和Port即可。圖示如下：

也可以在抓包界面，右鍵點(diǎn)擊某條/組請(qǐng)求，在彈出的選項(xiàng)列表中點(diǎn)擊Enable SSL Proxying啟用權(quán)限。圖示如下：

四、請(qǐng)求斷點(diǎn)

在Charles的請(qǐng)求預(yù)覽界面中，右鍵點(diǎn)擊某條/組請(qǐng)求，在彈出的選項(xiàng)列表中有Breakpoints選項(xiàng)。圖示如下：

點(diǎn)擊Breakpoints后即為該請(qǐng)求設(shè)定了斷點(diǎn)。默認(rèn)情況下，在該請(qǐng)求的Request / Response過程都會(huì)受斷點(diǎn)控制，即在Request數(shù)據(jù)發(fā)送到的服務(wù)端之前會(huì)被暫停，在Response數(shù)據(jù)發(fā)送到客戶端之前也會(huì)被暫停?？梢詮腃harles菜單欄 -> Proxy -> Breakpoint Settings中編輯斷點(diǎn)的參數(shù)。比如，只需要對(duì)Response過程加斷點(diǎn)，可以將Request的勾選狀態(tài)取消。圖示如下：

在斷點(diǎn)狀態(tài)下，可以預(yù)覽和修改請(qǐng)求的中間數(shù)據(jù)，之后點(diǎn)解Execute按鈕即可繼續(xù)執(zhí)行請(qǐng)求。

五、數(shù)據(jù)修改

Rewrite和Breakpoint Editing都可以起到修改請(qǐng)求數(shù)據(jù)的作用。

1. Rewrite

在Charles菜單欄 -> Tools -> Rewrite中可以開啟Rewrite功能，點(diǎn)擊Add按鈕可以添加一條設(shè)置，并可以在右側(cè)的Locations和Rules中分別添加要Rewrite的請(qǐng)求路徑和Rewrite規(guī)則。圖示如下：

Rewrite適合應(yīng)用于對(duì)請(qǐng)求的批量和長期修改，對(duì)請(qǐng)求數(shù)據(jù)影響較大(測試結(jié)束后經(jīng)常忘記去掉規(guī)則)。所以，在一些輕量級(jí)的數(shù)據(jù)修改場景中，我經(jīng)常結(jié)合Breakpoint功能修改數(shù)據(jù)。

2. Breakpoint Editing

結(jié)合斷點(diǎn)功能，可以很好的實(shí)現(xiàn)臨時(shí)修改請(qǐng)求的Request / Response數(shù)據(jù)的需求。為某條請(qǐng)求設(shè)置斷點(diǎn)后，當(dāng)該請(qǐng)求發(fā)生時(shí)，會(huì)自動(dòng)跳到斷點(diǎn)窗口。點(diǎn)開Edit Request / Response界面，可以看到中間信息，選擇合適的數(shù)據(jù)格式(HTML、Json等)進(jìn)行修改。修改完成后，點(diǎn)擊Execute按鈕即可在終端上看到修改后的的效果。圖示如下：

六、請(qǐng)求重發(fā)

在Charles的請(qǐng)求預(yù)覽界面中，右鍵點(diǎn)擊某條/組請(qǐng)求，在彈出的選項(xiàng)列表中有Repeat和Advanced Repeat兩個(gè)選項(xiàng)。圖示如下：

單擊Repeat會(huì)重發(fā)該請(qǐng)求一次，常用于測試服務(wù)接口能否正常訪問，客戶端能否正常收到返回?cái)?shù)據(jù)等。單擊Advanced Repeat會(huì)彈出重發(fā)參數(shù)編輯頁面，圖示如下：

在此編輯界面上，可以自定義Iterations(重發(fā)次數(shù))、 Concurrency(并發(fā)數(shù))和 Repeat(重發(fā)延時(shí))，常用于對(duì)服務(wù)接口進(jìn)行壓力測試。

七、網(wǎng)速模擬

在Charles菜單欄 -> Proxy -> Throttle Settings中可以啟用Throttling(節(jié)流)功能，并自定義Locations(受限服務(wù)接口)和Throttle Configuration(節(jié)流配置)。支持對(duì)Throttle preset(預(yù)置的數(shù)據(jù)傳輸方式)、Bandwidth(帶寬) Utilisation(利用比率)、 Round-trip latency(往返延遲)、MTU(***傳輸單元) Reliability(可靠性) Stability(穩(wěn)定性)等參數(shù)進(jìn)行編輯。其中，在Throttle preset支持模擬3G/4G網(wǎng)絡(luò)環(huán)境。圖示如下：

使用Throttle功能，可以方便地排插因?yàn)槿艟W(wǎng)而導(dǎo)致的bug，而這類bug在線上很容易出現(xiàn)，而且很難排查復(fù)現(xiàn)。

【本文是51CTO專欄機(jī)構(gòu)360技術(shù)的原創(chuàng)文章，微信公眾號(hào)“360技術(shù)（ id: qihoo_tech）”】

戳這里，看該作者更多好文