2019年2月28日

網頁 API 測試工具整理﹍免費線上服務 + 軟體

網頁 API 測試工具整理﹍免費線上服務 + 軟體

Wayne Fu 0 A+
web-api-tester-software-free-online-tool.jpg-網頁 API 測試工具整理﹍免費線上服務 + 軟體前端開發工程師常需要串接各種第三方服務,例如 FB API、Google API 等。如果直接寫程式呼叫 API,可能會花不少時間 debug,來排除各種意想不到的錯誤。

Google 與 FB 很體貼開發者,官方大部分都有提供線上 API 測試工具,例如:


那麼除了網路龍頭大公司以外的眾多 API 要如何測試呢?本篇整理一些免費軟體、線上測試工具,供前端工程師參考。

(圖片出處: getpostman.com)


一、Postman 軟體



這個軟體有桌面版及 Chrome 外掛,使用桌面版介面比較完整,操作起來也比較舒服。

使用線上工具的優點是不用安裝軟體,但介面、功能會比不上桌面版軟體。所以如果常常需要測試 API 的話,會比較建議花個時間來下載軟體、進行安裝,將來作業環境可以比較順手。



二、線上服務 API Tester



以這篇「利用 Github API 上傳檔案」的範例程式碼進行測試:


web-api-tester-software-free-online-tool-1.jpg-網頁 API 測試工具整理﹍免費線上服務 + 軟體

  • 上圖中間紅框處為送出的參數資料,API Tester 這個區塊我覺得設計不好,需要手動輸入所有 JSON 格式的字串,使用體驗不佳
  • 但是優點為這個 Github API 的 PUT 能成功呼叫,代表這工具能自動將 JSON 物件轉成 Github 能吃的格式
  • 下面紅框的 PASS 代表 API 執行成功


web-api-tester-software-free-online-tool-2.jpg-網頁 API 測試工具整理﹍免費線上服務 + 軟體

  • 上圖為呼叫 API 後的回傳資料,可看到 Response Headers 資訊完整
  • 而 Response Body 欄位設計不佳,所有資訊擠在一行呈現,除了要用滑鼠往右拉,也不易閱讀、操作及複製字串



三、線上服務 REST test



用同樣的範例程式碼測試這個工具:

web-api-tester-software-free-online-tool-3.jpg-網頁 API 測試工具整理﹍免費線上服務 + 軟體

  • 左邊紅框的按鈕可看出這個工具,在操作介面上設計得比較好,新增、移除參數都有圖形介面可操作,不必手動需入 JSON 格式的一大堆符號。
  • 可惜 Github API 的 PUT 不能成功呼叫,從右方的錯誤訊息來看,代表這個工具無法將 JSON 資料轉成 Github 能吃的格式


web-api-tester-software-free-online-tool-4.jpg-網頁 API 測試工具整理﹍免費線上服務 + 軟體

  • 上圖為呼叫 API 後的回傳資料,可看到 Response Body 欄位已將所有資訊格式化,很容易閱讀。
  • 而 Response Headers 回傳內容比較少一些



四、總結


根據本篇的操作心得,免費線上 API 測試工具各有利弊,都有需要再加強的地方,所以最好在書籤裡面多準備幾個,根據不同 API 的性質使用不同測試工具。

而桌面版工具 Postman 則非常完善,沒有任何問題。那麼有時間研究的話建議裝桌面版,沒時間可直接使用線上工具。


更多網頁開發工具:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

1 則留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP