作者 | Chidume Nnamdi
譯者 | 孫薇，責編 | 伍杏玲
頭圖 | CSDN 下載自視覺中國
出品 | CSDN（ID：CSDNnews）
以下為譯文：
筆者將在本文中分享自己在開發生涯中常用的11種前端工具。
1.CanIUse
地址：https://caniuse.com/
有時候不太確定某個Web API與瀏覽器、手機瀏覽器能否兼容？這個工具讓你輕松測試Web API與瀏覽器的兼容情況。
當我們想要了解哪些瀏覽器及相應版本支持Web Share API：navigator.share(...)
在工具里簡單查詢便可查看結果。如圖，列出了所有支持navigator.share(...)的瀏覽器及相應版本。
2.Minify
地址：http://minify.com/
我們使用這個工具讓即將發布到生產環境中的應用代碼包縮減至最小，通過刪減空格、無效代碼等操作，使得應用包顯著縮小，從而令瀏覽器的加載時間縮短。
這款在線工具minify.com支持壓縮Web應用。
3.Bit.dev
地址：https://bit.dev/
Bit.dev可用來托管、記錄、管理來自不同項目的可復用組件。對于增加代碼重用、加速開發和優化團隊協作極其有效。
這也是我們從頭構建設計系統的好選擇，因為它具有設計系統所需的一切。Bit.dev可以與Bit這款處理組件隔離和發布的開源工具完美匹配。
Bit.dev支持React、React、TypeScript、Angular、Vue等許多庫。
上圖展示了在Bit.dev中搜索共享React組件的過程。
4.Unminify
地址：https://unminify.com/
這款工具可以逆轉壓縮操作，支持對JS、css及html代碼的反壓縮。通過解壓縮、反混淆及美化，可以讓一段壓縮后的JS代碼再次變為可讀的。
5.Stackblitz
地址：https://stackblitz.com/
這款工具適合所有人，Stackblitz讓我們可以在Web上使用Visual Studio Code。
只需點擊一下，Stackblitz即可快速支持Angular、React、Vue、Vanilla、RxJS、TypeScript項目。
當你想用瀏覽器嘗試執行一段代碼，或是任何操作當前JS框架的某個功能時，Stackblitz就會大顯身手。假如你正在閱讀一篇Angular文章，想要嘗試其中的代碼，就可以最小化瀏覽器并快速搭建一個新的Angular項目了，非常快速簡便。
6.JWT.io
地址：https://jwt.io/
使用JSON網絡令牌（JWT）來保障應用安全性，或是用JWT來支持用戶訪問后端受保護資源的情況下，決定是否應當訪問路徑或資源的方法之一是檢查令牌的到期時間。有時候，我們希望解碼某個JWT以查看其有效負載，就可以使用jwt.io。
這款在線工具支持上傳token令牌，來查看有效負載。可以采用粘貼，jwt.io就會對令牌進行解碼，并顯示其有效負載。
7.BundlePhobia
地址：https://bundlephobia.com/
當我們不確定node_modules的大小，或想要確認某個即將安裝在機器上pakckage.json的大小時，就可以使用BundlePhobia，它讓我們可以了解某個npm包添加到前端軟件包后對系統性能的影響。
這款工具可上傳單個package.json文件，并展示從package.json所安裝的依賴項大小。
8.Babel REPL
地址：https://babeljs.io/en/repl
Babel是一個免費的開源JS轉編譯器，可將ES6+代碼轉為舊的ES5 JS代碼，由Bebeljs團隊開發。這款工具允許嘗試添加到ES的內容，或者某些特定階段添加到ECMA的內容，還可美化代碼、限制文件大小，讓使用者在轉編譯的過程中嘗試不同的版本。
9.Prettier Playground
地址：https://prettier.io/playground
Prettier是一個偏向JS代碼格式化程序。通過解析代碼，并使用JS重新輸出，來實現一致性樣式。這款工具在我們的開發中廣泛使用，它有在線平臺來美化代碼。
10.Postman
地址：https://www.postman.com/
這款工具可快速測試自己的API：GET、POST、DELETE、OPTIONS、PUT，筆者正在用這款工具，值得一試。
11.JSLint
地址：https://jslint.com
在JS linter的世界中，JSLint排名最高。這款在線工具可在瀏覽器中插入一段JS代碼或JS文件，這是一款靜態代碼分析工具，用于檢查JS源代碼是否符合編碼規則。
原文鏈接：https://blog.bitsrc.io/12-useful-online-tools-for-frontend-developers-bf98f3bf7c63
本文為 CSDN 翻譯，轉載請注明來源出處。
