Charles的使用教程

手機(jī)端代理工具Charles(俗稱花瓶)的詳細(xì)使用教程及問(wèn)題解決匯總(v4.2.1，iOS10.3) -- by Qzx

簡(jiǎn)介

Charles 是在Mac下常用的網(wǎng)絡(luò)封包截取工具，在移動(dòng)開(kāi)發(fā)中，通過(guò)將自己設(shè)置成手機(jī)系統(tǒng)的網(wǎng)絡(luò)訪問(wèn)代理服務(wù)器，來(lái)截取手機(jī)網(wǎng)絡(luò)接口請(qǐng)求信息，配合 Charles 的 SSL 功能，可分析和查看 Https 協(xié)議。

Charles 主要的功能包括：

1. 截取 Http 和 Https 網(wǎng)絡(luò)封包
2. 支持Ajax調(diào)試，可以自動(dòng)將json或xml數(shù)據(jù)格式化，方便查看
3. 支持重發(fā)網(wǎng)絡(luò)請(qǐng)求，方便后端調(diào)試
4. 支持修改網(wǎng)絡(luò)請(qǐng)求參數(shù)
5. 支持網(wǎng)絡(luò)請(qǐng)求的截獲并動(dòng)態(tài)修改
6. 支持模擬慢速網(wǎng)絡(luò)以及等待時(shí)間較長(zhǎng)的請(qǐng)求
7. Charles 4 新增：支持 Http2 和 IPv6

使用教程

安裝

• 下載安裝包，打開(kāi)后將 Charles 拖到 Application 目錄下完成安裝。
• 啟動(dòng) Charles 后，第一次 Charles 會(huì)請(qǐng)求給它設(shè)置系統(tǒng)代理的權(quán)限，點(diǎn)擊右側(cè)允許按鈕，登錄密碼授予 Charles 該權(quán)限。
• 進(jìn)入配置項(xiàng)：Proxy --> Proxy Settings... --> Port 默認(rèn) 8888，將Enable transparent HTTP proxying 前面的選擇框??勾選。
• Charles啟動(dòng)時(shí)默認(rèn)是會(huì)抓取Mac 的請(qǐng)求數(shù)據(jù)包的，可將 macOS Proxy 取消勾選；
• 取消軟件自動(dòng)檢查更新提示：點(diǎn)擊 Preferences -> Launch -> Check for updates, 取消勾選；
• 注意：Chrome 和 Firefox 瀏覽器默認(rèn)不使用系統(tǒng)的代理服務(wù)器設(shè)置，若要截取，需要在 Chrome 中設(shè)置成使用系統(tǒng)的代理服務(wù)器設(shè)置，或直接將代理服務(wù)器設(shè)置成 127.0.0.1:8888 。

界面按鈕功能介紹

• 兩種視圖模式(Structure 和 Sequence)
  • Structure 視圖將 網(wǎng)絡(luò)請(qǐng)求按訪問(wèn)的域名分類
  • Sequence 視圖將 網(wǎng)絡(luò)請(qǐng)求按訪問(wèn)的時(shí)間排序
  • Filter 功能可輸入關(guān)鍵字快速篩選出 URL 中帶指定關(guān)鍵字的網(wǎng)絡(luò)請(qǐng)求
• 頂部按鈕功能
  • 黃色掃帚 Clear the current Sesssion
  • 紅色 Recording
  • 烏龜?? Throttling
  • 六邊形 Breakpoints

常用功能

• 過(guò)濾網(wǎng)絡(luò)請(qǐng)求

  • 在主界面的中部的 Filter 欄中填入需要過(guò)濾出來(lái)的關(guān)鍵字
  • 在 Charles 的菜單欄選擇 “Proxy”->”Recording Settings”，然后選擇 Include 欄，選擇添加一個(gè)項(xiàng)目，然后填入需要監(jiān)控的協(xié)議，主機(jī)地址，端口號(hào)。這樣就可以只截取目標(biāo)網(wǎng)站的封包了。
  • 在想過(guò)濾的網(wǎng)絡(luò)請(qǐng)求上右擊，選擇 “Focus”，之后在 Filter 一欄勾選上 Focussed 一項(xiàng)

• 截取手機(jī)設(shè)備上的網(wǎng)絡(luò)封包

  • 電腦端Charles設(shè)置：在 Charles 的菜單欄上選擇 “Proxy”->”Proxy Settings”，填入代理端口 8888，并且勾上 “Enable transparent HTTP proxying”。
  • 手機(jī)移動(dòng)端設(shè)置：點(diǎn)擊 Charles 的 “Help”->”Local IP Address”，可獲取 Charles 運(yùn)行所在電腦的 IP 地址；在 iPhone 的 “ 設(shè)置 “->” 無(wú)線局域網(wǎng) “ 中，可看到當(dāng)前連接的 wifi 名，通過(guò)點(diǎn)擊右邊的詳情鍵， 在其最底部有「HTTP 代理」一項(xiàng)，我們將其切換成手動(dòng)，然后填上 Charles 運(yùn)行所在的電腦的 IP，以及端口號(hào) 8888。
  • 設(shè)置后，打開(kāi) iPhone 上的任意需要網(wǎng)絡(luò)通訊的程序，就可以看到 Charles 彈出 iPhone 請(qǐng)求連接的確認(rèn)菜單（如下圖所示），點(diǎn)擊 “Allow” 即可完成設(shè)置。

• 截取 Https 通訊信息
  
  說(shuō)明：Https 協(xié)議屬于加密協(xié)議，要想截取分析 Https 協(xié)議相關(guān)的內(nèi)容，需要安裝 Charles 的 CA 證書。具體步驟如下：圖片部分可參考 細(xì)說(shuō) Charles 配置 HTTPS 代理的亂碼問(wèn)題

  1. Proxy –> SSL Proxying Setting –> Enable SSL Proxying 點(diǎn)擊 Add，編輯Location，輸入 Host: * , Port: 443，點(diǎn)擊 OK。
  2. PC 端證書安裝：Help –> SSL Proxying –> Install Charles Root Certificate，選擇 Charles 的證書，并信任此證書。
  3. 移動(dòng)端證書安裝：Help –> SSL Proxying –>Install Charles Root Certificate on a Mobile Device， 安裝彈出的對(duì)話框要求，手機(jī)配置好端口為 8888 的代理之后，在手機(jī)瀏覽器訪問(wèn) http://chls.pro/ssl 就可以下載證書并安裝了。
  4. 安卓手機(jī)安裝證書 Help –> SSL Proxying –>Save Charles Root Certificate...，選擇要保存的文件目錄，點(diǎn)擊 Save, 將保存的文件傳到手機(jī)，點(diǎn)擊手機(jī)的 設(shè)置 -> WLAN -> 高級(jí)設(shè)置 -> 安裝證書，找到文件保存目錄，安裝完成。
  5. 注意：對(duì)于 iOS 10.3以上的手機(jī)需要設(shè)置證書信任：點(diǎn)擊 通用 -> 關(guān)于本機(jī) -> 證書信任設(shè)置 -> 選擇 Charles 的證書打開(kāi)。

• 模擬慢速網(wǎng)絡(luò)

  • 在 Charles 的菜單上，選擇 “Proxy”->”Throttle Setting” 項(xiàng)，在之后彈出的對(duì)話框中，我們可以勾選上 “Enable Throttling”，并且可以設(shè)置 Throttle Preset 的類型。
  • 若只想模擬指定網(wǎng)站的慢速網(wǎng)絡(luò)，可以再勾選上圖中的 “Only for selected hosts” 項(xiàng)，然后在對(duì)話框的下半部分設(shè)置中增加指定的 hosts 項(xiàng)即可。

• 修改網(wǎng)絡(luò)請(qǐng)求，多次發(fā)送接口請(qǐng)求

  • 需求：為調(diào)試服務(wù)器的接口，需反復(fù)嘗試不同參數(shù)的網(wǎng)絡(luò)請(qǐng)求，Charles 可方便地提供網(wǎng)絡(luò)請(qǐng)求的修改和重發(fā)功能。
  • 在已發(fā)送的網(wǎng)絡(luò)請(qǐng)求上面點(diǎn)擊右鍵，選擇"Compose"，即可創(chuàng)建一個(gè)可編輯的網(wǎng)絡(luò)請(qǐng)求，可以修改該請(qǐng)求的任何信息，包括 URL 地址、端口、參數(shù)等，之后點(diǎn)擊 “Execute” 即可發(fā)送該修改后的網(wǎng)絡(luò)請(qǐng)求，這對(duì)于我們和服務(wù)端調(diào)試接口非常方便。

• 反向代理

  • Charles的反向代理功能允許我們將本地的端口映射到遠(yuǎn)程的另一個(gè)端口上，例，將本機(jī)的 61234 端口映射到了遠(yuǎn)程（lyun012.cn）的80端口上了。這樣，當(dāng)我訪問(wèn)本地的 61234 端口時(shí)，實(shí)際返回的內(nèi)容會(huì)由 lyun012.cn 的 80 端口提供。
  • 選擇 “Proxy”->”Reverse Proxies Settings” 項(xiàng)，勾選Enable Reverse Proxies，點(diǎn)擊Add 添加 需要代理的網(wǎng)址及端口。

• 修改服務(wù)器返回內(nèi)容

  • 需求：有些時(shí)候我們想讓服務(wù)器返回一些指定的內(nèi)容，方便我們調(diào)試一些特殊情況。例如列表頁(yè)面為空的情況，數(shù)據(jù)異常的情況，部分耗時(shí)的網(wǎng)絡(luò)請(qǐng)求超時(shí)的情況等。
  • Charles 提供了Map 功能、Rewrite 功能以及Breakpoints 功能，都可達(dá)到修改服務(wù)器返回內(nèi)容的目的，三者在功能上的差異是：
    1. Map 功能適合長(zhǎng)期地將某一些請(qǐng)求重定向到另一個(gè)網(wǎng)絡(luò)地址或者本地文件；
    2. Rewrite 功能適合對(duì)網(wǎng)絡(luò)請(qǐng)求進(jìn)行一些正則替換；
    3. Breakpoints 功能適合做一些臨時(shí)性的修改。
  • Map 功能
    • Map Remote: 將指定的網(wǎng)絡(luò)請(qǐng)求重定向到另一個(gè)網(wǎng)址請(qǐng)求地址
      • 在 Charles 的菜單中，選擇 “Tools”->”Map Remote” 進(jìn)入設(shè)置頁(yè)面。
      • Host分別填寫網(wǎng)絡(luò)重定向的源地址和目的地址，對(duì)于不需要限制的條件，可以留空。
    • Map Local: 將指定的網(wǎng)絡(luò)請(qǐng)求重定向到本地文件
      • 在 Charles 的菜單中，選擇 “Tools”->“Map Local” 進(jìn)入設(shè)置頁(yè)面。
      • 需要填寫的重定向的源地址和本地的目標(biāo)文件
  • Rewrite 功能
    • 需求：Rewrite 功能功能適合對(duì)某一類網(wǎng)絡(luò)請(qǐng)求進(jìn)行一些正則替換，以達(dá)到修改結(jié)果的目的，例如：一個(gè) API 請(qǐng)求是獲得用戶昵稱，而我當(dāng)前的昵稱是 “tangqiaoboy”，我們想試著直接修改網(wǎng)絡(luò)返回值，將 tangqiaoboy 換成成 iosboy，適用于批量和長(zhǎng)期的替換。
    • 在 Charles 的菜單中，選擇 “Tools”->“Rewrite Settings”，勾選"Enable Rewrite"，點(diǎn)擊Add。
  • Breakpoints 功能
    • 很多時(shí)候，我們只是想臨時(shí)修改一次網(wǎng)絡(luò)請(qǐng)求結(jié)果，最好通過(guò) Breakpoints 實(shí)現(xiàn)。
    • Breakpoints 功能類似我們?cè)?Xcode 中設(shè)置的斷點(diǎn)一樣，當(dāng)指定的網(wǎng)絡(luò)請(qǐng)求發(fā)生時(shí)，Charles 會(huì)截獲該請(qǐng)求，這個(gè)時(shí)候，我們可以在 Charles 中臨時(shí)修改網(wǎng)絡(luò)請(qǐng)求的返回內(nèi)容。
    • 在 Charles 的菜單中，選擇 “Proxy”->”Breakpoint Settings” 進(jìn)入設(shè)置頁(yè)面。
    • 點(diǎn)擊六邊形圖標(biāo)可以控制斷點(diǎn)的開(kāi)啟和斷開(kāi)。

參考網(wǎng)址

• Charles 官網(wǎng) -- 推薦支持正版
• Charles 從入門到精通
• Charles 抓包配置流程(Charles4.1.2 iOS)
• 細(xì)說(shuō) Charles 配置 HTTPS 代理的亂碼問(wèn)題
• 關(guān)于Charles抓HTTPS包的tips
• Charles 4.2.1 Mac版