前端開發神器Charles從入門到卸載

前言

本文將帶你們學習使用前端開發神器-charles，從基本的下載安裝到常見配置使用，爲你們一一講解。

1、花式誇獎Charles

• 截取 Http 和 Https 網絡封包。
• 支持重發網絡請求，方便後端調試。
• 支持修改網絡請求參數。
• 支持網絡請求的截獲並動態修改。
• 支持模擬慢速網絡。

好，騎上我心愛的小摩托，準備上路...

2、下載與安裝

官網下載傳送門

本文所使用的的版本爲 mac V4.5.6版本，不一樣版本間的具體化差別，你們可留言交流。

Charles破解工具可經過關注公衆號「胡哥有話說」，回覆關鍵字charles得到。

3、簡單入門-抓包全部請求

1. 打開Charles，勾選Proxy下的macOS Proxy（若是是windows，此處爲Windows Proxy）
2. 點擊Proxy->Start Recording，打開瀏覽器訪問任意頁面，能夠在Charles中看到請求了。
   

很好，如今已經上路了，學習的路上永不堵車...

4、設置過濾請求

經過上面的操做，咱們已經抓包了全部的請求，實際開發中多是專門針對某些接口（如百度域名下的接口），咱們能夠專門配置過濾接口。

1. 臨時性過濾配置

   在展現界面的Filter中可進行條件過濾
   

   同時可在右側的settings中配置使用正則來進行過濾

2. 永久性過濾配置

   經過Proxy->Recording Settings->include中配置過濾條件
   

Ok，咱們又前進了一大步

5、代理轉發請求

經過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必定要勾選，以及相關規則也要勾選，不然不會生效。

6、手機抓包

手機抓包請求也是咱們平常開發中須要用到的，那如何利用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

7、限速設置

經過設置Proxy->Throttle Settings來進行速度限制

注意：必定要勾選 Enable Throttling選項

小結

以上是給你們分享的Charles的常見使用配置，若有相關問題可留言交流。

後記

以上就是胡哥今天給你們分享的內容，喜歡的小夥伴記得點贊、收藏呦，關注胡哥有話說，學習前端不迷路，歡迎多多留言交流...

胡哥有話說，專一於大前端技術領域，分享前端系統架構，框架實現原理，最新最高效的技術實踐！