網(wǎng)上有很多很棒的工具，讓作為前端開發(fā)人員的我們生活的更加輕松。在這篇文章中，我將快速介紹一下我在開發(fā)工作中經(jīng)常使用的11種工具。

Node.green

用來查詢當(dāng)前 Node 版本是否某些功能。例如,對(duì)象展開符( Rest/Spread Properties)

可以看到在 Node v8.3.0 以下是不支持的。分別在 Node v8.5.0 和 v8.2.1 下運(yùn)行以下代碼片段

當(dāng)你遇到以上錯(cuò)誤，那大多就是 Node 版本問題啦。

在線地址: https://node.green/

CanIUse

當(dāng)你想要確定某個(gè) Web API 的兼容性的時(shí)候，這個(gè)在線工具將輕松搞定。

假設(shè)我們想知道哪些瀏覽器及其版本將支持 Web Share API：navigator.share（...

查看結(jié)果。瀏覽器和支持navigator.share(…)的版本都列出了。

在線地址: https:///

Minify

為了減少應(yīng)用程序代碼的包大小，我們?cè)诎l(fā)布到到生產(chǎn)環(huán)境的時(shí)候，需要使它們最小化。 最小化消除了空格，無效代碼等。這能夠使應(yīng)用程序包大小的顯著減小，從而節(jié)省瀏覽器上的加載時(shí)間。（雖然在當(dāng)下，有 webpack uglifyJS 等插件，但是當(dāng)我在開發(fā)非打包的簡(jiǎn)單應(yīng)用的時(shí)候，這個(gè)是一個(gè)不錯(cuò)的選擇。 ）

在線地址: https://www./

Bit.dev

Bit.dev是一個(gè)非常棒的組件中心。 可以用它來托管，記錄和管理來自不同項(xiàng)目的可復(fù)用組件。 這是增加代碼復(fù)用，加速開發(fā)并優(yōu)化團(tuán)隊(duì)協(xié)作的好方法。

這也是從頭開始構(gòu)建設(shè)計(jì)系統(tǒng)的不錯(cuò)選擇（因?yàn)樗举|(zhì)上具有設(shè)計(jì)系統(tǒng)所需的一切）。 Bit.dev與Bit完美配合，Bit是處理組件隔離和發(fā)布的開源工具。

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

在線地址: https://bit.dev/

Unminify

免費(fèi)的在線工具，用于最小化（解壓，反混淆）JavaScript，CSS和HTML代碼，使其可讀性強(qiáng)，美觀

在線地址: https:///

Stackblitz

這是每個(gè)人都喜歡的工具。Stackblitz使我們能夠使用世界上最流行和使用最多的IDE，即web上的Visual Studio代碼。

只需單擊一下，Stackblitz 即可快速提供Angular，React，Vue，Vanilla，RxJS，TypeScript項(xiàng)目的框架。

當(dāng)你想從瀏覽器中嘗試一段代碼或任何當(dāng)前JS框架中的功能時(shí)，Stackblitz非常有用。 假設(shè)你正在閱讀Angular文章，并且遇到了想要嘗試的代碼。 您可以最小化您的瀏覽器并快速搭建一個(gè)新的Angular項(xiàng)目。

還有其他很棒的在線IDE，但是我相信Stackblitz的轉(zhuǎn)折點(diǎn)是使用每個(gè)人都喜歡的 Visual Studio Code感覺和工具。 (ps: 本人使用體驗(yàn),非?？焖倭鲿? 附上圖，比 sandbox 快很多)

在線地址: https:///

JWT.io

如果您使用JSON Web令牌（JWT）保護(hù)應(yīng)用程序安全，或者使用JWT允許用戶訪問后端的受保護(hù)資源。

決定是否應(yīng)訪問路線或資源的一種方法是檢查令牌的到期時(shí)間。 有時(shí)候我們想要解碼JWT以查看其有效 payload，恰好提供了這一點(diǎn)。

這個(gè)在線工具使我們能夠插入令牌以查看其有效 payload。 一旦我們粘貼了令牌，便對(duì)該令牌進(jìn)行解碼并顯示其有效payload。

在線地址: https:///

BundlePhobia

您是否曾經(jīng)不確定過node_modules的大小，或者只是想知道將pakckage.json安裝在您的計(jì)算機(jī)中的大?。?BundlePhobia提供了答案

該工具使我們能夠加載package.json文件，并顯示將從package.json安裝的依賴項(xiàng)的大小，也可以查詢單包的體積。

在線地址: https:///

Babel REPL

Babel是一個(gè)免費(fèi)的開放源代碼JS轉(zhuǎn)編譯器，用于將現(xiàn)代ES代碼轉(zhuǎn)換為普通的 ES5 JavaScript。

該工具是Babeljs團(tuán)隊(duì)在網(wǎng)上建立的Web應(yīng)用，可以將 ES6 +代碼轉(zhuǎn)換為ES5。

本人總結(jié)的兩個(gè)比較方便的使用方式

1. 方面面試時(shí)在線寫高級(jí)語法。

2. 可以快速查看某些 polyfill 是怎么寫的。

在線地址: https:///en/repl

Prettier Playground

Prettier是一個(gè)自以為是的JS代碼格式化程序。 它通過解析代碼并使用JS最佳編碼實(shí)踐將其重新打印來實(shí)施一致的樣式。

該工具已在我們的開發(fā)環(huán)境中廣泛使用，但它也具有一個(gè)在線地址，你可以在其中美化您的代碼。

在線地址: https:///playground

postwoman

postwoman 是一款功能強(qiáng)大的網(wǎng)頁調(diào)試和模擬發(fā)送HTTP請(qǐng)求的Chrome插件，支持幾乎所有類型的HTTP請(qǐng)求，操作簡(jiǎn)單且方便?？捎糜诮涌跍y(cè)試，比如測(cè)試你用easy-mock生成的接口。

在線地址: https:///

本文翻譯自 https://blog./12-use... 但是不僅僅是單純地翻譯，替換了原文中一些我覺得不太實(shí)用的并加入一些自己的總結(jié)。

最后

如果我的文章有幫助到你，希望你也能幫助我，歡迎關(guān)注我的微信公眾號(hào) 秋風(fēng)的筆記，回復(fù)好友 二次，可加微信并且加入交流群，秋風(fēng)的筆記 將一直陪伴你的左右。