好用的網路監控工具 – Charles

軟體介紹

下載點:Download

Charles 是在電腦上常用的網路封包截取工具,在做手機APP開發時,我們為了測試與伺服器端的網路通訊,常常需要截取網絡封包來分析。除了在做手機APP開發中測試端口外,Charles也可以用於分析第三方應用的通訊協議。配合Charles 的SSL 功能,Charles 還可以分析Https 協議。

Charles 通過將自己設置成系統的網絡訪問代理服務器,使得所有的網絡訪問請求都通過它來完成,從而實現了網路封包的截取和分析。

Charles 是收費軟件,可以免費試用30 天。試用期過後,未付費的用戶仍然可以繼續使用,但是每次使用時間不能超過30 分鐘,並且啟動時將會有10 秒种的延時。因此,該付費方案對廣大用戶還是相當友好的,即使你長期不付費,也能使用完整的軟件功能。只是當你需要長時間進行封包調試時,會因為Charles 強制關閉而遇到影響。

Charles 主要的功能包括:

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

使用Charles抓取手機網路使用資訊

  1. 將電腦和手機連上同一個WIFI網路
  2. 輸入ifconfig(MAC電腦)取得電腦的內網IP,如下圖可得知內網IP為192.168.1.104
  3. 設置Charles上的Proxy settings

  4. 設置手機上的WIFI的PROXY
  5. 此時即可在電腦上看到手機的網路使用狀況

以本地檔案內容取代網路回應

有時我們在本地開發網頁功能時,若以API的方式去讀取資料,當我們在測試時可能會希望回傳某個固定的response。這時候就可以用Map Local的功能。

使用步驟
1、Save Response
選擇要模擬數據的接口,然後右鍵,選擇“Save Response”

2、修改Response
保存到本地的Response信息可以任意修改,如下:

3、設置Map Local
內容準備完成之後,可以設置當我們打API時會回應的內容是我們剛剛設定的本機的文件,選擇要模擬數據的網址右鍵,在彈出的菜單中選擇“Map Local”,設置如下:


4、Map Local的禁用和啟用
Map Local一般用於測試,測試完成後,需要禁用Map Local功能。charles中菜單欄選擇“tools->Map Local,可以選擇啟用或是禁用此功能。

Rewrite功能

有時候我們若是需要去修改回傳response的檔頭或者內容時,可以使用charles的rewrite功能

設定方式如下:

添加一個Rewrite規則,以將JSON回應內容更改為{"foo":"bar"}

從這邊可以看出回應有沒有真正被套用到設定的修改

好用的API測試工具 – POSTMAN

軟體介紹


官方下載點 : https://www.getpostman.com/
Chrome 擴充功能版 : 下載連結

Postman 是一個可以模擬 HTTP Request 的工具,其中包含常見的 HTTP 的請求方式,例如: GET 、POST、PUT、DELETE,而它的主要功能就是能夠快速的測試你的 API 是否能夠正常的請求資料,並得到正確的請求結果。

使用帳號

使用帳號去同步設定,可以選擇新創一個帳號或者使用google帳號去同步在不同電腦裡的POSTMAN設定

這樣在不同電腦裡面,使用紀錄或者儲存的Collection等都可以被同步。

發送Request教學

在登入帳號後,按下左上方的+New按鈕,會可以看到一個創建Request的畫面

有些API的網址會有變數,這時可以使用https://api.library.com/:entity/並且藉由下面這樣的設定來取代變數entity

在發送Request時,正確的header資訊非常重要,可在下面這個頁籤做設定

也可以選擇發送的模式是要使用POST或GET

更多詳細的教學請見:官方教學

Pre-request scripts

如果我們希望每一次打出的某個變數能夠不一樣,這時可以撰寫pre-request scripts來達到這個目的,如下圖:

這時可以在傳送的參數裡用{{timestampHeader}}來存取timestampHeader這個變數

把儲存的測試API資料變成文件

在POSTMAN測試的資料可以轉換成精美的HTML API文件

更多資料請見官網

使用Postman API去自動化呼叫API測試

在下面的畫面裡按下『Get API Key』的按鈕可以取得呼叫API測試的密鑰

參考資料

使用VSCode繪製UML文件

PlantUML介紹

PlantUML是一個VSCode的插件,可以透過直觀的文字描述產生對應 UML 的模型生成工具,官方網站已經提供了詳細的範例以及說明,相關語法其實不用一開始就先死背,需要時至網站查詢即可,上手難度不大,目前提供下列 UML 模型:

  • 循序圖
  • 用例圖
  • 類圖
  • 活動圖
  • 組件圖
  • 狀態圖
  • 對像圖
  • 部署圖
  • 定時圖

安裝方式,.

  1. 按下插件ICON
  2. 在搜尋名稱打入: PlantUML
  3. 按下install

參考資料

  1. 用筆記也可以管理專案(二):Markdown Preview Enhanced
  2. [TIL] 在 vscode 上面安裝並且使用 PlantUML
  3. PlantUML in a nutshell