抓包工具Charles的使用教程

本文轉載自查看原文 2018-04-18 15:22 181168 Charles

參考：https://zhubangbang.com/charlesproxy

如果您是您一次使用Charles，可能對下面的感興趣。

如果您已經正在使用Charles，可能感興趣下面的工具

如果您想了解頂部菜單欄，可以看下面的

如果您有前端測試的需求，推薦 SwitchHosts這個小工具，當然您如果對chrome瀏覽器的在線改host感興趣，也可以用下 Host Switch Plus

Charles可能很多人不熟悉，但是另外一個windows下的Fiddler很多人應該不陌生的；它們都是同性質的代理抓包工具；

正常情況下，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發給服務器的數據，不一定是客戶端請求的數據；charles在接到客戶端的請求時可以自由的修改數據，甚至可以直接Block客戶端發的請求；

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

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

正因為上面的原理，所以charles能實現的功能，對前端開發者來說非常有吸引力，相當於請求和響應都可控的，而且charles為了控制更加方面，提供很多簡潔的操作；

注意Charles是收費軟件，可以免費試用30天的時間，推薦使用正版，研究學習可以看下 charles破解版免費下載和安裝教程（我個人用的是charles4.1.2這個版本）；

如果想要抓包，第一件事情，就是把charles設置成為本機和服務端之間的”過濾器”；讓所有的網絡請求全部經過charles，這樣就可以捕獲並記錄到你請求的內容和返回數據了，原理請參照上面那張圖片；需要注意的是，如果你訪問的是web，可以把所有請求抓到；但如果你想抓某些應用（比如手機上的應用等），應用使用的某些資源，如果沒有向服務器發送請求，而是通過調用內部資源的方式進行展現，那么此時charles是抓不到的；驗證這個的方式很簡單，就是把網絡斷掉后，如果還可以繼續展現，就是屬於調用內部資源的，這種時候就不要想着通過抓包工具來捕獲資源了，他都沒有像服務器發起請求，手機點爛也抓不到的；

啟動 Charles 后，第一次 Charles 會詢問你是否把Charles設置為系統的代理，如果此時你忽略了這個詢問敞口，你可以在后期設置的；將 Charles 設置成系統代理：選擇菜單中的 “Proxy” -> “Mac OS X Proxy/windows proxy” 來將 Charles 設置成系統代理，參考如下，如果Mac下有管理密碼，需要輸入密碼后方可進行；

將charles設置為chrome的代理

需要注意的是，Chrome 和 Firefox 瀏覽器並不一定使用的就是本機，可能是一些代理工具，而 Charles 是通過將自己設置成代理服務器來完成資源記錄的，所以如果你的charles無法截取 Chrome 和 Firefox 瀏覽器的網絡請求內容，需要在瀏覽器里做下修改。在 Chrome 中設置成使用系統的代理服務器設置即可，或者直接將代理服務器設置成 127.0.0.1:8888 也可達到相同效果。

備注：如果您的chrome有用過改HOST的擴展工具（比如你用了 Host Switch Plus 這個擴展工具），請暫時關閉；否則chrome會通過你的擴展控制，不能使用charles；你的chrome中可能會看到**您的網絡代理設置是由擴展程序管理的。** 這種的提示；如果你有修改HOST或者用host進行翻牆的需求，我更加推薦你使用 SwitchHosts 這個工具；

charles 主界面的介紹

Charles 主要提供兩種查看封包的視圖，分別名為 “Structure” 和 “Sequence”。
– Structure/結構視圖，將網絡請求按訪問的域名分類，比如某個域名下有n個資源請求，那么所有此域名下的請求都會在這里做一個詳細的分類；

– Sequence/序列視圖，將網絡請求按訪問的時間排序，按照你的電腦的發送請求順序進行。

可以根據具體的需要在這兩種視圖之前來回切換。

當使用”序列視圖”的時候

請求多了有些時候會看不過來，Charles 提供了一個簡單的 Filter 功能，可以輸入關鍵字來快速篩選出 URL 中帶指定關鍵字的網絡請求。

對於需要抓取的某個請求，通常情況下，我們需要對網絡請求進行過濾，只監控向指定目錄服務器上發送的請求。對於這種需求，以下幾種辦法：

方法一：直接過濾域名；

在主界面的中部的 Filter 欄中填入需要過濾出來的關鍵字。例如我查看的域名地址是：https://zhubangbang.com , 那么只需要在 Filter 欄中填入 zhubangbang.com或bang，即可過濾含有這些關鍵字信息的請求（只要host和path中含有即可）。

方法二：修改Include的域名和端口

在 Charles 的菜單欄選擇 “Proxy”->”Recording Settings”，然后選擇 Include 欄，選擇添加一個項目，然后填入需要監控的協議，主機地址，端口號。這樣就可以只截取目標網站的封包了;

通常情況下，我們使用方法一做封包過濾，方法二做一些唯一的域名抓包，正常情況下，不推薦這種設置方法；

因為這種方法，你的charles只能抓你配置的域名；如果某天早晨，你的charles一切正常，訪問也正常，而且在active commections里也看到了某個域名的請求信息，但是在主界面死活看到獲取到的信息，不用着急，非常有可能是因為你設置了include的指定域名；而且是設置后你忘記解除了，導致你一臉懵逼；這種方法非常不推薦，太粗暴了，除非你這半個月都只看某個HOST下的信息，否則千萬千萬別這么搞，很容易在以后使用時候的忘記解除；

如果你只是為了更清楚的查看某個域名下的請求和響應信息，推薦使用結構視圖模式下的焦點域名設置；那種模式比這種方法更好，下面是過濾焦點域名后在序列模式下的調用方法；

方法三：過濾焦點域名

焦點02

在目標的網絡請求上右鍵，選中focus（此時，該域名已經被設置為一個焦點標記了；）；然后點擊fillter后面的focused來篩選你的做的focus標記文件；

你設置的焦點域名在”focused Hosts”里面可以查看和管理

結構視圖，這種模式下的展現更加人性化；

當你設置某個域名為焦點域名的時候，會把當前域名單獨顯示在上面，

而其它的非焦點域名，都會在other Hosts里顯示；

捕獲的信息，界面展示的信息如下，

contents是最常用的一個標簽，其中上半部分是請求，下半部分是響應；

請求部分中，會根據請求的內容，而分為很多項；比如如果是表單提交，還會有form的選項供你查看提交的內容（表格圖形化的方式），最后一項”Raw”是未經處理的請求信息，可以理解為，raw左側的所有項目都是對raw信息的拆分和美化，以便直觀查看；當然響應區域的raw和其它項目的關系也是一樣，響應部分的Raw是接收到的全部未處理信息；如果響應內容是 JSON 格式的，那么 Charles 可以自動幫你將 JSON 內容格式化，方便你查看。如果響應內容是圖片，那么 Charles 可以顯示出圖片的預覽。

Charles菜單介紹