什麼是API請求構建工具
在移動網際網路時代，面向多端開發成為主流，需要向用戶提供如：安卓App、蘋果App、WAP、小程式、Web網頁等等多種應用入口，這些入口稱為前端。而為不同前端提供資料和業務資訊的系統稱為後端。前端與後端會約定資料通訊的方式，通常採用的是RESTful API的方式，也可以採用socket rpc的或者GraphQL的方式。
由於前後端開發的模式越來越成熟，前後端開發的工作可以完全同時進行，只要前後端開發者協商好前後端程式對接的標準即可。這就要求系統測試者需要有一種工具可以在系統完全開發完成之前就可以對後端提供的資料介面進行訪問測試。這也就是API&HTTP工具誕生的由來。我們暫時把這種工具叫做：“API請求構建工具”。
市面上常見的API請求構建工具有幾種：獨立的桌面程式、命令列程式、瀏覽器擴充套件、Web服務等。著名的API請求構建工具有Postman、Swagger Inspecter、Soap UI、Apigee等等。國內有一些公司也通過Web服務的方式提供API測試功能，例如網易數帆的GoAPI。當然不需要圖形介面也可以直接選擇用curl這樣的免費工具進行HTTP API測試。
什麼是Hoppscotch
Hoppscotch是一種可以通過Web服務的方式構建API訪問的工具。
之前介紹的很多API請求構建工具都是商業軟體，或者免費版僅僅提供很有限的功能。其中曾經最流行的Postman在收費之後就很被開發者社群詬病。
有位印度裔小哥Liyas Thomas對此極為不爽，就釋出了一個新的工具叫：Postwoman，顯而易見，Postwoman是專懟Postman的。
同樣Postwoman提供了Http訪問測試和API請求構建功能，並且充分考慮到現在雲應用會涉及到的多種網路請求構建的場景，除了基本的Http RESTful訪問之外，還提供了Socket.io、EventSourcee、MQTT、GraphQL等多種請求的構建方式。
等等……這些和Hoppscotch有什麼關係？
相信很多人也都猜到了，Hoppscotch就是Postwoman。2020年8月，Liyas小哥可能覺得一直懟Postman也挺low的，2020年8月決定改名叫Hoppscotch了。
Hoppscotch的Github地址在：https://github.com/hoppscotch/hoppscotch
我也在Gitee上fork了一份：https://gitee.com/bison-fork/hoppscotch
體驗地址：https://hoppscotch.io
讓Hoppscotch跑起來
可能由於Liyas小哥是個設計師&前端開發者，所以Hoppscotch使用Nodejs開發，允許在本地安裝執行，並可以通過PWA的方式安裝為應用。本文由於篇幅的關係，不討論PWA安裝的部分，僅介紹如何將Hoppscotch在本地安裝。
接下來直接進入正題。
a，環境準備
由於Hoppscotch基於Nodejs，所以需要安裝Nodejs環境，具體方法請移步https://nodejs.org。
包管理器可以選擇npm也可以用yarn。
個人推薦yarn，所以要npm i -g yarn來安裝yarn。
為了讓yarn跑得更快，啟用yarn國內源：yarn config set registry https://registry.npm.taobao.org/
當然，git工具是必不可少的。
b，程式碼準備
執行git clone https://github.com/hoppscotch/hoppscotch，克隆Hoppscotch程式碼庫到本地，如果覺得Github太慢，可以用我在Gitee上的fork：https://gitee.com/bison-fork/hoppscotch
進入克隆下來的程式碼目錄（應該是：hoppscotch），
然後執行yarn或npm install命令安裝依賴包。
c，執行
執行npm run dev或者yarn run dev命令即可馬上執行啟動Web服務。
通過瀏覽器開啟本機ip的3000埠即可訪問。例如：http://127.0.0.1:3000或http://你本機ip:3000。
如果打算把Hoppscotch作為一個Web應用部署到其他機器，可以執行npm|yarn run build命令構建靜態檔案，然後用npm|yarn run start 命令可以直接執行靜態檔案檢視效果。
d，發現個問題
當看到酷酷的介面出來，可能你就迫不及待輸入了一些網址或者API地址進行測試，結果彈出來個紅彤彤的：Network Error，頓時整個人就不好了。開始懷疑人生，Hoppscotch這破工具不能開箱即用？
我翻了一下Hoppscotch倉庫的issue，遇到這問題的人真的不少，其實這也是官方文件語焉不詳的地方。
其實這是Hoppscotch防止CORS跨域訪問機制導致的問題。Hoppscotch本身是一個Web應用，所以訪問其他網址的時候，本質上就是CORS。那麼怎麼辦？
e，解決問題
接下來我們來說要怎麼解決這個問題。
首先官方是提供了解決方案的，就是提供瀏覽器擴充套件來覆蓋CORS限制規則。
我們以Firefox瀏覽器為例，先安裝Firefox擴充套件開發工具web-ext：npm i -g web-ext，或者yarn global add web-ext。
接下來獲取瀏覽器擴充套件程式碼：git clone https://github.com/hoppscotch/hoppscotch-extension，當然我在Gitee上也準備了一份fork：https://gitee.com/hoppscotch/hoppscotch-extension。
進入程式碼目錄，應該是hoppscotch-extension。
接下來很重要：
修改目錄下的manifest.json檔案，在content_scripts\\matches部分增加一行：
"*://*/*",結果如圖：
執行npm|yarn build命令。
進入生成的dist目錄，執行Firefox擴充套件打包命令：web-ext build。
Firefox的擴充套件應該生成在web-ext-artifacts目錄下。
接下來安裝擴充套件。
開啟Firefox瀏覽器，按下Ctrl+Shift+A快捷鍵開啟Firefox擴充套件管理介面，點選右上角設定按鈕，選擇“從檔案安裝附加元件...”，找到剛剛打包好的檔案，然後一路安裝下去即可。
結果如圖：
接下來在Hoppscotch介面確認擴充套件已經安裝成功，在setting介面可以看到extension部分顯示了Firefox擴充套件的版本號，這個時候就可以盡情訪問各種網址了。
一切剛剛開始
裝好Hoppscotch才是一切的開始，至於怎麼樣玩好Hoppscotch那會是另外一篇文章了。期待各位同行能多多實踐。