內容清單

• Charles 的簡介
• 安裝 Charles
• Charles 初始化設置
• 過濾網絡請求
• 截取HTTP/HTTPS數據
• 模擬弱網環境
• 修改網絡請求
• 修改服務器返回內容
• 服務器壓力測試
• 反向代理
• 解決與翻牆軟件的衝突

Charles 的簡介

Charles 是目前最主流的網絡調試工具（Charles、Fiddler、Wireshark...）之一，對於一個開發者來說與網絡打交道是日常需求，因此很多時候我們需要調試參數、返回的數據結構、查看網絡請求的各種頭信息、協議、響應時間等等。所以瞭解 Charles 並使用它

Charles 通過將自己設置為系統的網絡訪問代理服務器，這樣所有的網絡請求都會通過它，從而實現了網路請求的截獲和分析。

Chareles 不僅可以分析電腦本機的網絡請求（HTTP 和 HTTPS），還可以分析移動端設備的網絡請求。

Charles 是收費軟件，作者開發出這樣一個方便開發者使用的偉大工具，我們鼓勵使用正版軟件，但是對於一些囊中羞澀或者學生來說，有破解版的更好，別擔心，這些我都準備好了，下一個 section 會講解如何下載安裝。

安裝 Charles

• 方式1： Charles 官網地址，根據你的電腦操作系統選擇合適的下載方式。此時下載下來的是需要收費的，不差錢的同學當然可以直接購買。購買鏈接
• 方式2:按照方式1的方式去官網下載，然後下載相應 JAR包。這裡以 MAC 為例，打 Finder，選擇應用程序，選中 Charles，右擊並選擇“顯示包內容”，看到 Contents 目錄，點擊進去選擇 Java 文件夾，將下載下來的 JAR包 拖進去替換。至此，完成了 Charles 的破解。

Charles 初始化設置

Charles 的工作原理是將自身設置為系統的代理服務器來捕獲所有的網絡請求。所以使用 Charles ，我們必須設置 Charles 為系統的代理服務器。

打開 Charles，當第一次啟動的時候如果沒有購買或者沒有破解，會有倒計時，之後會看到軟件的主界面，然後會請求你賦予它為系統代理的權限。點擊授權會讓你輸入當前系統用戶的密碼。當然你也可以忽略或者拒絕該請求，然後等想要抓包的時候將它設置為系統的代理服務器。步驟：**選擇菜單中的“Proxy” -> "Mac OS X Proxy"。**如下圖：

之後你的電腦上的任何網絡請求都可以在 Charles 的請求面板中看到

看看 Charles 的主界面

• 圖上紅色圈1:這裡代表所有網絡請求的展示方式。分別名為 “Structure” 和 “Sequence”。
• Structure 將所有的網絡請求按照域名劃分並展示
• Sequence 將所有的網絡請求按照時間排序並展示
• 圖上紅色圈2：一些的網絡請求設置比如 HTTPS 以及端口等信息都在這個菜單欄設置
• 圖上紅色圈2：證書設置都在這裡進行

過濾網絡請求

由於 Charles 可以將電腦或者設置過的手機的所有網絡請求捕獲到，而且我們分析網絡傳輸應該是針對某個特定的網絡下的抓包分析，為了清楚明顯地看到我們感興趣的網絡請求通常會用到 Charles 的**“過濾網絡請求的功能”**。

• 方法1:在 Charles 主面板的左側所有網絡請求的下方可以看到看到一個 ”Filter“ 輸入欄，在這裡你可以輸入關鍵詞來篩選出自己感興趣的網絡請求。比如我想分析的網絡請求來自於”www.baidu.com" 下，你可以在下面輸入"baidu"即可。

• 
  
• 方法2:在 Charles 菜單欄的頂部會看到 “Proxy” 的選項，點擊菜單欄選擇 “Proxy” -> "Recording Settings" 。選擇 “include”。看到面板上面有一個 “Add” 按鈕，點擊後在彈出的面板裡面設置好我們需要分析的網絡請求的協議、主機名、端口、路徑、參數，當然你也可以只設置一些主要的信息，比如協議和主機名的組合。

• 方法3:一般打開 Charles 並設置好配置信息後（比如電腦本機或者設置過代理的手機）所有的網絡請求都將在 Charles 的面板上顯示，同時我們感興趣的網絡請求如果也在面板上顯示的話，“Structure”模式下可以選中需要分析的網絡請求，鼠標右擊選擇**“Focus”。“Sequence”模式下可以在面板的網絡請求顯示面板的右下角看到一個Focus**按鈕，點擊勾選後 Charles 只會顯示你感興趣的網絡請求。

截取HTTP/HTTPS數據

截取 HTTP 請求

Charles 的主要目的是抓取捕獲網絡請求，這裡以 iPhone 的抓包為例講解。

Charles 的設置

要截獲 iPhone 的網絡請求就需要為 Charles 開啟代理功能。在菜單欄選擇**“Proxy” ->"Proxy Settings"

iPhone 上的設置

在電腦“系統偏好設置”中心打開網絡查看本機 IP 地址，打開手機“設置”->“無線局域網”，進入當前使用的網絡，點擊進入當前 WIFI 的詳情頁（可以看到當前 WIFI 的基本信息，包括子網掩碼、端口、IP地址、路由器），在最下角可以看到**“DNS”和“HTTP代理”2個section。我們點擊

截取 HTTPS 請求

如果你需要捕獲 HTTPS 協議的網絡請求，那麼則需要安裝 Charles 的 CA 證書。步驟如下；

• 首先需要在 MAC 上安裝證書。點擊 Charles 頂部的菜單欄，選擇
  “Help” -> "SSL Proxying" -> "Install Charles Root Certificate"。

• 
  
• 在 keychain 處將新安裝的證書設置為永久信任

• 
  
• 即使安裝了 CA 證書，Charles 默認是不捕獲 HTTPS 協議的網絡請求，所以我們需要對某個主機下的網絡請求抓包分析的話，選中該網絡請求右擊選中 “SSL Proxying Enabled”。這樣就可以看到我們感興趣的HTTPS 網絡請求了。

如果你需要捕獲移動設備的 HTTPS 網絡請求，則需要在移動設備上安裝證書並作簡單的設置

• 選擇 Charles 頂部菜單欄選擇 “Help” ->"Install Charles Root Certificate on a Mobile Device or Remote Browser"。然後就可以看到 Charles 彈出的安裝說明了。

• 在手機設置好 Charles 代理的情況下，在手機瀏覽器輸入 “chls.pro/ssl”
  。安裝提示下載好CA證書。
• 驗證剛剛安裝的 CA證書

• 
  
• iPhone 打開設置 -> 通用 -> 關於本機 -> 證書信任設置 -> 開啟開關

• 
  
• 在 Charles 菜單欄 Proxy -> SSL Proxying Setting -> 點擊 Add 按鈕 -> 在彈出的對對話框設置需要監聽的 HTTPS 域（*:代表通配符）

• 
  
• 設置完畢，盡情抓取你想要的 HTTPS 網絡請求吧。

模擬弱網環境

在平時開發的時候我們經常需要模擬弱網環境，並作弱網環境下的適配工作。Charles 為我們提供了這個服務。

在 Charles 菜單欄選擇 “Proxy” -> "Throttle Settings"。在彈出的面板上設置網絡請求的參數（上行，下行帶寬、利用率、可靠性等等信息）。如下圖所示。

如果你想對指定主機

修改網絡請求

對於捕獲的網絡請求，我們經常需要修改網絡請求的cookie、Headers、Url等信息。Charles 提供了對網絡請求的編輯和重發功能。只需要選中需要修改編輯的網絡請求，在對應的右上角看到有一個“鋼筆”的按鈕，點擊後就可以對選中的網絡請求進行編輯了，編輯好後可以在右下角看到

修改服務器返回內容

很多時候為了方便調試代碼，我們會有這種需求，修改接口返回的數據節點或者內容、甚至是狀態碼。比如數據為空、數據異常、請求失敗、多頁數據的情況。 Charles 為我們提供了超實用的功能，

• Map 功能適合長期地將某一請求重定向到另一個指定的網絡地址或者本地 JSON 文件
• Rewrite 功能適合對網絡請求進行一些正則替換
• Breakpoints 功能適合對網絡請求進行一些臨時性的修改（類似於我們開發的斷點作用）

Map 功能

Map 功能分為 Map Local（將某個網絡請求重定向到本地 JSON 文件） 和 Map Remote 功能（將網絡請求重定向到另一個網絡接口）。

在 Charles 菜單欄選擇 “Tools” -> "Map Remote" 或 “Map Local” 即可進入相應的功能模塊。

Map Remote 功能

適合於切換線上到本地、測試服務到正式服務的場景。比如下圖從正式服務切換到測試服務

Map Local 功能

我們需要填寫重定向的原地址信息和本地目標文件。我們可以先將某個接口的響應內容保存下來（選擇對應的網絡請求，右擊點擊 Save Response ）成為 data.json 文件。然後我們編輯裡面的 status 、message、data 等信息為我們想要的目標映射文件。

如下所示，我將一個網絡請求的內容映射到我本地的一個 JSON 文件。之後這個請求的內容都從網絡變為返回我本地的數據了。

Map Local 可能會存在一個小缺陷，其返回的 HTTP Response Header 與正常的網絡請求不一樣，如果程序設置了校驗 Header 信息，此時 Map Local 就會失敗，解決辦法是同時使用 Rewrite功能將相關的HTTP 頭部信息 rewrite 成我們需要的信息

Rewrite 功能

Rewrite 適合對某個網絡請求進行正則替換，以達到修改結果的目的。

假如我的 App 的界面上的顯示的功能模塊及其點擊事件是根據接口來完成的，我想實現替換功能模塊的名稱的目的。步驟：點擊頂部菜單欄的**“Tools” -> "Rewrite"**。在彈出的面板上勾選 “Enable Rewrite”。點擊左下角的 Add按鈕，在右上角的 **Name：**處寫好本次配置的名稱（如果有多個 Rewrite，為了後期容易區分）。

• 可以針對特定的網絡請求進行 Rewrite。可以點擊右上角 Location 面板下面的 Add按鈕。在彈出的面板上設置網絡請求配置信息。注意此時需要同時設置 Protocol、Port、Host、Path信息（我測試加了 Protocol、Host、Port這3個是無效的）

• 然後對指定的 Type 和 Action 進行 Rewrite。

Type 主要有 Add Header、Modify Header、Remove Header、Host、Path等等。

Where 可以選擇 Request 和 Response。指的是下面的修改是針對 Request 還是 Response

• 完成設置後點擊 Apply 按鈕，即可生效。下次繼續請求該網絡，返回的內容就是我們剛剛設置的內容。比如當前的“政策法規”要變成“哈哈哈，我是假的政策法規”。這時候就可以使用 Rewrite 功能

Breakpoints 功能

Breakpoints 相比於其他幾個修改網絡請求的特點是隻是針對當前的網絡請求，Breakpoints 只存在於設置過的當前的網絡請求，Charles 關閉後下次打開 Breakpoints 消失了。想要修改網絡請求 Breakpoints 步驟最簡單，跟我們調試工具裡面設置的斷點一樣方便。

對於我們設置了 Breakpoints 的網絡請求， Charles 會在下次繼續訪問該請求的時候停止掉，就跟 debug 一樣。此時我們可以 Edit Request，修改過 Request 之後點擊右下角的 Execute 按鈕。然後等到服務端返回的時候繼續是斷點狀態，此時可以 Edit Response。步驟： 選中某個網絡請求 -> 右擊 -> 點擊“Breakpoints”。

如下圖：對該接口設置了 Breakpoints。請求網絡後 Edit Response，點擊 execute 後服務端返回的結果就是我們編輯的內容了。

服務器壓力測試

我們可以使用 Charles 的 Repeat 功能地對服務器進行併發訪問進行壓力測試。步驟：**選中某個網絡請求 -> 右擊 -> Repeat Advanced -> 在彈出的面板裡面設置總共的迭代次數（Iterations）、併發數（Concurrency） -> 點擊“OK” 。**開始執行可以看到以設置的併發數的規模，進行總共達設置的總共迭代次數的訪問。（專業的壓力測試工具：Load Runner）

反向代理

Charles 的反向代理功能允許我們將本地指定端口的請求映射到遠程的另一個端口上。設置：點擊頂部菜單欄 Proxy -> 點擊 Reverse Proxies。

如下所示，我將本地的 8080 端口映射到遠程的 80 端口上，點擊 OK 生效後，當我繼續訪問本地的 80 端口，實際返回的就是遠程 80 端口的提供的內容了。

解決與翻牆軟件的衝突

Charles 的工作原理是把自己設置為系統的代理服務器，但是我們開發者經常會利用 VPN 翻牆訪問谷歌查找資料（這些翻牆軟件的工作原理也是把自己設置成為系統的代理服務器），為了2者和平共處。我們可以在 Charles 的 External Proxy Settings 中將翻牆的代理端口等信息填寫。同時我們需要關閉翻牆軟件的自動設置，更改為**“手動模式”**。（使其不主動修改系統代理）

總結

Charles 功能強大、界面簡潔，讀完這篇文章並做出練習，相信你能很快掌握它，“工欲善其事，必先利其器” ，掌握了它，相信可以為你大大提高開發中調試網絡的效率。Enjoy yourself

作者：杭城小劉 鏈接：https://juejin.im/post/5b4f005ae51d45191c7e534a

以前自己也總結過一篇使用，但是發佈的時候一直不成功，今天看到這篇更全面的就分享一下

閱讀更多 全棧取經之路 的文章

關鍵字: 數據結構 截取 編程語言