Charles的使用教程
手機端代理工具Charles(俗稱花瓶)的詳細使用教程及問題解決匯總(v4.2.1，iOS10.3) -- by Qzx
簡介
Charles 是在Mac下常用的網絡封包截取工具，在移動開發中，通過將自己設置成手機系統的網絡訪問代理服務器，來截取手機網絡接口請求信息，配合 Charles 的 SSL 功能，可分析和查看 Https 協議。
Charles 主要的功能包括：
- 截取 Http 和 Https 網絡封包
- 支持Ajax調試，可以自動將json或xml數據格式化，方便查看
- 支持重發網絡請求，方便后端調試
- 支持修改網絡請求參數
- 支持網絡請求的截獲并動態修改
- 支持模擬慢速網絡以及等待時間較長的請求
- Charles 4 新增：支持 Http2 和 IPv6
使用教程
安裝
- 下載安裝包，打開后將 Charles 拖到 Application 目錄下完成安裝。
- 啟動 Charles 后，第一次 Charles 會請求給它設置系統代理的權限，點擊右側允許按鈕，登錄密碼授予 Charles 該權限。
- 進入配置項：Proxy --> Proxy Settings... --> Port 默認 8888，將Enable transparent HTTP proxying 前面的選擇框??勾選。
- Charles啟動時默認是會抓取Mac 的請求數據包的，可將 macOS Proxy 取消勾選；
- 取消軟件自動檢查更新提示：點擊 Preferences -> Launch -> Check for updates, 取消勾選；
- 注意：Chrome 和 Firefox 瀏覽器默認不使用系統的代理服務器設置，若要截取，需要在 Chrome 中設置成使用系統的代理服務器設置，或直接將代理服務器設置成
127.0.0.1:8888。
界面按鈕功能介紹
- 兩種視圖模式(Structure 和 Sequence)
- Structure 視圖將 網絡請求按訪問的域名分類
- Sequence 視圖將 網絡請求按訪問的時間排序
- Filter 功能可輸入關鍵字快速篩選出 URL 中帶指定關鍵字的網絡請求
- 頂部按鈕功能
- 黃色掃帚 Clear the current Sesssion
- 紅色 Recording
- 烏龜?? Throttling
- 六邊形 Breakpoints
常用功能
-
過濾網絡請求
- 在主界面的中部的 Filter 欄中填入需要過濾出來的關鍵字
- 在 Charles 的菜單欄選擇 “Proxy”->”Recording Settings”，然后選擇 Include 欄，選擇添加一個項目，然后填入需要監控的協議，主機地址，端口號。這樣就可以只截取目標網站的封包了。
- 在想過濾的網絡請求上右擊，選擇 “Focus”，之后在 Filter 一欄勾選上 Focussed 一項
-
截取手機設備上的網絡封包
- 電腦端Charles設置：在 Charles 的菜單欄上選擇 “Proxy”->”Proxy Settings”，填入代理端口 8888，并且勾上 “Enable transparent HTTP proxying”。
- 手機移動端設置：點擊 Charles 的 “Help”->”Local IP Address”，可獲取 Charles 運行所在電腦的 IP 地址；在 iPhone 的 “ 設置 “->” 無線局域網 “ 中，可看到當前連接的 wifi 名，通過點擊右邊的詳情鍵， 在其最底部有「HTTP 代理」一項，我們將其切換成手動，然后填上 Charles 運行所在的電腦的 IP，以及端口號 8888。
- 設置后，打開 iPhone 上的任意需要網絡通訊的程序，就可以看到 Charles 彈出 iPhone 請求連接的確認菜單（如下圖所示），點擊 “Allow” 即可完成設置。
-
截取 Https 通訊信息
說明：Https 協議屬于加密協議，要想截取分析 Https 協議相關的內容，需要安裝 Charles 的 CA 證書。具體步驟如下：圖片部分可參考 細說 Charles 配置 HTTPS 代理的亂碼問題-
Proxy –> SSL Proxying Setting –> Enable SSL Proxying點擊 Add，編輯Location，輸入 Host: * , Port: 443，點擊 OK。 - PC 端證書安裝：
Help –> SSL Proxying –> Install Charles Root Certificate，選擇 Charles 的證書，并信任此證書。 - 移動端證書安裝：
Help –> SSL Proxying –>Install Charles Root Certificate on a Mobile Device， 安裝彈出的對話框要求，手機配置好端口為 8888 的代理之后，在手機瀏覽器訪問http://chls.pro/ssl就可以下載證書并安裝了。 - 安卓手機安裝證書
Help –> SSL Proxying –>Save Charles Root Certificate...，選擇要保存的文件目錄，點擊 Save, 將保存的文件傳到手機，點擊手機的設置 -> WLAN -> 高級設置 -> 安裝證書，找到文件保存目錄，安裝完成。 - 注意：對于 iOS 10.3以上的手機需要設置證書信任：點擊
通用 -> 關于本機 -> 證書信任設置 -> 選擇 Charles 的證書打開。
-
-
模擬慢速網絡
- 在 Charles 的菜單上，選擇 “Proxy”->”Throttle Setting” 項，在之后彈出的對話框中，我們可以勾選上 “Enable Throttling”，并且可以設置 Throttle Preset 的類型。
- 若只想模擬指定網站的慢速網絡，可以再勾選上圖中的 “Only for selected hosts” 項，然后在對話框的下半部分設置中增加指定的 hosts 項即可。
-
修改網絡請求，多次發送接口請求
- 需求：為調試服務器的接口，需反復嘗試不同參數的網絡請求，Charles 可方便地提供網絡請求的修改和重發功能。
- 在已發送的網絡請求上面點擊右鍵，選擇"Compose"，即可創建一個可編輯的網絡請求，可以修改該請求的任何信息，包括 URL 地址、端口、參數等，之后點擊 “Execute” 即可發送該修改后的網絡請求，這對于我們和服務端調試接口非常方便。
-
反向代理
- Charles的反向代理功能允許我們將本地的端口映射到遠程的另一個端口上，例，將本機的 61234 端口映射到了遠程（lyun012.cn）的80端口上了。這樣，當我訪問本地的 61234 端口時，實際返回的內容會由 lyun012.cn 的 80 端口提供。
- 選擇 “Proxy”->”Reverse Proxies Settings” 項，勾選Enable Reverse Proxies，點擊Add 添加 需要代理的網址及端口。
-
修改服務器返回內容
- 需求：有些時候我們想讓服務器返回一些指定的內容，方便我們調試一些特殊情況。例如列表頁面為空的情況，數據異常的情況，部分耗時的網絡請求超時的情況等。
- Charles 提供了Map 功能、Rewrite 功能以及Breakpoints 功能，都可達到修改服務器返回內容的目的，三者在功能上的差異是：
- Map 功能適合長期地將某一些請求重定向到另一個網絡地址或者本地文件；
- Rewrite 功能適合對網絡請求進行一些正則替換；
- Breakpoints 功能適合做一些臨時性的修改。
- Map 功能
- Map Remote: 將指定的網絡請求重定向到另一個網址請求地址
- 在 Charles 的菜單中，選擇 “Tools”->”Map Remote” 進入設置頁面。
- Host分別填寫網絡重定向的源地址和目的地址，對于不需要限制的條件，可以留空。
- Map Local: 將指定的網絡請求重定向到本地文件
- 在 Charles 的菜單中，選擇 “Tools”->“Map Local” 進入設置頁面。
- 需要填寫的重定向的源地址和本地的目標文件
- Map Remote: 將指定的網絡請求重定向到另一個網址請求地址
- Rewrite 功能
- 需求：Rewrite 功能功能適合對某一類網絡請求進行一些正則替換，以達到修改結果的目的，例如：一個 API 請求是獲得用戶昵稱，而我當前的昵稱是 “tangqiaoboy”，我們想試著直接修改網絡返回值，將 tangqiaoboy 換成成 iosboy，適用于批量和長期的替換。
- 在 Charles 的菜單中，選擇 “Tools”->“Rewrite Settings”，勾選"Enable Rewrite"，點擊Add。
- Breakpoints 功能
- 很多時候，我們只是想臨時修改一次網絡請求結果，最好通過 Breakpoints 實現。
- Breakpoints 功能類似我們在 Xcode 中設置的斷點一樣，當指定的網絡請求發生時，Charles 會截獲該請求，這個時候，我們可以在 Charles 中臨時修改網絡請求的返回內容。
- 在 Charles 的菜單中，選擇 “Proxy”->”Breakpoint Settings” 進入設置頁面。
- 點擊六邊形圖標可以控制斷點的開啟和斷開。
