簡介

正常情況下，Chrome DevTool已經滿足了日常web開發的需求，但是有的特性：編輯request參數、重定向request請求資源、編輯response數據，使用ChromeDevTool就感覺力不從心啦，而且查看和調試移動端資源時候Chrome也并不好用。

使用charles可以做這些事情: - 抓取 http 和 https 的請求和響應，這是最常用的。 - 重發網絡請求，方便后端調試。 - 修改網絡請求參數（客戶端向服務器發送的時候，可以修改后再轉發出去）。 - 網絡請求的截獲和動態修改。 - 支持模擬慢速網絡，主要是模仿手機上的2G/3G/4G的訪問流程。 - 支持本地映射和遠程映射，比如你可以把線上資源映射到本地某個文件夾下，這樣可以方便的處理一些特殊情況下的bug和線上調試（網絡的css，js等資源用的是本地代碼，這些你可以本地隨便修改，數據之類的都是線上的環境，方面在線調試）。 - 可以抓手機端訪問的資源（如果是配置HOST的環境，手機可以借用host配置進入測試環境）。

安裝

去官網下載軟件并安裝。

配置

charles可以免費試用30天，強烈支持購買正版軟件，現提供一種破解方法，用于學習交流，Up主用的是charles  4.2.7。 1、 打開charles ---> help---> register。 2、輸入Registered Name:  https://zhile.io 、 License Key:  48891cf209c6d32bf4。 3、打開Proxy ---->點擊 maxOS Proxy，即可開始抓瀏覽器網頁請求。

注意，charles一旦開啟代理，代理就會被強制修改成charles的，之前設置的代理服務器此時是不能用的。

視圖

Charles 提供兩種查看抓包的視圖，分別名為 Structure 和 Sequence。 -  Structure/結構視圖，將網絡請求按訪問的域名分類，比如某個域名下有n個資源請求，那么所有此域名下的請求都會在這里做一個詳細的分類； -  Sequence/序列視圖，將網絡請求按訪問的時間排序，按照你的電腦的發送請求順序進行。 有時候請求多了會看不過來，Charles 提供了一個簡單的 Filter 功能，可以輸入關鍵字來快速篩選出 URL 中帶指定關鍵字的網絡請求。

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

通常情況下，我們使用方法一做封包過濾，方法二做一些唯一的域名抓包。

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

這種方法是抓取特定的網絡請求，你設置的焦點域名在”focused Hosts”里面可以查看和管理。

這種模式下的展現更加人性化，當你設置某個域名為焦點域名的時候，會把當前域名單獨顯示在上面，而其它的非焦點域名，都會在other Hosts里顯示。

界面

Contents是最常用的一個標簽，其中上半部分是請求，下半部分是響應：請求部分中，會根據請求的內容，而分為很多項，比如如果是表單提交，還會有form的選項供你查看提交的內容（表格圖形化的方式），最后一項”Raw”是未經處理的請求信息，可以理解為，raw左側的所有項目都是對raw信息的拆分和美化，以便直觀查看。

【解決Contents亂碼問題】

Proxy

charles有強大的代理功能，總的來看大概可以分為5大塊：

一、常用功能開關區

stop/start recording        開始/暫停記錄
stop/start throttling        開始/暫停節流
enable/disable breakpoints     啟用/禁用斷點

二、常用功能設置區

recording settings            記錄設置
throttle settings            節流設置
breakpoint settings        斷點設置

三、反向代理和端口轉發區域

reverse proxies            反向代理
port forwarding            端口轉發

四、charles的代理身份配置區域

macOS Proxy               開啟整個系統通過charles作為代理

五、常用的高級設置區

proxy setting            代理設置
ssl proxy setting            ssl代理設置
access control setting        訪問控制設置
extornal proxy setting        外部代理設置
web interface setting        Web界面設置

【stop/start recording和recording settings】 是常用的功能，這里需要注意后面的session1代表當前你將要操作的會話窗口，就是切換是否進行捕獲記錄。

限制記錄大小
限制記錄的歷史
顯示websocket的設置

下面的Imporet和export分別是資源的導入和導出，類似PSD文件一樣，詳細的儲存，方便直接導入使用；但是僅僅是儲存當前的設置。 include、exclude是對特定域名進行抓包。

【stop/start throttling 、throttling settings】 暫時開始慢網速，這個手機上2G/3G/4G的速度，這個對應工具欄的小烏龜圖標。

一般選擇多少網速就可以了，下面默認即可。 注意限速是指向下兼容，如果你網速很差，你選個100Mbps的，也是沒用的。

【enable/disable breakpoints 、breakpoints settings】 有時候對于一些特殊請求在發往服務器之前想要修改一些參數，或者在服務器響應完成之后修改響應信息，此時可以使用Charles的斷點功能，設置斷點之后，當有網絡請求的時候Charles會自動跳轉到斷點處，此時我們就能進行相關的修改。

【反向代理】 正向代理和反向代理的區別： 正向代理：是代理客戶端，為客戶端收發請求，使真實客戶端對服務器不可見；在客戶這一端的，替客戶收發請求（類似現在正常使用的charles的功能）。 反向代理：是代理服務器，為服務器收發請求，使真實服務器對客戶端不可見；在服務器這端的，替服務器收發請求，應用場景常見是就是請求分發到多臺服務器的負載均衡應用。

反向代理的設置 本地端口: 本地主機上的端口創建反向代理。該字段可能會自動填充一個可用的端口。如果有另一個應用程序使用該端口，則在反向代理啟動時將收到一條警告消息。 例如。給定本地端口8001，將連接到http:// localhost:8001/

遠程主機和端口: 作為反向代理的目的地的遠程主機的主機名或IP地址和端口。遠程端口默認為80，這是HTTP的默認端口。 例如。輸入http://www.jianshu.com的遠程主機和80的遠程端口，然后http:// localhost:8001 /將像是已連接到http://www.jianshu.com。

重寫重定向： 重定向遠程服務器的響應將被重寫以與反向代理源地址相匹配。默認為開。 遠程服務器的重定向響應是完全限定的URL，即使它們在同一網站內。 如果重定向到遠程服務器地址，則需要將其重寫為反向代理本地地址，否則客戶端將使用重定向URL到遠程主機，因此不再通過反向代理連接。

保留主機頭: 僅當具有特定要求時，才需要保留主機頭;普通使用的時候沒有必要使用的。

監聽特定地址: 如果要指定本地地址以偵聽反向代理，則可以啟用此選項并在此處輸入IP地址。如果要在同一臺機器上運行多個網絡服務，但在同一臺機器上的不同IP地址上運行，則此功能非常有用。 禁用此選項時，反向代理將綁定到所有可用的本地地址。

【端口轉發】 端口轉發（Port forwarding），有時被叫做隧道，是安全殼(SSH) 為網絡安全通信使用的一種方法。端口轉發是轉發一個網絡端口從一個網絡節點到另一個網絡節點的行為，其使一個外部用戶從外部經過一個被激活的NAT路由器到達一個在私有內部IP地址（局域網內部）上的一個端口。 端口轉發能夠將本地TCP或UDP端口透明地轉發到遠程主機和端口。 所有在端口的請求和回復可能會記錄在charles。 端口轉發流量記錄在Charles中作為socket：// host：port / URL 如果有要使用Charles監控的非HTTP應用程序，則端口轉發非常有用。 將端口創建到原始目標服務器，然后將客戶端應用程序連接到本地端口; 端口轉發對客戶端應用程序是透明的，并能夠查看Charles先前可能無法使用的流量。 例子： 可以將本地主機上的TCP端口2525轉發到遠程主機上的端口25， 然后當連接到localhost時：2525 Charles將透明地將流量轉發到遠程主機，就像直接連接一樣，會看到在Charles中記錄的流量為socket：// localhost：2525 /，該功能，我進行前端調試用的并不多。

【Proxy Settings】 設置的主界面如下：

動態端口： 啟用動態端口選項來監聽動態端口，每次啟動時會進行查詢，會賦予合理的端口，這樣可以避免與計算機上可能運行的其他網絡服務的沖突。

透明代理： 透明代理使Charles能夠訪問不支持HTTP代理服務器的客戶端，或者不知道他們正在使用HTTP代理服務器，例如TCP / IP連接由路由器或防火墻重定向到Charles。這里可以被手機連接。 手機連接的時候，http代理那里寫選手動，并填寫此時charles的本機地址和上面設置的8888端口即可。

【SSL Proxying Settings】 通過SSL代理，您的瀏覽器或應用程序將收到由Charles簽名的證書，而不是來自遠程Web服務器的原始證書。這將在您的瀏覽器或應用程序中觸發警告，某些應用程序實際上可能會拒絕該連接。

【Access Control Settings 】 訪問賬戶設置，連接到charles時的一些配置，控制確定誰可以使用charles。

本機是永遠都可以訪問的，默認的訪問控制列表如果是空的，意味著除了這臺電腦以外，沒有任何設備可以使用charles。如果你把下面的提示開始，未經授權的設備連接時候會提示你是否允許。

【External Proxy】  外部代理設置，有時候可能需要使用網絡上的代理服務器才能訪問Internet，上面已經提到了，是沒法連接代理服務器的同時，讓charles繼續抓包的，在這種情況下，需要為Charles配置外部代理。

charles常用的還有其強大的工具功能，可以見我的其他文章，抓包工具charles工具類

抓包工具charles抓移動端。