新手小白一定要知道的!11個前端開發者必備的網站

互聯網上有很多很棒的工具,讓我們作為前端開發人員的生活更加輕鬆。在這篇文章中,我將快速回顧一下我在開發工作中經常使用的11種工具。

Node.green

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

新手小白一定要知道的!11個前端開發者必備的網站

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

新手小白一定要知道的!11個前端開發者必備的網站

當你遇到以上錯誤,那大多就是Node版本問題了。

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

CanIUse

當你想要確定某個 Web API 的兼容性的時候,這個在線工具將輕鬆搞定。

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

新手小白一定要知道的!11個前端開發者必備的網站

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

在線地址: https://caniuse.com/

Minify

為了減少應用程序代碼的包大小,我們在發佈到到生產環境的時候,需要使它們最小化。最小化消除了空格,無效代碼等。這能夠使應用程序包大小的顯著減小,從而節省瀏覽器上的加載時間。(雖然在當下,有 webpack uglifyJS 等插件,但是當我在開發非打包的簡單應用的時候,這個是一個不錯的選擇。)

新手小白一定要知道的!11個前端開發者必備的網站

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

Bit.dev

Bit.dev是一個非常棒的組件中心。可以用它來託管,記錄和管理來自不同項目的可複用組件。這是增加代碼複用,加速開發並優化團隊協作的好方法。

這也是從頭開始構建設計系統的不錯選擇(因為它本質上具有設計系統所需的一切)。Bit.dev與Bit完美配合,Bit是處理組件隔離和發佈的開源工具。

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

新手小白一定要知道的!11個前端開發者必備的網站

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

Unminify

免費的在線工具,用於最小化(解壓,反混淆)JavaScript,CSS和HTML代碼,使其可讀性強,美觀

新手小白一定要知道的!11個前端開發者必備的網站

在線地址: https://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 快很多)

新手小白一定要知道的!11個前端開發者必備的網站

在線地址: https://stackblitz.com/

JWT.io

如果您使用JSON Web令牌(JWT)保護應用程序安全,或者使用JWT允許用戶訪問後端的受保護資源。

決定是否應訪問路線或資源的一種方法是檢查令牌的到期時間。有時候我們想要解碼JWT以查看其有效payload,jwt.io恰好提供了這一點。

這個在線工具使我們能夠插入令牌以查看其有效payload。一旦我們粘貼了令牌,jwt.io便對該令牌進行解碼並顯示其有效payload。

新手小白一定要知道的!11個前端開發者必備的網站

在線地址: https://jwt.io/

BundlePhobia

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

新手小白一定要知道的!11個前端開發者必備的網站

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

在線地址: https://bundlephobia.com/

Babel REPL

Babel是一個免費的開放源代碼JS轉編譯器,用於將現代ES代碼轉換為普通的 ES5 JavaScript。

該工具是Babeljs團隊在網上建立的Web應用,可以將 ES6 +代碼轉換為ES5。

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

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

新手小白一定要知道的!11個前端開發者必備的網站

在線地址:


https://babeljs.io/en/repl

Prettier Playground

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

該工具已在我們的開發環境中廣泛使用,但它也具有一個在線地址,你可以在其中美化您的代碼。

新手小白一定要知道的!11個前端開發者必備的網站

在線地址:
https://prettier.io/playground

postwoman

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

新手小白一定要知道的!11個前端開發者必備的網站

在線地址: https://postwoman.io/

多年開發老碼農福利贈送:網頁製作,網站開發,web前端開發,從最零基礎開始的的HTML+CSS+JavaScript。jQuery,Ajax,node,angular框架等到移動端小程序項目實戰【視頻+工具+電子書+系統路線圖】都有整理,需要的夥伴可以私信我,發送“前端”等3秒後就可以獲取領取地址,送給每一位對編程感興趣的小夥伴

結論

列表中還有更多,但是這些是我的最愛。

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

謝謝 !!!


分享到:


相關文章: