Charles的使用教程
手機端代理工具Charles(俗稱花瓶)的詳細使用教程及問題解決匯總(v4.2.1，iOS10.3) -- by Qzx
簡介
Charles 是在Mac下常用的網(wǎng)絡封包截取工具逛钻，在移動開發(fā)中，通過將自己設置成手機系統(tǒng)的網(wǎng)絡訪問代理服務器芋簿，來截取手機網(wǎng)絡接口請求信息罢低，配合 Charles 的 SSL 功能，可分析和查看 Https 協(xié)議媳禁。
Charles 主要的功能包括：
- 截取 Http 和 Https 網(wǎng)絡封包
- 支持Ajax調試眠副，可以自動將json或xml數(shù)據(jù)格式化，方便查看
- 支持重發(fā)網(wǎng)絡請求竣稽，方便后端調試
- 支持修改網(wǎng)絡請求參數(shù)
- 支持網(wǎng)絡請求的截獲并動態(tài)修改
- 支持模擬慢速網(wǎng)絡以及等待時間較長的請求
- Charles 4 新增：支持 Http2 和 IPv6
使用教程
安裝
- 下載安裝包囱怕，打開后將 Charles 拖到 Application 目錄下完成安裝。
- 啟動 Charles 后毫别，第一次 Charles 會請求給它設置系統(tǒng)代理的權限娃弓，點擊右側允許按鈕，登錄密碼授予 Charles 該權限岛宦。
- 進入配置項：Proxy --> Proxy Settings... --> Port 默認 8888台丛，將Enable transparent HTTP proxying 前面的選擇框??勾選。
- Charles啟動時默認是會抓取Mac 的請求數(shù)據(jù)包的，可將 macOS Proxy 取消勾選挽霉；
- 取消軟件自動檢查更新提示：點擊 Preferences -> Launch -> Check for updates, 取消勾選防嗡；
- 注意：Chrome 和 Firefox 瀏覽器默認不使用系統(tǒng)的代理服務器設置，若要截取侠坎，需要在 Chrome 中設置成使用系統(tǒng)的代理服務器設置蚁趁，或直接將代理服務器設置成
127.0.0.1:8888。
界面按鈕功能介紹
- 兩種視圖模式(Structure 和 Sequence)
- Structure 視圖將 網(wǎng)絡請求按訪問的域名分類
- Sequence 視圖將 網(wǎng)絡請求按訪問的時間排序
- Filter 功能可輸入關鍵字快速篩選出 URL 中帶指定關鍵字的網(wǎng)絡請求
- 頂部按鈕功能
- 黃色掃帚 Clear the current Sesssion
- 紅色 Recording
- 烏龜?? Throttling
- 六邊形 Breakpoints
常用功能
-
過濾網(wǎng)絡請求
- 在主界面的中部的 Filter 欄中填入需要過濾出來的關鍵字
- 在 Charles 的菜單欄選擇 “Proxy”->”Recording Settings”实胸，然后選擇 Include 欄他嫡，選擇添加一個項目，然后填入需要監(jiān)控的協(xié)議庐完，主機地址钢属，端口號。這樣就可以只截取目標網(wǎng)站的封包了假褪。
- 在想過濾的網(wǎng)絡請求上右擊署咽，選擇 “Focus”，之后在 Filter 一欄勾選上 Focussed 一項
-
截取手機設備上的網(wǎng)絡封包
- 電腦端Charles設置：在 Charles 的菜單欄上選擇 “Proxy”->”Proxy Settings”生音，填入代理端口 8888宁否，并且勾上 “Enable transparent HTTP proxying”。
- 手機移動端設置：點擊 Charles 的 “Help”->”Local IP Address”缀遍，可獲取 Charles 運行所在電腦的 IP 地址慕匠；在 iPhone 的 “ 設置 “->” 無線局域網(wǎng) “ 中，可看到當前連接的 wifi 名域醇，通過點擊右邊的詳情鍵台谊， 在其最底部有「HTTP 代理」一項，我們將其切換成手動譬挚，然后填上 Charles 運行所在的電腦的 IP锅铅，以及端口號 8888。
- 設置后减宣，打開 iPhone 上的任意需要網(wǎng)絡通訊的程序盐须，就可以看到 Charles 彈出 iPhone 請求連接的確認菜單（如下圖所示），點擊 “Allow” 即可完成設置漆腌。
-
截取 Https 通訊信息
說明：Https 協(xié)議屬于加密協(xié)議贼邓，要想截取分析 Https 協(xié)議相關的內(nèi)容，需要安裝 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 的證書打開玻募。
-
-
模擬慢速網(wǎng)絡
- 在 Charles 的菜單上只损，選擇 “Proxy”->”Throttle Setting” 項，在之后彈出的對話框中七咧，我們可以勾選上 “Enable Throttling”跃惫，并且可以設置 Throttle Preset 的類型。
- 若只想模擬指定網(wǎng)站的慢速網(wǎng)絡艾栋，可以再勾選上圖中的 “Only for selected hosts” 項爆存，然后在對話框的下半部分設置中增加指定的 hosts 項即可。
-
修改網(wǎng)絡請求蝗砾，多次發(fā)送接口請求
- 需求：為調試服務器的接口先较，需反復嘗試不同參數(shù)的網(wǎng)絡請求，Charles 可方便地提供網(wǎng)絡請求的修改和重發(fā)功能悼粮。
- 在已發(fā)送的網(wǎng)絡請求上面點擊右鍵闲勺，選擇"Compose"，即可創(chuàng)建一個可編輯的網(wǎng)絡請求扣猫，可以修改該請求的任何信息菜循，包括 URL 地址、端口苞笨、參數(shù)等债朵，之后點擊 “Execute” 即可發(fā)送該修改后的網(wǎng)絡請求，這對于我們和服務端調試接口非常方便瀑凝。
-
反向代理
- Charles的反向代理功能允許我們將本地的端口映射到遠程的另一個端口上序芦，例，將本機的 61234 端口映射到了遠程（lyun012.cn）的80端口上了粤咪。這樣谚中，當我訪問本地的 61234 端口時，實際返回的內(nèi)容會由 lyun012.cn 的 80 端口提供。
- 選擇 “Proxy”->”Reverse Proxies Settings” 項宪塔，勾選Enable Reverse Proxies磁奖，點擊Add 添加 需要代理的網(wǎng)址及端口。
-
修改服務器返回內(nèi)容
- 需求：有些時候我們想讓服務器返回一些指定的內(nèi)容某筐，方便我們調試一些特殊情況比搭。例如列表頁面為空的情況，數(shù)據(jù)異常的情況南誊，部分耗時的網(wǎng)絡請求超時的情況等身诺。
- Charles 提供了Map 功能、Rewrite 功能以及Breakpoints 功能抄囚，都可達到修改服務器返回內(nèi)容的目的霉赡，三者在功能上的差異是：
- Map 功能適合長期地將某一些請求重定向到另一個網(wǎng)絡地址或者本地文件；
- Rewrite 功能適合對網(wǎng)絡請求進行一些正則替換幔托；
- Breakpoints 功能適合做一些臨時性的修改穴亏。
- Map 功能
- Map Remote: 將指定的網(wǎng)絡請求重定向到另一個網(wǎng)址請求地址
- 在 Charles 的菜單中，選擇 “Tools”->”Map Remote” 進入設置頁面重挑。
- Host分別填寫網(wǎng)絡重定向的源地址和目的地址嗓化，對于不需要限制的條件，可以留空攒驰。
- Map Local: 將指定的網(wǎng)絡請求重定向到本地文件
- 在 Charles 的菜單中蟆湖，選擇 “Tools”->“Map Local” 進入設置頁面。
- 需要填寫的重定向的源地址和本地的目標文件
- Map Remote: 將指定的網(wǎng)絡請求重定向到另一個網(wǎng)址請求地址
- Rewrite 功能
- 需求：Rewrite 功能功能適合對某一類網(wǎng)絡請求進行一些正則替換玻粪，以達到修改結果的目的隅津，例如：一個 API 請求是獲得用戶昵稱，而我當前的昵稱是 “tangqiaoboy”劲室，我們想試著直接修改網(wǎng)絡返回值伦仍，將 tangqiaoboy 換成成 iosboy，適用于批量和長期的替換很洋。
- 在 Charles 的菜單中充蓝，選擇 “Tools”->“Rewrite Settings”，勾選"Enable Rewrite"喉磁，點擊Add谓苟。
- Breakpoints 功能
- 很多時候，我們只是想臨時修改一次網(wǎng)絡請求結果协怒，最好通過 Breakpoints 實現(xiàn)涝焙。
- Breakpoints 功能類似我們在 Xcode 中設置的斷點一樣，當指定的網(wǎng)絡請求發(fā)生時孕暇，Charles 會截獲該請求仑撞，這個時候赤兴，我們可以在 Charles 中臨時修改網(wǎng)絡請求的返回內(nèi)容。
- 在 Charles 的菜單中隧哮，選擇 “Proxy”->”Breakpoint Settings” 進入設置頁面桶良。
- 點擊六邊形圖標可以控制斷點的開啟和斷開。
