Charles 使用教程

本文介紹 charles 教程 - 代理抓包的使用方法

本文參考了：阿西河Charles教程

1. Charles是一個HTTP代理/ HTTP監視器/反向代理，使開發人員可以查看其機器和Internet之間的全部HTTP和SSL /
   HTTPS流量。這包括請求，響應和HTTP標頭（包含cookie和緩存信息）
2. Charles 是在 Mac 下經常使用的網絡封包截取工具，在作
3. 移動開發時，咱們爲了調試與服務器端的網絡通信協議，經常須要截取網絡封包來分析。
4. Charles 經過將本身設置成系統的網絡訪問代理服務器，使得全部的網絡訪問請求都經過它來完成，從而實現了網絡封包的截取和分析。
5. 除了在作移動開發中調試端口外，Charles 也能夠用於分析第三方應用的通信協議。配合 Charles 的 SSL 功能，Charles
   還能夠分析 Https 協議

若是您是您一次使用Charles

可能對下面的感興趣。

• Charles手機抓包設置
• Charles的https抓包方法及原理/下載ssl/http證書

若是您已經正在使用Charles

可能感興趣下面的工具

• Charles禁止緩存工具
• Charles禁用cookies工具
• Charles遠程映射工具
• Charles本地映射工具
• Charles鏡像工具
• Charles重寫工具
• Charles的black list 和 white list工具
• CharlesDNS欺騙工具
• Charles自動儲存工具
• Charles客戶端進程工具
• Charles撰寫工具
• Charles重複發包工具
• Charles驗證工具
• Charles Publish Gist 工具

若是您想了解頂部菜單欄

能夠看下面的

• Charles View 視圖菜單介紹
• Charles的window和help菜單
• Charles的Edit菜單介紹
• Charles的proxy菜單介紹

Charles 相關

若是您有前端測試的需求，推薦 SwitchHosts這個小工具，固然您若是對chrome瀏覽器的在線改host感興趣，也能夠用下 Host Switch Plus

Charles和windows下的Fiddler都是同性質的代理抓包工具；

Chrome DevTool 不能知足全部調試

正常狀況下，Chrome DevTool已經知足了平常web開發的需求，可是有的特性：編輯request的參數、重定向request請求的資源、編輯response的數據，ChromeDevTool就很蛋疼了，並且查看和調試移動端資源時候Chrome也並很差用；

我常借用Charles作這些事情

• 抓取 Http 和 Https 的請求和響應，抓包是最經常使用的了。
• 重發網絡請求，方便後端調試，複雜和特殊狀況下的一件重發仍是很是爽的（捕獲的記錄，直接repeat就能夠了，若是想修改還能夠修改）。
• 修改網絡請求參數（客戶端向服務器發送的時候，能夠修改後再轉發出去）。
• 網絡請求的截獲和動態修改。
• 支持模擬慢速網絡，主要是模仿手機上的2G/3G/4G的訪問流程。
• 支持本地映射和遠程映射，好比你能夠把線上資源映射到本地某個文件夾下，這樣能夠方面的處理一些特殊狀況下的bug和線上調試（網絡的css，js等資源用的是本地代碼，這些你能夠本地隨便修改，數據之類的都是線上的環境，方面在線調試）；
• 能夠抓手機端訪問的資源（若是是配置HOST的環境，手機能夠借用host配置進入測試環境）

charles至關於一個插在服務器和客戶端之間的「過濾器」；

當客戶端向服務器發起請求的時候，先到charles進行過濾，而後charles在把最終的數據發送給服務器；

注意：此時charles發給服務器的數據，不必定是客戶端請求的數據；charles在接到客戶端的請求時能夠自由的修改數據，甚至能夠直接Block客戶端發的請求；

服務器接收請求後的返回數據，也會先到charles，通過charles過濾後再發給客戶端；

同理：客戶端接收的數據，不必定就是服務器返回的數據，而是charles給的數據；

正由於上面的原理，因此charles能實現的功能，對前端開發者來講很是有吸引力，至關於請求和響應均可控的，並且charles爲了控制更加方面，提供不少簡潔的操做；

注意Charles是收費軟件，能夠免費試用30天的時間，推薦使用正版；（我我的用的是charles4.1.2這個版本，如今用V4.2.28了）；

注意問題

若是想要抓包，第一件事情，就是把charles設置成爲本機和服務端之間的」過濾器」；

讓全部的網絡請求所有通過charles，這樣就能夠捕獲並記錄到你請求的內容和返回數據了，原理請參照上面那張圖片；須要注意的是，若是你訪問的是web，能夠把全部請求抓到；

但若是你想抓某些應用（好比手機上的應用等），應用使用的某些資源，若是沒有向服務器發送請求，而是經過調用內部資源的方式進行展示，那麼此時charles是抓不到的；驗證這個的方式很簡單，就是把網絡斷掉後，若是還能夠繼續展示，就是屬於調用內部資源的，這種時候就不要想着經過抓包工具來捕獲資源了，他都沒有像服務器發起請求，手機點爛也抓不到的；

第一次啓動 Charles

啓動 Charles 後，第一次 Charles 會詢問你是否把Charles設置爲系統的代理，若是此時你忽略了這個詢問敞口，你能夠在後期設置的；將 Charles 設置成系統代理：選擇菜單中的 「Proxy」 -> 「Mac OS X Proxy/windows proxy」 來將 Charles 設置成系統代理，參考以下，若是Mac下有管理密碼，須要輸入密碼後方可進行；

本文參考阿西河教程編寫：https://www.axihe.com/