11個web前端開發人員必備的在線工具，功能強大，值得收藏

互聯網上有許多很棒的工具，使Web開發人員的工作更加輕松。在本文中，我將簡要介紹我在工作中經常使用的11種工具。

1. caniuse.com

你是否不確定web API是否與特定瀏覽器兼容，或者是否可以在移動瀏覽器中訪問？此在線工具可以輕松測試web API與瀏覽器的兼容性。

該工具為桌面和移動設備上的前端Web技術提供了不斷更新的瀏覽器支持表。

在這里小編建了一個前端學習交流扣扣群：132667127，我自己整理的最新的前端資料和高級開發教程，如果有想需要的，可以加群一起學習交流

假設我們想知道哪些瀏覽器及其版本支持web資源的API請訪問navigator.share，表中列出了支持navigator.share的瀏覽器及其版本。

2.Minify

為了減小應用程序代碼的包大小，開發人員會將它們的體積減小到最小。最小化會刪除空格、無效代碼等，這就大大減少了應用程序的大小，從而加快了瀏覽器的下載速度。

minify.com在線工具使用戶能夠最小化Web應用程序代碼。

3. Bit.dev

Bit.dev是一個很棒的組件中心。我用它來托管、記錄和管理來自不同項目的可重用組件。這是改善代碼重用，加快開發速度和優化團隊協作的好方法。

從頭開始創建設計系統也是一個很好的選擇（因為它具有設計系統所需的一切）。Bit.dev與Bit搭配使用非常出色，Bit是一個處理組件隔離和發布的開源工具。

Bit.dev支持React，帶有TypeScript的React，Angular，Vue等。

4. Unminify.com

該工具的作用與minify相反。該工具允許通過壓縮、解壓縮和執行預檢查，來使最小化的JS代碼的一部分再次變得可讀。

5. Stackblitz.com

該工具在許多開發人員中都很流行。Stackblitz為我們提供了使用全球范圍內使用最廣泛的IDE Visual Studio Code的機會。

一鍵安裝Stackblitz即可快速安裝Angular，React，Vue，Vanilla，RxJS，TypeScript項目。

當你想從瀏覽器中嘗試任何現有JS平臺中的一段代碼或函數時，Stackblitz尤其有用。想象一下，你正在閱讀Angular文章，偶然發現了你想要嘗試的代碼。只需單擊幾下，你就可以最小化瀏覽器并創建一個新的Angular項目。

6. JWT.io

如果你使用JSON Web令牌（JWT）保護你的應用程序，或者使用JWT為用戶提供對后端受保護資源的訪問權，則很有用。

決定是否應授予對路由或資源訪問權限的一種方法是檢查令牌的有效性。當我們想解碼JWT以查看其有效負載時，jwt.io恰恰提供了這一點。

這個在線工具允許我們連接令牌以查看其有效載荷。插入令牌后，jwt.io會對其進行解碼并顯示其有用數據。

7. BundlePhobia.com

你是否曾經不確定過node_modules文件的大小，或者想知道計算機上將安裝多大尺寸的pakckage.json？BundlePhobia給出了答案。

該工具允許你下載package.json文件，并顯示將從package.json安裝的依賴項的大小。

8. Babel REPL

Babel是一個免費的開源JS轉譯器，用于將現代ES代碼轉換為舊的ES5 JavaScript。

該工具是Babeljs團隊Web應用程序的在線設置，在其中我們可以將ES6 +代碼轉換為ES5。

它使你能夠測試最近對ES的增補，或者測試在ECMA中增補的某些功能。IT專業人員可以預先優化代碼，限制文件大小，并允許我們在整個編譯過程中隨時移動。

9. Prettier Playground

Prettier是一個功能強大的JS代碼格式化程序。它通過分析代碼并使用最佳的JS編碼方法重寫代碼。

該工具在開發環境中被廣泛使用，但是它也有一個在線平臺，可以在該平臺上預先優化代碼。

10. Postman.com

此工具可幫助快速檢查API端點:GET、POST、DELETE、OPTIONS、PUT，我一直在使用它。

11. JSLint

JS JSLint是世界上的領先者，這是一個JSLint在線版本，允許運行一個JS代碼片段或JS文件瀏覽器。

結論

還有許多有用的工具，但這些是我的最愛。