提升前端開發者效率的11個必備的網站

本文翻譯自 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。

本人總結的兩個比較方便的使用方式

1. 方面面試時在線寫高級語法。
2. 能夠快速查看某些 polyfill 是怎麼寫的。

在線地址: babeljs.io/en/repl

Prettier Playground

Prettier是一個自覺得是的JS代碼格式化程序。 它經過解析代碼並使用JS最佳編碼實踐將其從新打印來實施一致的樣式。

該工具已在咱們的開發環境中普遍使用，但它也具備一個在線地址，你能夠在其中美化您的代碼。

在線地址: prettier.io/playground

postwoman

postman 是一款功能強大的網頁調試和模擬發送HTTP請求的Chrome插件，支持幾乎全部類型的HTTP請求，操做簡單且方便。可用於接口測試，好比測試你用easy-mock生成的接口。

在線地址: postwoman.io/

結論

列表中還有更多，可是這些是個人最愛。

若是您對此有任何疑問或我應添加，更正或刪除的任何內容，請隨時發表評論。

謝謝 ！！！

關注