上兩篇介紹了構建、框架和庫、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多個真實瀏覽器和設備進行測試，可以根據你的測試需求進行深度定製，並形成相關記錄，方便團隊的協作，幫你發現跨平臺不同瀏覽器版本的各種問題。
最後
希望這些工具對大家有所幫助和啓發，祝各位在新的一年裏前端技術棒棒的，薪資翻翻，一起在國內推動大前端的未來！