本文翻譯自 blog.bitsrc.io/12-useful-o… 但是不僅僅是單純地翻譯，替換了原文中一些我覺得不太實用的並加入一些自己的總結。
網際網路上有很多很棒的工具，讓我們作為前端開發人員的生活更加輕鬆。在這篇文章中，我將快速回顧一下我在開發工作中經常使用的11種工具。
Node.green
用來查詢當前 Node 版本是否某些功能。例如,物件展開符( Rest/Spread Properties)
可以看到在 Node v8.3.0 以下是不支援的。分別在 Node v8.5.0 和 v8.2.1 下執行以下程式碼片段
const a = { foo: 1};
console.log({...a, b: 2});
複製程式碼
當你遇到以上錯誤，那大多就是 Node 版本問題啦。
線上地址: node.green/
CanIUse
當你想要確定某個 Web API 的相容性的時候，這個線上工具將輕鬆搞定。
假設我們想知道哪些瀏覽器及其版本將支援 Web Share API：navigator.share（...
檢視結果。瀏覽器和支援navigator.share(…)的版本都列出了。
線上地址: caniuse.com/
Minify
為了減少應用程式程式碼的包大小，我們在釋出到到生產環境的時候，需要使它們最小化。 最小化消除了空格，無效程式碼等。這能夠使應用程式包大小的顯著減小，從而節省瀏覽器上的載入時間。（雖然在當下，有 webpack uglifyJS 等外掛，但是當我在開發非打包的簡單應用的時候，這個是一個不錯的選擇。 ）
線上地址: www.minifier.org/
Bit.dev
Bit.dev是一個非常棒的元件中心。 可以用它來託管，記錄和管理來自不同專案的可複用元件。 這是增加程式碼複用，加速開發並優化團隊協作的好方法。
這也是從頭開始構建設計系統的不錯選擇（因為它本質上具有設計系統所需的一切）。 Bit.dev與Bit完美配合，Bit是處理元件隔離和釋出的開源工具。
Bit.dev支援React，帶有TypeScript的React，Angular，Vue等。
線上地址: bit.dev/
Unminify
免費的線上工具，用於最小化（解壓，反混淆）JavaScript，CSS和HTML程式碼，使其可讀性強，美觀
線上地址: unminify.com/
Stackblitz
這是每個人都喜歡的工具。Stackblitz使我們能夠使用世界上最流行和使用最多的IDE，即web上的Visual Studio程式碼。
只需單擊一下，Stackblitz 即可快速提供Angular，React，Vue，Vanilla，RxJS，TypeScript專案的框架。
當你想從瀏覽器中嘗試一段程式碼或任何當前JS框架中的功能時，Stackblitz非常有用。 假設你正在閱讀Angular文章，並且遇到了想要嘗試的程式碼。 您可以最小化您的瀏覽器並快速搭建一個新的Angular專案。
還有其他很棒的線上IDE，但是我相信Stackblitz的轉折點是使用每個人都喜歡的 Visual Studio Code感覺和工具。
(ps: 本人使用體驗,非常快速流暢, 附上圖，比 sandbox 快很多)
線上地址: stackblitz.com/
JWT.io
如果您使用JSON Web令牌（JWT）保護應用程式安全，或者使用JWT允許使用者訪問後端的受保護資源。
決定是否應訪問路線或資源的一種方法是檢查令牌的到期時間。 有時候我們想要解碼JWT以檢視其有效 payload，jwt.io恰好提供了這一點。
這個線上工具使我們能夠插入令牌以檢視其有效 payload。 一旦我們貼上了令牌，jwt.io便對該令牌進行解碼並顯示其有效payload。
線上地址: jwt.io/
BundlePhobia
您是否曾經不確定過node_modules的大小，或者只是想知道將pakckage.json安裝在您的計算機中的大小？ BundlePhobia提供了答案
該工具使我們能夠載入package.json檔案，並顯示將從package.json安裝的依賴項的大小，也可以查詢單包的體積。
線上地址: bundlephobia.com/
Babel REPL
Babel是一個免費的開放原始碼JS轉編譯器，用於將現代ES程式碼轉換為普通的 ES5 JavaScript。
該工具是Babeljs團隊在網上建立的Web應用，可以將 ES6 +程式碼轉換為ES5。
本人總結的兩個比較方便的使用方式
- 方面面試時線上寫高階語法。
- 可以快速檢視某些 polyfill 是怎麼寫的。
線上地址: babeljs.io/en/repl
Prettier Playground
Prettier是一個自以為是的JS程式碼格式化程式。 它通過解析程式碼並使用JS最佳編碼實踐將其重新列印來實施一致的樣式。
該工具已在我們的開發環境中廣泛使用，但它也具有一個線上地址，你可以在其中美化您的程式碼。
線上地址: prettier.io/playground
postwoman
postwoman 是一款功能強大的網頁除錯和模擬傳送HTTP請求的Chrome外掛，支援幾乎所有型別的HTTP請求，操作簡單且方便。可用於介面測試，比如測試你用easy-mock生成的介面。
線上地址: postwoman.io/
結論
列表中還有更多，但是這些是我的最愛。
如果您對此有任何疑問或我應新增，更正或刪除的任何內容，請隨時發表評論。
謝謝 ！！！
關注
