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

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

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

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

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

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

正常情況下，Chrome DevTool已經滿足了日常web開發的需求，但是有的特性：編輯request的引數、重定向request請求的資源、編輯response的資料

我常借用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進行FQ的需求，我更加推薦你使用 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下的資訊，否則千萬千萬別這麼搞，很容易在以後使用時候的忘記解除；

如果你只是為了更清楚的檢視某個域名下的請求和響應資訊，推薦使用結構檢視模式下的焦點域名設定；那種模式比這種方法更好，下面是過濾焦點域名後在序列模式下的呼叫方法；

方法三：過濾焦點域名

在目標的網路請求上右鍵，選中focus（此時，該域名已經被設定為一個焦點標記了；）；然後點選fillter後面的focused來篩選你的做的focus標記檔案；

你設定的焦點域名在”focused Hosts”裡面可以檢視和管理

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

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

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

捕獲的資訊，介面展示的資訊如下，

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

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

Charles選單介紹

一、file(檔案選單)

這個實在沒有必要新建一篇文章介紹，需要注意的是；

“匯入””匯出”這個功能在和別人溝通的時候很常用，比如你向第三方工具/類庫開發人員求助某個功能，或者有BUG怎麼避開；

他們一般會讓你提供抓包到時候收到的檔案，或者應用場景之類的；

你可以匯出你捕捉到的資訊，傳送給別人（類似PS裡的PSD原始檔），

別人收到後，在charles裡開啟就可以看到同樣的抓包資訊了，方便遠端分析和交流；

二、edit（編輯選單）

charles中Edit選單的介紹；

我的是4.1.2版本，mac系統下的選單大同小異；

這裡用的一般也就查詢和偏好設定；

查詢設定

介面如上圖，也沒啥好說的；

 偏好設定

檢視選項

啟動設定

警告設定

三、view（檢視選單）

Charles的檢視選單裡的東西其實是非常常用的功能；

但是我們一般是不需要從這裡點進來的；

裡面，無非是檢視的檢視結構（按照域名和按照訪問時間）

然後是一些概覽之類的；如下圖

在下面是把charles的請求和響應以什麼方式來展現的；

Focus Host是焦點域名的；這裡配置好的可以在結構檢視中，單獨拎出來顯示；

如下圖，在把zhubangbang.com設為焦點域名，在檢視中是下圖這麼展示的；

在序列檢視的時候，是按照下面這麼展示的；

選擇focued後，就會只保留你的焦點域名；

四、proxy（代理選單）