上兩篇文章《19年你應該關注這50款前端熱門工具（上）》、《19年你應該關注這50款前端熱門工具（中）》文章小編介紹了構建、框架和庫、CSS和HTML、JavaScript相關的工具，這篇文章小編將介紹剩餘21款工具，希望在新的一年裡對大家有所幫助。
圖示、圖表工具
30、Orion Icon Library
多達6000專業免費的SVG向量圖示，還支援深度的定製，比如更換配色，更改線條粗細，變換圖示風格(細線條、粗線條、扁平)，一鍵生成相關程式碼。
31、Frappe Charts
一款簡單、專業、開源、現代風格的SVG報表工具,不需要任何依賴庫，程式碼風格簡單，簡單易用。支援一鍵匯出svg程式碼。
32、SVGator
如果您希望將Web圖形提升到一個新的水平，那麼動畫SVG就是您的選擇，而SVGator是您可以用來建立它們的最簡單的工具之一。一款專業級的SVG動畫制線上製作工具。SVGator還具有程式碼管理器皮膚，因此您可以準確地看到應用程式生成的程式碼。SVGator匯出乾淨，格式良好的程式碼。
33、ApexCharts
ApexCharts.JS 是一個現代化 JavaScript 圖表庫，用於使用簡單的 API 構建互動式圖表和視覺化，功能十分強大。方便你將圖表嵌入到你的Vue、React專案中。
34、MapKit JS
developer.apple.com/maps/mapkit…
一款蘋果公司提供的地圖工具，如果想製作和蘋果官方網站一樣的地圖風格，這個工具將是一個不錯的選擇，允許你在地圖上新增互動事件，豐富你的地圖應用。
35、Img2
一款圖片自動預載入和快取工具，防止圖片閃爍，並使用模糊濾鏡預先顯示圖片延遲圖片載入，提高網頁載入速度，使用起來非常簡單，你只需要使用<img-2>替代<img/>標籤即可，使用起來就是這麼簡單！
36、Lozad
Lozad.js 是基於 IntersectionObserver API 的輕量級、高效能、可配置的純 JavaScript並且無依賴的懶載入器，其能夠被用於進行圖片、iframe 等多種形式的元素。通過gzip壓縮過後，僅僅1kb大小，相對於常用的jquery.lazyload.js來說，lozad.js實力碾壓，雖然jquery.lazyload.js也才幾kb大小。在github上，已經收穫了4800+的star。
React工具
37、RSUITE
React Suite 是一套 React 元件庫，為後臺產品而生。由 HYPERS 前端團隊與 UX 團隊打造，主要服務於公司大資料產品線。經歷了三次大的版本更新後，累積了大量的元件和豐富的功能。並支援線上定製個性化主題，更重要的是有中文版，方便我們學習使用。
38、Pagedraw
一款神奇的線上UI設計製作工具，你只需要拖動和佈局頁面，這個工具就會給你自動生成質量高的React元件程式碼，更多功能等待你的發掘。
39、react-smooth-dnd
一款拖拽頁面元素的React工具，拖拽效果平滑，讓你輕鬆就能實現卡片、列表、表單元件的的拖拽。
40、Unstated
一個新的狀態管理類庫 unstated.js：簡單易用/合理。和之前的 state 管理庫思路完全不同，這個unstated主打 local state（不是全域性store，一個小改動導致整棵樹 rerender），多個 local state 之間也可以共享， 兼具了redux的易用性與flux的合理性，令人耳目一新；unstated完全就是為React設計的，“足夠React”，讓你感覺不到在用第三方元件。
41、Reach Router
Reach-Router 是前 ReactRouter 成員 Ryan Florence 開發的一套基於 react 的路由控制元件. 那麼已經有比較成熟的 ReactRouter 了, 為什麼要”再”做一套 Router 呢, 有興趣的同學可以去了解一下,小編認為主要有以下幾個特點值得你看看：
- 小，就4kb,壓縮後比react-router小40kb左右。
- 更少的配置
- 更好用
- 基本一樣的api,學習成本非常低
- 原始碼非常簡潔，總共就3個檔案，900行，如果你想深入理解單頁應用的路由是怎麼實現的，reach-router,絕對是絕佳的下手資料
42、SVGR
www.smooth-code.com/open-source…
svgr是一個將SVG轉換為React元件的工具，svgr由JavaScript實現。整個文件也非常的小，已開源在github上。
43、React Spreadsheet Grid
用於React類似於Excel的網格元件，具有自定義單元格編輯器，高效能滾動和可調整大小的列。
測試和資料工具
44、webhint
Webhint專案提供了一種用於檢查程式碼的可訪問性、效能和安全的開源檢查（Linting）工具。在建立Web站點和應用中，有越來越多的細節問題亟待完善。為此，Webhint力圖幫助開發人員標記這些細節。
Webhint以命令列介面（CLI）工具和線上掃描器兩種形式提供，使用線上掃描器是最快的上手方式。使用線上掃描器需要為其提供一個公開的URL，用於執行報告並洞悉應用的執行情況。
在測試應用時，Webhint提供三種執行環境：jsdom、Chrome和Edge。後兩種執行環境使用了Chrome DevTools協議，第一種執行環境使用Node.js環境快速地執行有限次數的檢查，無需瀏覽器的支援。
還有更多強大的功能，還有待你試用挖掘。
45、Airtap
Airtap 是一種在瀏覽器中測試 JavaScript 的簡單方法，號稱能覆蓋800多種瀏覽器，能夠在數秒內開始在本地測試你的程式碼，並無縫轉移到由 Sauce Labs 提供的基於雲的瀏覽器上，以獲得更好的覆蓋測試。
Airtap 與其他跨瀏覽器測試執行器的不同之處在於其簡單性，以及能夠在許多瀏覽器中輕鬆執行測試套件而無需在本地安裝它們。它可以讓你在開發過程中快速迭代，並在釋出前提供良好的瀏覽器覆蓋率，而不用擔心缺少瀏覽器支援。
不要只是聲稱你的 JavaScript 支援“所有瀏覽器”，用測試證明它！
46、mkcert
HTTPS 是 Web 發展的趨勢，用於提高網站的安全性。使用 HTTPS 需要配置 TLS 證照，得益於 ACME 協議和 Let's Encrypt 證照，遠端環境可以很容易部署。但是對於本地環境，還沒有普遍有效的證照。
mkcert 被設計的足夠簡單，隱藏了幾乎所有生成 TLS 證照所必須的知識。它適用於任何主機名或者 IP，包括 localhost ，因為它只在你的本地環境使用。
證照是由你的私有 CA 簽發，當你執行 mkcert-install 會自動配置這些信任，因此，當瀏覽器訪問時，就會顯示安全標識。目前支援 MacOS、Linux 和 Windows，以及 Firefox、Chrome 和 Java。甚至支援一些手機裝置。
47、Puppeteer Recorder
Puppeteer 是一個Node庫，它提供了一個高階API來控制DevTools協議上的Chrome或Chromium，常用於爬蟲、自動化測試等，你在瀏覽器手動完成的大多數事情都可以使用它來完成。
48、jsonstore.io
jsonstore.io為小型專案提供免費，安全且基於JSON的雲資料儲存。只需輸入https://www.jsonstore.io/，複製URL就可以開始傳送HTTP資料請求。POST請求將儲存資料，PUT請求修改資料，DELETE請求刪除資料和GET請求檢索資料。大大方便了前端開發人員進行測試介面的整合，前端頁面製作完成就能進行介面測試，使用起來就是這麼簡單。
49、Initab
一款為開發人員定製打造的工作臺，通過谷歌瀏覽器外掛安裝即可使用，通過此工作臺你可以輕鬆訂閱你感興趣的git專案、跟進相關問題、pull相關操作，檢視版本歷史，訂閱Stack Overflow相關的內容，管理檢視Gists相關內容，可以說一個主流技術平臺聚合工作臺。
50、lambdatest
一款線上自動化測試雲端平臺，號稱在2000多個真實瀏覽器和裝置進行測試，可以根據你的測試需求進行深度定製，並形成相關記錄，方便團隊的協作，幫你發現跨平臺不同瀏覽器版本的各種問題。
小節
終於把50款工具整理完了，在新的一年裡，希望這些工具對大家有所幫助和啟發，再次感謝大家對我文章的關注，讓我新的一年收穫滿滿，感謝掘金小編的推薦，祝各位在新的一年裡前端技術棒棒的，薪資翻翻，一起在國內推動大前端的未來！
更多精彩內容，請微信關注”前端達人”公眾號！
