點擊上方藍色字體輕鬆關注前端
做者：胡小帥童鞋web
前言
windows
本文將帶你們學習使用前端開發神器-charles，從基本的下載安裝到常見配置使用，爲你們一一講解。後端
1、花式誇獎Charles
-
截取 Http 和 Https 網絡封包。 -
支持重發網絡請求，方便後端調試。 -
支持修改網絡請求參數。 -
支持網絡請求的截獲並動態修改。 -
支持模擬慢速網絡。
好，騎上我心愛的小摩托，準備上路...瀏覽器
2、下載與安裝
官網下載傳送門服務器
本文所使用的的版本爲 mac V4.5.6版本，不一樣版本間的具體化差別，你們可留言交流。微信
Charles破解工具可經過關注公衆號「胡哥有話說」，回覆關鍵字
charles得到。網絡
3、簡單入門-抓包全部請求
-
打開 Charles，勾選Proxy下的macOS Proxy（若是是windows，此處爲Windows Proxy） -
點擊 Proxy->Start Recording，打開瀏覽器訪問任意頁面，能夠在Charles中看到請求了。
很好，如今已經上路了，學習的路上永不堵車...架構
4、設置過濾請求
經過上面的操做，咱們已經抓包了全部的請求，實際開發中多是專門針對某些接口（如百度域名下的接口），咱們能夠專門配置過濾接口。
-
臨時性過濾配置
在展現界面的
Filter中可進行條件過濾同時可在右側的
settings中配置使用正則來進行過濾 -
永久性過濾配置
經過
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抓包手機請求呢。
-
設置
Charles的代理端口號 經過設置Proxy->Proxy Settings->Proxies->HTTP Proxy下的Port端口號
Port設置 -
查看本地IP地址 經過
Charles的Help->Local IP Address查看，本機IP爲xx.xx.xx.xx
本機IP -
手機和電腦須要處於同於wifi網絡內
-
手機wifi網絡配置
以華爲mate 30爲例，選擇對應的wifi，選擇
顯示高級選項，設置代理爲手動。設置服務器主機名爲：xx.xx.xx.xx（剛纔查看的電腦IP） 設置服務器端口爲：8888（剛纔設置的port） 點擊保存後，手機的請求就能夠在Charles中查看啦...注意連接時，
Charles會彈出受權窗口，要選擇Allow
Auth
7、限速設置
經過設置Proxy->Throttle Settings來進行速度限制
注意：必定要勾選
Enable Throttling選項
後記
以上就是小編今天給你們分享的內容，喜歡的小夥伴記得收藏、轉發，點擊在看推薦給更多的小夥伴。
大前端實踐者，專一於大前端技術領域，分享前端系統架構，框架實現原理，最新最高效的技術實踐！
關注大前端實踐者，學習前端不迷路，歡迎多多留言交流...
大前端實踐者
本文分享自微信公衆號 - 大前端實踐者（daqianduanJS）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。