前端開發神器Charles從入門到解除安裝

胡哥有話說發表於2020-06-28

前言

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

一、花式誇獎Charles

  • 擷取 Http 和 Https 網路封包。
  • 支援重發網路請求,方便後端除錯。
  • 支援修改網路請求引數。
  • 支援網路請求的截獲並動態修改。
  • 支援模擬慢速網路。

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

二、下載與安裝

官網下載傳送門

本文所使用的的版本為 mac V4.5.6版本,不同版本間的具體化差異,大家可留言交流。

Charles破解工具可通過關注公眾號「胡哥有話說」,回覆關鍵字charles獲得。

三、簡單入門-抓包所有請求

  1. 開啟Charles,勾選Proxy下的macOS Proxy(如果是windows,此處為Windows Proxy)
  2. 點選Proxy->Start Recording,開啟瀏覽器訪問任意頁面,可以在Charles中看到請求了。
    Recording

很好,現在已經上路了,學習的路上永不堵車...

四、設定過濾請求

通過上面的操作,我們已經抓包了所有的請求,實際開發中可能是專門針對某些介面(如百度域名下的介面),我們可以專門配置過濾介面。

  1. 臨時性過濾配置

    在展示介面的Filter中可進行條件過濾
    Filter

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

  2. 永久性過濾配置

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

Ok,我們又前進了一大步

五、代理轉發請求

通過CharlesMap RemoteMap Local我們也可以配置代理轉發請求。

Map Remote

Map Remote 遠端對映,是將指定的網路請求重定向到另一個網址

業務場景:
某些服務端的檔案請求時限制某些特定域名(*.baidu.com),我們使用localhost啟動專案時,會導致沒有許可權訪問。通過配置Map Remote遠端對映解決問題。

配置路徑:
設定Tools->Map Remote

Remote列表
單一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

Local對映列表
單一Local對映設定

通過如上圖的配置,請求 aa.baidu.com:443/index時,會被對映到本地 /xx/index.json

注意Enable Map Local一定要勾選,以及相關規則也要勾選,否則不會生效。

六、手機抓包

手機抓包請求也是我們日常開發中需要用到的,那如何利用Charles抓包手機請求呢。

  1. 設定Charles的代理埠號
    通過設定Proxy->Proxy Settings->Proxies->HTTP Proxy下的Port埠號

    Port設定

  2. 檢視本地IP地址
    通過CharlesHelp->Local IP Address檢視,本機IP為xx.xx.xx.xx

    本機IP

  3. 手機和電腦需要處於同於wifi網路內

  4. 手機wifi網路配置

    以華為mate 30為例,選擇對應的wifi,選擇顯示高階選項,設定代理為手動
    設定伺服器主機名為:xx.xx.xx.xx(剛才檢視的電腦IP)
    設定伺服器埠為:8888(剛才設定的port)
    點選儲存後,手機的請求就可以在Charles中檢視啦...
    手機wifi設定

    注意連結時,Charles會彈出授權視窗,要選擇Allow

    Auth

七、限速設定

通過設定Proxy->Throttle Settings來進行速度限制
Throttle Settings

注意:一定要勾選 Enable Throttling選項

小結

以上是給大家分享的Charles的常見使用配置,如有相關問題可留言交流。

後記

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

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

相關文章