前端開發神器Charles從入門到解除安裝
阿新 • • 發佈:2020-06-28
## 前言
本文將帶大家學習使用前端開發神器-```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```中看到請求了。
![Recording](https://img2020.cnblogs.com/other/1103694/202006/1103694-20200628065200493-96323728.jpg)
> 很好,現在已經上路了,學習的路上永不堵車...
## 四、設定過濾請求
通過上面的操作,我們已經抓包了所有的請求,實際開發中可能是專門針對某些介面(如百度域名下的介面),我們可以專門配置過濾介面。
1. 臨時性過濾配置
在展示介面的```Filter```中可進行條件過濾
![Filter](https://img2020.cnblogs.com/other/1103694/202006/1103694-20200628065200836-2145652095.jpg)
> 同時可在右側的```settings```中配置使用正則來進行過濾
2. 永久性過濾配置
通過```Proxy```->```Recording Settings```->```include```中配置過濾條件
![Recording Settings](https://img2020.cnblogs.com/other/1103694/202006/1103694-20200628065201258-1579602663.jpg)
> Ok,我們又前進了一大步
## 五、代理轉發請求
通過```Charles```的```Map Remote```和```Map Local```我們也可以配置代理轉發請求。
### Map Remote
> Map Remote 遠端對映,是將指定的網路請求重定向到另一個網址
**業務場景:**
某些服務端的檔案請求時限制某些特定域名(\*.baidu.com),我們使用localhost啟動專案時,會導致沒有許可權訪問。通過配置```Map Remote```遠端對映解決問題。
**配置路徑:**
設定```Tools```->```Map Remote```
![Remote列表](https://img2020.cnblogs.com/other/1103694/202006/1103694-20200628065201545-1847158413.jpg)
![單一Remote設定](https://img2020.cnblogs.com/other/1103694/202006/1103694-20200628065201746-746642626.jpg)
如圖上的配置,本地啟動的專案地址為:```http://localhost:8080```(或 ```http://127.0.0.1:8080```),現在再訪問,可以使用路徑 ```http://test.baidu.com```訪問即可。
> 注意```Enable Map Remote```一定要勾選,以及相應規則也要勾選,否則不會生效
### Map Local
> Map Local 本地對映,是指將指定的網路請求重定向到本地的檔案
**業務場景:**
在本地化的開發中,介面資料Mock;或者是線上環境問題排查時,將請求重定向到本地檔案以方便排查。
**配置路徑:**
設定```Tools```->```Map Local```
![Local對映列表](https://img2020.cnblogs.com/other/1103694/202006/1103694-20200628065202053-1932582399.jpg)
![單一Local對映設定](https://img2020.cnblogs.com/other/1103694/202006/1103694-20200628065202275-604405120.jpg)
通過如上圖的配置,請求 ```aa.baidu.com:443/index```時,會被對映到本地 ```/xx/index.json```
> 注意```Enable Map Local```一定要勾選,以及相關規則也要勾選,否則不會生效。
## 六、手機抓包
手機抓包請求也是我們日常開發中需要用到的,那如何利用```Charles```抓包手機請求呢。
1. 設定```Charles```的代理埠號
通過設定```Proxy```->```Proxy Settings```->```Proxies```->```HTTP Proxy```下的```Port```埠號
![Port設定](https://img2020.cnblogs.com/other/1103694/202006/1103694-20200628065202568-283686823.jpg)
2. 檢視本地IP地址
通過```Charles```的```Help```->```Local IP Address```檢視,本機IP為xx.xx.xx.xx
![本機IP](https://img2020.cnblogs.com/other/1103694/202006/1103694-20200628065202791-1491770081.jpg)
3. 手機和電腦需要處於同於wifi網路內
4. 手機wifi網路配置
以華為mate 30為例,選擇對應的wifi,選擇```顯示高階選項```,設定代理為```手動```。
設定```伺服器主機名```為:xx.xx.xx.xx(剛才檢視的電腦IP)
設定```伺服器埠```為:8888(剛才設定的port)
點選儲存後,手機的請求就可以在```Charles```中檢視啦...
![手機wifi設定](https://img2020.cnblogs.com/other/1103694/202006/1103694-20200628065203013-61759766.jpg)
> 注意連結時,```Charles```會彈出授權視窗,要選擇```Allow```
![Auth](https://img2020.cnblogs.com/other/1103694/202006/1103694-20200628065203208-1999072868.jpg)
## 七、限速設定
通過設定```Proxy```->```Throttle Settings```來進行速度限制
![Throttle Settings](https://img2020.cnblogs.com/other/1103694/202006/1103694-20200628065203432-905561486.jpg)
> 注意:一定要勾選 ```Enable Throttling```選項
## 小結
以上是給大家分享的```Charles```的常見使用配置,如有相關問題可留言交流。
## 後記
以上就是胡哥今天給大家分享的內容,喜歡的小夥伴記得```點贊```、```收藏```呦,關注胡哥有話說,學習前端不迷路,歡迎多多留言交流...
> 胡哥有話說,專注於大前端技術領域,分享前端系統架構,框架實現原理,最新最高效的技術實踐!