## 前言 本文將帶大家學習使用前端開發神器-```charles```，從基本的下載安裝到常見配置使用，為大家一一講解。 ## 一、花式誇獎Charles + 擷取 Http 和 Https 網路封包。 + 支援重發網路請求，方便後端除錯。 + 支援修改網路請求引數。 + 支援網路請求的截獲並動態修改。 + 支援模擬慢速網路。 > 好，騎上我心愛的小摩托，準備上路... ## 二、下載與安裝 官網下載[傳送門](https://www.charlesproxy.com/) > 本文所使用的的版本為 mac V4.5.6版本，不同版本間的具體化差異，大家可留言交流。 > Charles破解工具可通過關注公眾號「胡哥有話說」，回覆關鍵字```charles```獲得。 ## 三、簡單入門-抓包所有請求 1. 開啟```Charles```，勾選```Proxy```下的```macOS Proxy```（如果是windows，此處為Windows Proxy） 2. 點選```Proxy```->```Start Recording```，開啟瀏覽器訪問任意頁面，可以在```Charles```中看到請求了。  > 很好，現在已經上路了，學習的路上永不堵車... ## 四、設定過濾請求 通過上面的操作，我們已經抓包了所有的請求，實際開發中可能是專門針對某些介面（如百度域名下的介面），我們可以專門配置過濾介面。 1. 臨時性過濾配置 在展示介面的```Filter```中可進行條件過濾  > 同時可在右側的```settings```中配置使用正則來進行過濾 2. 永久性過濾配置 通過```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```抓包手機請求呢。 1. 設定```Charles```的代理埠號 通過設定```Proxy```->```Proxy Settings```->```Proxies```->```HTTP Proxy```下的```Port```埠號  2. 檢視本地IP地址 通過```Charles```的```Help```->```Local IP Address```檢視，本機IP為xx.xx.xx.xx  3. 手機和電腦需要處於同於wifi網路內 4. 手機wifi網路配置 以華為mate 30為例，選擇對應的wifi，選擇```顯示高階選項```，設定代理為```手動```。 設定```伺服器主機名```為：xx.xx.xx.xx（剛才檢視的電腦IP） 設定```伺服器埠```為：8888（剛才設定的port） 點選儲存後，手機的請求就可以在```Charles```中檢視啦...  > 注意連結時，```Charles```會彈出授權視窗，要選擇```Allow```  ## 七、限速設定 通過設定```Proxy```->```Throttle Settings```來進行速度限制  > 注意：一定要勾選 ```Enable Throttling```選項 ## 小結 以上是給大家分享的```Charles```的常見使用配置，如有相關問題可留言交流。 ## 後記 以上就是胡哥今天給大家分享的內容，喜歡的小夥伴記得```點贊```、```收藏```呦，關注胡哥有話說，學習前端不迷路，歡迎多多留言交流... > 胡哥有話說，專注於大前端技術領域，分享前端系統架構，框架實現原理，最新最高效的技術實踐！