作為前端開發(fā)人員，互聯(lián)網(wǎng)有很多令人驚嘆的工具，這些工具為我們的生活提供了極大的便利。

[[318663]]

本文將快速回顧開發(fā)工作中經(jīng)常使用的 11 個(gè)工具。

大家和小芯一起來看看吧~

1. Minify

為減小應(yīng)用代碼的包大小空間，可以對(duì)其進(jìn)行壓縮。壓縮能清除空白格,無效代碼等，讓應(yīng)用程序的包大小大幅減小，從而加快瀏覽器的加載時(shí)間。

這個(gè)在線工具minify.com能夠?qū)W(wǎng)站代碼進(jìn)行壓縮。

2.Unminify

這個(gè)工具與Minify的作用恰恰相反。

Unminify通過解壓、去模糊化和美觀化代碼，能夠再次讀出一段壓縮過的代碼。

3. BundlePhobia

你是否曾經(jīng)不確定node_modules的空間大小，或只想知道pakckage.json 在電腦中占存多少?BundlPhobia能為你解答。

此工具可以上傳一個(gè)packa.json 文件，同時(shí)顯示從package.json 中植入的附屬項(xiàng)的大小。

4. Stackblitz

這是很受歡迎的工具。Stackblitz提供了世界范圍內(nèi)最普及和使用頻率最高的IDE 程序和網(wǎng)頁上的 VisualStudioCode。

只需單擊一下，Stackblitz 便能快速架構(gòu)起Angular,React,Vue,Vanilla,RxJS,TypeScript等項(xiàng)目。

想要嘗試編寫新代碼，或?yàn)g覽器 中JS當(dāng)前的任何框架特征，Stackblitz對(duì)你來說都大有裨益。想象你正在閱讀 Angular 的一篇文章，遇到了想要嘗試的代碼，就將瀏覽器最小化，用幾個(gè) LOC 構(gòu)建新的 Angular 項(xiàng)目。

操作簡(jiǎn)單便捷。

還有很多好用的在線IDE，但我相信Stackblitz有其獨(dú)特之處。Visual Studio Code這款工具大家都擅長(zhǎng)使用，也都喜歡使用，Stackblitz正是抓住了這點(diǎn)。

5. Babel REPL

Babel是一個(gè)免費(fèi)的開源 JS 編譯器，用于將現(xiàn)代 ES 代碼隱藏到普通舊版本的 ES5 JavaScript 中。

此工具由 Babeljs 團(tuán)隊(duì)開發(fā)，是一款在線 Web 應(yīng)用程序，它可以將 ES6+ 代碼轉(zhuǎn)碼到 ES5。

我們可以用它來測(cè)試ES 的近期更新和ECMA在某些階段添加的新功能。IT 能美化代碼、限制文件大小，并讓人在轉(zhuǎn)換期間享受時(shí)空之旅。

6. Bit.dev

Bit.dev是個(gè)很好的組件中心。筆者用它進(jìn)行組裝、記錄和管理不同項(xiàng)目中的可重用構(gòu)件，能提高代碼的重復(fù)利用度、加快開發(fā)進(jìn)程并優(yōu)化團(tuán)隊(duì)協(xié)作。

對(duì)于重新構(gòu)建設(shè)計(jì)系統(tǒng)，它也是不錯(cuò)的替代品(因?yàn)樗旧蠞M足設(shè)計(jì)系統(tǒng)所需)。Bit.dev和Bit與完美協(xié)作，Bit是一個(gè)開源工具，用于分離并發(fā)布組件。

Bit.dev支持React,React withTypeScript,Angular,Vue等組件

示例：在 Bit.dev 中搜索共享的 React 組件

7. Prettier Playground

Prettier是款穩(wěn)定的JS代碼格式器。通過它來解析、再編輯代碼，代碼格式可以保持不變，實(shí)現(xiàn)優(yōu)秀JS編碼實(shí)踐。

此工具在開發(fā)工作中受到廣泛使用，不僅如此它也提供了一個(gè)美化代碼的在線平臺(tái)。

8. JWT.io

如果你正在使用 JSON Web Tokens(JWT) 保護(hù)應(yīng)用程序，或使用 JWT 讓用戶訪問后端上的受保護(hù)資源。

決定是否應(yīng)訪問路由或資源的一種方法是檢查令牌的過期時(shí)間。有時(shí)會(huì)需要解碼 JWT 來查看其有效負(fù)載，jwt.io恰好提供這項(xiàng)服務(wù)。

此在線工具讓人能夠得到查看有效負(fù)載的權(quán)限。粘貼標(biāo)記后，jwt.io解碼令牌，并顯示其有效負(fù)載。

9. Postman

此工具有助于快速測(cè)試 API端點(diǎn)：GET,POST,DELETE,OPTIONS,PUT.

筆者用過此工具，它值得排在第10位。

10. CanlUse

對(duì)于Web API(網(wǎng)絡(luò)應(yīng)用程序接口) 在某個(gè)瀏覽器中能否兼容是否曾有疑惑，或在手機(jī)瀏覽器中是否可用?這個(gè)在線工具能幫助你輕松測(cè)試 Web API 瀏覽器的兼容性。

假設(shè)你想了解哪些瀏覽器及其版本支持 Web ShareAPI：

navigator.share(...)

可以看到，所有支持navigator.share(...)的瀏覽器及其版本都羅列出來了。

11. JSLint

在使用JSLint的人看來，JSLint在他們心中排第一。JSLint 的在線版本能夠?qū)g覽器中的一段 JS 代碼或 JS 文件進(jìn)行編譯。

結(jié)論

當(dāng)然還有很多好用的工具未被列出來，這部分歡迎機(jī)智的大家在留言區(qū)補(bǔ)充喲~