前言 本文將帶大家學習使用前端開發神器-charles，從基本的下載安裝到常見配置使用，為大家一一講解。 一、花式誇獎Charles 截取 Http 和 Https 網路封包。 支持重髮網絡請求，方便後端調試。 支持修改網路請求參數。 支持網路請求的截獲並動態修改。 支持模擬慢速網路。 好，騎上我心 ...
前言
本文將帶大家學習使用前端開發神器-charles，從基本的下載安裝到常見配置使用，為大家一一講解。
一、花式誇獎Charles
- 截取 Http 和 Https 網路封包。
- 支持重髮網絡請求，方便後端調試。
- 支持修改網路請求參數。
- 支持網路請求的截獲並動態修改。
- 支持模擬慢速網路。
好，騎上我心愛的小摩托，準備上路...
二、下載與安裝
官網下載傳送門
本文所使用的的版本為 mac V4.5.6版本，不同版本間的具體化差異，大家可留言交流。
Charles破解工具可通過關註公眾號「胡哥有話說」，回覆關鍵字
charles獲得。
三、簡單入門-抓包所有請求
- 打開
Charles，勾選Proxy下的macOS Proxy（如果是windows，此處為Windows Proxy） - 點擊
Proxy->Start Recording，打開瀏覽器訪問任意頁面，可以在Charles中看到請求了。
很好，現在已經上路了，學習的路上永不堵車...
四、設置過濾請求
通過上面的操作，我們已經抓包了所有的請求，實際開發中可能是專門針對某些介面（如百度功能變數名稱下的介面），我們可以專門配置過濾介面。
-
臨時性過濾配置
在展示界面的
Filter中可進行條件過濾
同時可在右側的
settings中配置使用正則來進行過濾 -
永久性過濾配置
通過
Proxy->Recording Settings->include中配置過濾條件
Ok，我們又前進了一大步
五、代理轉發請求
通過Charles的Map Remote和Map Local我們也可以配置代理轉發請求。
Map Remote
Map Remote 遠程映射，是將指定的網路請求重定向到另一個網址
業務場景：
某些服務端的文件請求時限制某些特定功能變數名稱(*.baidu.com)，我們使用localhost啟動項目時,會導致沒有許可權訪問。通過配置Map Remote遠程映射解決問題。
配置路徑：
設置Tools->Map Remote
如圖上的配置，本地啟動的項目地址為：http://localhost:8080（或 http://127.0.0.1:8080），現在再訪問，可以使用路徑 http://test.baidu.com訪問即可。
註意
Enable Map Remote一定要勾選，以及相應規則也要勾選，否則不會生效
Map Local
Map Local 本地映射，是指將指定的網路請求重定向到本地的文件
業務場景：
在本地化的開發中，介面數據Mock；或者是線上環境問題排查時，將請求重定向到本地文件以方便排查。
配置路徑：
設置Tools->Map Local
通過如上圖的配置，請求 aa.baidu.com:443/index時，會被映射到本地 /xx/index.json
註意
Enable Map Local一定要勾選，以及相關規則也要勾選，否則不會生效。
六、手機抓包
手機抓包請求也是我們日常開發中需要用到的，那如何利用Charles抓包手機請求呢。
-
設置
Charles的代理埠號
通過設置Proxy->Proxy Settings->Proxies->HTTP Proxy下的Port埠號
-
查看本地IP地址
通過Charles的Help->Local IP Address查看，本機IP為xx.xx.xx.xx
-
手機和電腦需要處於同於wifi網路內
-
手機wifi網路配置
以華為mate 30為例，選擇對應的wifi，選擇
顯示高級選項，設置代理為手動。
設置伺服器主機名為：xx.xx.xx.xx（剛纔查看的電腦IP）
設置伺服器埠為：8888（剛纔設置的port）
點擊保存後，手機的請求就可以在Charles中查看啦...
註意鏈接時，
Charles會彈出授權視窗，要選擇Allow
七、限速設置
通過設置Proxy->Throttle Settings來進行速度限制
註意：一定要勾選
Enable Throttling選項
小結
以上是給大家分享的Charles的常見使用配置，如有相關問題可留言交流。
後記
以上就是胡哥今天給大家分享的內容，喜歡的小伙伴記得點贊、收藏呦，關註胡哥有話說，學習前端不迷路，歡迎多多留言交流...
胡哥有話說，專註於大前端技術領域，分享前端系統架構，框架實現原理，最新最高效的技術實踐！
