那些前端開發必不可少的生產力工具

引言

一些開源的生產力工具能極大的提高咱們的開發效率（我一直是這麼認爲的 🤠）。

今天推薦一些我一直在用的、比較香的工具給你們。其中包括一些文檔、可視化工具、分析工具、代碼片斷、調試工具等。

Collect UI 🦑

Collect UI畫廊是一個免費的在線資源，用於每日UI設計靈感。 目前，它有 6500 多個條目，而且持續保持更新最新內容。

在邊欄中，有作分類。包括 404 頁面、登錄/登出、購物車、日曆、視頻播放器等。若是你想在某方便需求靈感，而後用於你的公司項目或者我的項目，我想是會有很大的幫助的。

Taskade 📝

在平時生活中總會有不少的事要作，好比工做時有不少待辦事項，可是很容易就會忘記一些事情，這時咱們就須要一款具備帶有待辦事項的chrome插件--taskade。

Taskade簡單，整潔而且設計精美，有着使人放鬆的主題和背景。使用Taskade來整理您的思路，這樣您能夠集中精力作事情。

Colordot 🌈

有時候咱們想尋求一個本身喜歡的顏色（有點像起一個本身滿意的暱稱），卻沒有靈感，這時候咱們就能夠來這裏

網頁區域內隨意滑動鼠標，能夠產生不一樣的色彩。肯定一個色彩，再隨意滑動產生下一個色彩，直到找到本身滿意的配色。

FontSpark 🎯

FontSpark是一個幫助有字體選擇困難症的用戶打造的選擇字體的網站，用戶只須要輸入所須要展現的文字便可得到網站推薦的字體，包括字體類型和大小。

對於推薦的字體不是很滿意的話，點擊Generate按鈕刷新便可。

The Noun Project 🎃

The Noun Project 網站專門提供高品質、可辨識性強的icon，這些icon沒有很炫酷的設計，一般只用單色來呈現，使用者卻能很容易地辨別出它要傳達的意思。

目前 NounProject 提供超過 200 萬的icon供使用者免費下載，且持續在更新中，若是你須要某種icon，卻一直沒有找到合適的，不妨到這個網站來走走。

csseffects 🚀

CSSeffectsSnippets收錄了大約 20 多種CSS動畫，不管是加載讀取中，或是將光標移動過去產生的動畫，都能在網站上即時預覽。

而這還不是它最大的亮點，最值得推薦的是全部效果都能在點擊後快速複製相關代碼，直接讓開發者運用到本身的網站或博客，固然可能仍是須要通過微調，不過不用從頭開始，也不需在網路上尋找這些動畫代碼，很是方便並且省時。

unDraw 🍉

unDraw 是由希臘設計師 Katerina Limpitsouni 開發的一套開源矢量插圖庫，在這個網站上有超過 1000 個扁平矢量插畫供你下載使用。

若是你在作我的網站，但對於插畫沒有靈感，或許你能夠來看看。

DevDocs 🐨

這個網頁應用匯聚了各類項目的文檔，還支持離線使用。

不論是新手程序員仍是老程序員都須要有一個能夠在線查詢各類編程手冊的文檔，而DevDocs聚集了最全的編程開發文檔，又擁有極佳的閱讀模式，讓你能夠快速的查詢想要的命令，同時還支持瀏覽器擴展，可謂方便之極。

CSS Tricks 🦊

CSS Tricks是一個國外的優秀前端開發博客，主要分享使用CSS樣式的技巧、經驗和教程等。

該網站不斷的在更新一些優秀的教程和技巧，爲前端社區作出了具大的貢獻。我也一直在這上面學習，讓我在CSS方面視野拓寬了不少。

cssreference 🎾

若是須要更新 CSS 知識或者查詢不熟悉、不經常使用的屬性，能夠訪問這個站點。上面對每一個 CSS 屬性的講解很深刻，給出的示例也很清楚，便於你理解這些屬性並應用於本身的項目。

Can I Use ☄

前端開發的時候時常須要檢查瀏覽器的兼容性，在這裏推薦(Can I Use)這個是一個針對前端開發人員定製的一個查詢CSS、Js在各類流行瀏覽器中的特性和兼容性的網站，能夠很好的保證網頁的瀏覽器兼容性。有了這個工具能夠快速的瞭解到代碼在各個瀏覽器中的效果。

Lighthouse 🌊

Lighthouse是一個Google開源的自動化工具，主要用於改進網絡應用（移動端）的質量。目前測試項包括頁面性能、PWA、可訪問性（無障礙）、最佳實踐、SEO。

Lighthouse會對各個測試項的結果打分，並給出優化建議，這些打分標準和優化建議能夠視爲Google的網頁最佳實踐。

Majestic ✅

Majestic是一款好用的Jest運行測試GUI工具。

利用可視化的方式，使用它可讓咱們查看測試用例輸出日誌更加簡單。

Wappalyzer 🔭

Wappalyzer是一款可以分析目標網站所採用的平臺架構、網站環境、服務器配置環境、javascript框架、編程語言等參數的chrome網站技術分析插件。

iHateRegex 🌡

對於開發人員來講，正則表達式是會被常常用到的，不少類型複雜的字符串均可以用它匹配出來，但惟一但缺點是編寫起來很困難，不只須要熟練掌握規則，還須要花時間編寫、調試。

iHateRegex就是這樣一個幫你解決書寫正則表達式煩惱的神器。

iHateRegex是一個在線開源工具，可快速檢索並匹配到合適的正則表達式，幫你完成如用戶名、郵箱、日期、手機號碼、密碼等常見規則的驗證。

固然你也能夠看到它內部的匹配過程，這有助於加深你的理解。

參考

https://dev.to/joserfelix/40-...