筆者將在本文中分享自己在開(kāi)發(fā)生涯中常用的11種前端工具。
一.CanIUse
地址：https://caniuse.com/
有時(shí)候不太確定某個(gè)Web API與瀏覽器、手機(jī)瀏覽器能否兼容？這個(gè)工具讓你輕松測(cè)試Web API與瀏覽器的兼容情況。
當(dāng)我們想要了解哪些瀏覽器及相應(yīng)版本支持Web Share API：navigator.share(...)
在工具里簡(jiǎn)單查詢便可查看結(jié)果。如圖，列出了所有支持navigator.share(...)的瀏覽器及相應(yīng)版本。
二.Minify
地址：http://minify.com/
我們使用這個(gè)工具讓即將發(fā)布到生產(chǎn)環(huán)境中的應(yīng)用代碼包縮減至最小，通過(guò)刪減空格、無(wú)效代碼等操作，使得應(yīng)用包顯著縮小，從而令瀏覽器的加載時(shí)間縮短。
這款在線工具minify.com支持壓縮Web應(yīng)用。
三.Bit.dev
地址：https://bit.dev/
Bit.dev可用來(lái)托管、記錄、管理來(lái)自不同項(xiàng)目的可復(fù)用組件。對(duì)于增加代碼重用、加速開(kāi)發(fā)和優(yōu)化團(tuán)隊(duì)協(xié)作極其有效。
這也是我們從頭構(gòu)建設(shè)計(jì)系統(tǒng)的好選擇，因?yàn)樗哂性O(shè)計(jì)系統(tǒng)所需的一切。Bit.dev可以與Bit這款處理組件隔離和發(fā)布的開(kāi)源工具完美匹配。
Bit.dev支持React、React、TypeScript、Angular、Vue等許多庫(kù)。
上圖展示了在Bit.dev中搜索共享React組件的過(guò)程。
四.Unminify
地址：https://unminify.com/
這款工具可以逆轉(zhuǎn)壓縮操作，支持對(duì)JS、CSS及HTML代碼的反壓縮。通過(guò)解壓縮、反混淆及美化，可以讓一段壓縮后的JS代碼再次變?yōu)榭勺x的。
五.Stackblitz
地址：https://stackblitz.com/
這款工具適合所有人，Stackblitz讓我們可以在Web上使用Visual Studio Code。
只需點(diǎn)擊一下，Stackblitz即可快速支持Angular、React、Vue、Vanilla、RxJS、TypeScript項(xiàng)目。
當(dāng)你想用瀏覽器嘗試執(zhí)行一段代碼，或是任何操作當(dāng)前JS框架的某個(gè)功能時(shí)，Stackblitz就會(huì)大顯身手。假如你正在閱讀一篇Angular文章，想要嘗試其中的代碼，就可以最小化瀏覽器并快速搭建一個(gè)新的Angular項(xiàng)目了，非常快速簡(jiǎn)便。
六.JWT.io
地址：https://jwt.io/
使用JSON網(wǎng)絡(luò)令牌（JWT）來(lái)保障應(yīng)用安全性，或是用JWT來(lái)支持用戶訪問(wèn)后端受保護(hù)資源的情況下，決定是否應(yīng)當(dāng)訪問(wèn)路徑或資源的方法之一是檢查令牌的到期時(shí)間。有時(shí)候，我們希望解碼某個(gè)JWT以查看其有效負(fù)載，就可以使用jwt.io。
這款在線工具支持上傳token令牌，來(lái)查看有效負(fù)載。可以采用粘貼，jwt.io就會(huì)對(duì)令牌進(jìn)行解碼，并顯示其有效負(fù)載。
七.BundlePhobia
地址：https://bundlephobia.com/
當(dāng)我們不確定node_modules的大小，或想要確認(rèn)某個(gè)即將安裝在機(jī)器上pakckage.json的大小時(shí)，就可以使用BundlePhobia，它讓我們可以了解某個(gè)npm包添加到前端軟件包后對(duì)系統(tǒng)性能的影響。
這款工具可上傳單個(gè)package.json文件，并展示從package.json所安裝的依賴項(xiàng)大小。
八.Babel REPL
地址：https://babeljs.io/en/repl
Babel是一個(gè)免費(fèi)的開(kāi)源JS轉(zhuǎn)編譯器，可將ES6+代碼轉(zhuǎn)為舊的ES5 JS代碼，由Bebeljs團(tuán)隊(duì)開(kāi)發(fā)。這款工具允許嘗試添加到ES的內(nèi)容，或者某些特定階段添加到ECMA的內(nèi)容，還可美化代碼、限制文件大小，讓使用者在轉(zhuǎn)編譯的過(guò)程中嘗試不同的版本。
九. Prettier Playground
地址：https://prettier.io/playground
Prettier是一個(gè)偏向JS代碼格式化程序。通過(guò)解析代碼，并使用JS重新輸出，來(lái)實(shí)現(xiàn)一致性樣式。這款工具在我們的開(kāi)發(fā)中廣泛使用，它有在線平臺(tái)來(lái)美化代碼。
10.Postman
地址：https://www.postman.com/
這款工具可快速測(cè)試自己的API：GET、POST、DELETE、OPTIONS、PUT，筆者正在用這款工具，值得一試。
11.JSLint
地址：https://jslint.com
在JS linter的世界中，JSLint排名最高。這款在線工具可在瀏覽器中插入一段JS代碼或JS文件，這是一款靜態(tài)代碼分析工具，用于檢查JS源代碼是否符合編碼規(guī)則。
原文鏈接：https://blog.bitsrc.io/12-useful-online-tools-for-frontend-developers-bf98f3bf7c63
看到這，不妨點(diǎn)贊關(guān)注唄！
你的支持就是我更新的動(dòng)力（0，0+）
同時(shí)我還為大家準(zhǔn)備了一個(gè)Web前端技術(shù)交流q群：859794646，
群里可以一起學(xué)習(xí)編程，進(jìn)群能領(lǐng)到前端完整學(xué)習(xí)資料以及源代碼，還有大量?jī)?nèi)推機(jī)會(huì)
轉(zhuǎn)載請(qǐng)注明來(lái)源出處。
