Charles的簡單使用

Charles只是覺得很好用但是很少知道它是哪家公司的,在網上一番查找后,發現是一家叫 XK72 的公司,查看了它們的官網發現了這樣的一段話:

Two specialist fields: weaponry and space medicine an interesting combination,don‘t you think?

image.png

Charles 作為一款開發利器,可以讓我們免去debug的操作,直接可以看到數據請求的結果,用好了它可以讓我們開發事半功倍。

Charles是什么

image.png

Charles是一個HTTP代理服務器,HTTP監視器,反轉代理服務器,當程序連接Charles的代理訪問互聯網時,Charles可以監控這個程序發送和接收的所有數據。它允許一個開發者查看所有連接互聯網的HTTP通信,這些包括request,response和HTTP headers (包含cookies與caching信息).

說白了它就像是一個中間人,給雙方互通消息的傳真機,它在幫你們傳輸信息的同時又自己備份一份數據,同時又能去做一些事情,來改變傳輸的方式或者是內容的一個工具,大大的提高我們的開發效率.

代碼是不會騙人的,數據也不會,眼見為真!

43b7742f2d9c4e89890385786cc68472.jpg

開發中經常遇到互相扯皮的事情,前端說我沒問題,后端說我也沒問題,人在家中坐,鍋在天上來,那就自證清白


b480b5ac9ccda15a3965b8838445537d.jpeg

希望你學會了使用它之后,能讓你少點頭大的事情.

Charles的安裝
Charles 是收費的,可以免費試用30天,可以直接去Charles官網下載,網上也有破解版的資源,支持原創,支持正版。接下來我們來說說它的使用,看看能不能讓你眼前一亮。

Charles桌面GUI
Charles 主要提供兩種種查看封包的視圖,分別名為 StructureSequence,Structure 視圖將網絡請求按訪問的域名分類,Sequence 視圖將網絡請求按訪問的時間排序。

image.png

image.png

Charles設置系統代理
Charles 是通過將自己設置成代理服務器來完成抓包的,勾選系統代理后,系統本地發出去的請求都能被截取下來。如果只抓取APP的包的話,可關閉此配置,這樣不會出現太多的數據看著比較亂,這樣訪問電腦上的內容就能抓的到數據了.

image.png

截取移動設備上的網絡請求包
這里已蘋果手機為例,安卓手機大同小異,對著操作就好.

我們在調試移動APP時,需要抓取APP發送的數據包,首先進行設置,Proxy -> Proxy Settings默認端口是8888,根據實際情況可修改。


image.png

查看本機IP地址:Help -> Local IP Addresses


image.png

設置蘋果手機代理服務器。無線局域網->配置代理->手動
按照設置的內容配置代理.


image.png

打開要調試的APP,請求就會先發送到Charles,然后驗證是否允許訪問。


image.png

當點擊允許后,可以在Proxy -> Access Control Settings里看到可以訪問此代理服務器列表
image.png

設置手機代理信任證書
image.png

修改參數重新發起請求
詳細操作步驟如圖所示:

image.png

過濾網絡請求
第一種方法比較簡單在Sequence界面的中部的Filter欄中填入需要過濾出來的關鍵字就行了。
image.png

第二種方法使用在菜單欄選擇"Proxy"->"Recording Settings",然后選擇Include欄,選擇Add,然后填入需要監控的協議,主機地址,端口號。這樣就可以只截取目標網站的數據包了.
image.png

Exclude是去除某個接口的數據抓包操作,和Include操作一樣,
Options是在數據抓包時候的可選項,可以設置一些限制對抓包操作.

代理轉發
為了方便我們開發和測試,在開發的時候我們一般會分不同的環境進行開發,例如生產環境、開發環境、測試環境。在測試環境開發好之后我們需要上架前需要發布到預發環境上再次進行測試,這時候就需要我們重新打包APP,測試下預發布環境是否是正常的,或者是需要做不同環境的接口測試這樣需要重復打包,這樣的做的話效率極低,使用charles可以為我們完美的解決這個問題.
選擇要轉發的接口右鍵-> Map Remote

image.png

然后更改你要轉發的接口數據:
image.png

配置菜單欄Tools-> Map Remote

image.png

image.png

接著你就可以看到代理轉發之后的數據請求了,是不是很方便.
image.png

https抓包
http和http是的區別:https://www.runoob.com/w3cnote/http-vs-https.html 科普.

手上只有蘋果設備,emmmm 接下來已蘋果設備為例來說https的抓包流程的使用.以圖片的方式來展示操作流程.
Mac 電腦使用 設置CA證書


image.png

鑰匙串信任證書


image.png

手機上注冊證書
image.png

手機瀏覽器輸入 chls.pro/ssl下載證書
image.png

點擊允許,點擊安裝手機證書


image.png

安裝完成證書后,在設置-->通用-->關于本機-->證書信任設置
image.png

接下來就可以抓取Https的數據包了.

模擬網速慢

在測試的時候想要模擬一下網絡慢的情況,在Proxy->Throttle Setting,然后選擇Enable Throttling,自己設置想要的網絡環境.


image.png

image.png

服務器壓測
我們在想打壓的網絡請求上(POST 或 GET 請求均可)右擊,然后選擇 「Repeat Advanced」菜單項,如下所示:

image.png

設置斷點
要針對某一個請求設置斷點,只需要在這個請求網址右擊選擇Breakpoints,然后點擊斷點按鈕,就可以斷點某一個請求了,在斷點的時候可以更改這個請求的參數與數據,達到我們想要的數據結果.

image.png

先寫到這里,有好用的功能在補充,待續。。。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Charles 使用說明書(客戶端開發使用部分) 客戶端開發過程中是不是經常對網絡調試無比的焦躁,特別是對接接口A...
    就叫yang閱讀 855評論 0 4
  • 轉自http://blog.csdn.net/lmmilove/article/details/50244537 ...
    匿名者joker閱讀 535評論 0 0
  • 一、charles的使用 1.1 charles的說明 Charles其實是一款代理服務器,通過過將自己設置成系統...
    朝畫夕拾閱讀 1,093評論 0 0
  • 轉自http://blog.csdn.net/lmmilove/article/details/50244537 ...
    抓兔子的貓閱讀 25,293評論 6 11
  • 1.感恩早起聆聽清晨冥想,感受現在自身的身體,頭,手,腳,全身心,呼吸 2.感恩今天睡到6點50分,但早上的時間不...
    77Sunny閱讀 252評論 0 0