前言
本文將帶大家學習使用前端開發神器-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
的常見使用配置,如有相關問題可留言交流。
後記
以上就是胡哥今天給大家分享的內容,喜歡的小夥伴記得點贊
、收藏
呦,關注胡哥有話說,學習前端不迷路,歡迎多多留言交流...
胡哥有話說,專注於大前端技術領域,分享前端系統架構,框架實現原理,最新最高效的技術實踐!