大家好，我是你們的 貓哥，一個不喜歡吃魚、又不喜歡喵 的超級貓 ~

前言

貓哥是一個常年混跡在 GitHub 上的貓星人，所以發現了不少好的前端開源項目，在此分享給大家。

公眾號：前端GitHub，專注于挖掘 GitHub 上優秀的前端開源項目，收集、整理、推薦業界高品質前端資源合集，優秀的工具、庫、好的教程、了解業界更優秀的代碼、工具、業界最新的技術，抹平你的前端信息不對稱。

平時如何發現好的開源項目，可以看看這篇文章：GitHub 上能挖礦的神仙技巧 - 如何發現優秀開源項目

---

以下為【前端GitHub】的第 9 期精華內容。

這幾天簡單整理了一下自己日常經常使用的工具網站，把好用的分享給小伙伴們！

所以今天給大家帶來的是 10 個 GitHub 上超火的前端實用在線工具，終于有時間上班摸魚了，嘻嘻~

喵~ ?喵~ 喵~ 正文要開始了，上車坐穩扶好了~

1. LightHouse

LightHouse 是一個開源的自動化工具，用于改進網絡應用的質量。

可以將其作為一個 Chrome 擴展程序運行，或從命令行運行。

當為 Lighthouse 提供一個要審查的網址，它將針對此頁面運行一連串的測試，然后生成一個有關頁面性能的報告。

讓開發人員根據生成的頁面性能的報告，來進行網站優化和完善，提高用戶體驗。

可以參考失敗的測試，看看可以采取哪些措施來改進應用。

在里面你可以看到它給你各個方面的建議，比如圖片、css、js 這些文件的處理，還有 html 里面標簽的使用，緩存處理等建議，可以根據這些來對網站進行優化。

https://github.com/GoogleChrome/lighthouse

2. Can I Use

這個是一個針對前端開發人員定制的一個查詢 CSS、Js 在個中流行瀏覽器鐘的特性和兼容性的網站，可以很好的保證網頁的瀏覽器兼容性。

有了這個工具可以快速的了解到代碼在各個瀏覽器鐘的效果。

比如查詢 transform 的瀏覽器支持情況：

再比如 proxy 的瀏覽器支持情況：

https://caniuse.com/

3. Carbon

Carbon 是一個在線的代碼轉圖片工具。

相信小伙伴們見過很多人的博客上面都有類似這種代碼圖片吧?

Carbon 可以很容易的為你的代碼創建漂亮的圖片。

特性

• GitHub gist 導入. 只需要在 url 后面加上 github gist id 就可以導入

• 定制化. 可定制圖片的語法主題，窗口樣式等

• 所見即分享. 點下鼠標就可以分享到推特上面

不過有個缺點就是國內網絡訪問時，復制圖片很慢。

https://carbon.now.sh/

4. ios font

IOS 字體支持查詢和 IOS 系統自帶字體查詢。

http://iosfonts.com/

5. web 安全色查詢

web color 為了盡量讓用戶看到色彩相同的網頁，請盡量使用 216 色的 web 安全色。

https://www.bootcss.com/p/websafecolors/

6. TinyPNG

PNG/JPG 圖片在線壓縮利器，智能 PNG 和 JPEG 圖片壓縮。

TinyPNG 使用智能有損壓縮技術將您的 PNG 文件的文件大小降低。通過選擇性的減少圖片中的顏色，只需要很少的字節數就能保存數據。對視覺的影響幾乎不可見，但是在文件大小上有非常大的差別。

https://tinypng.com/

7. 二維碼生成器

草料二維碼生成器，相信很多人都用過。

常用的工具也很多：

https://cli.im/

8. Shape Divider

定制各種形狀的網站分區 SVG 的工具，調整好了自己想要的形狀之后，可以一鍵復制和下載。

https://www.shapedivider.app/

9. json 格式化

這是一個 json 在線解析的網站，是我最常使用的一個網站。

功能包括了：json 在線解析，json 格式化，json 格式驗證，json 轉 xml，xml 轉 json，json 壓縮，json 轉義，js 混淆加密，JSON 轉實體，json 在線，JSON 校驗。

http://json.cn/

10. sojson

這是一個功能多到發指的網站！

比如 前端WEB工具 就包含了以下的工具：

而且還有更多：

• JSON 在線工具：JSON 在線解析、JSON 格式化、JSON 對比、JSON 壓縮

• 加密/解密：在線加密/解密 | JS 加密 | JS 解密 | AES | DES | MD5 | Base64

• 壓縮/格式化：在線壓縮/格式化/美化 | JSON | JS | HTML | Java | SQL

• 開發文檔：開發文檔/API文檔

• 前端 WEB 工具/前端工具

• 在線轉換：在線轉換 | 單位轉換 | 數據轉換 | 格式轉換

• 二維碼：二維碼生成 | 二維碼解析 | 動態二維碼 | 二維碼美化

• 正則表達式：正則表達式 | 正則表達式測試工具 | 正則表達式教程

• 站長工具：備案查詢 | SEO 檢測 | HTTPS 檢測 | 微信防封檢測 | DNS 檢測 | Robots 生成

• HTTP工具：HTTP 模擬請求 | HTTP 測試工具 | HTTP 協議 | GET/POST

• 房貸計算工具 房貸計算器 | 最新房貸計算器 | 2020房貸利率

• 生活工具：時間 | 萬年歷 | 放假 | 老黃歷 | 測網速 | 天氣

• 修改圖片：在線修改圖片 | 圖片尺寸修改 | 圖片壓縮 | 圖片美化 | 圖片批量處理 | 圖片水印

• JS 加密 / JS 解密：JS 解密 | JS 加密 | JS 美化 | JS 格式化 | JS 混淆

https://www.sojson.com/

11. 站長工具

站長工具是站長的必備工具。

經常上站長工具可以了解 SEO 數據變化。

還可以檢測網站死鏈接、蜘蛛訪問、HTML格式檢測、網站速度測試、友情鏈接檢查、網站域名IP查詢。

SEO 相關類的有 WHOIS 查詢，DNS 查詢過期域名查詢，NsLookup 查詢，域名刪除時間備案查詢刪除域名歸檔備案批量查詢等，除此之外，還有 IP 類，百度相關，測速/監控，網頁相關，網站優化人員必備。

https://tool.chinaz.com/

最后

最近加班有點嚴重，經常都是晚上 11 點多才下班，所以文章更新慢了很多。

因為文章都是在晚上肝出來的，一篇文章要肝幾個晚上才行，肝到這里時，已經過了零晨了，唉。

同是打工貓，生活不易啊！

魯迅在《狂人日記》里曾說過：“能打敗我的，只有女人和酒精，而不是加班”

每當身處黑暗之時，這句話總能讓我看到光。

最后就以一張很治愈的圖片來治愈一下疲憊的心靈吧。

好了啦，【前端GitHub】的第 9 期內容已經講完了啦。

下方倉庫很危險，請慎入！

原文地址：https://github.com/FrontEndGitHub/FrontEndGitHub

平時如何發現好的開源項目，可以看看這篇文章：如何在 GitHub 上發現優秀開源項目 和 如何使用 GitHub 進行精準搜索的神仙技巧。

可以加超級貓的 wx：CB834301747 ，一起閑聊 前端GitHub。

覺得有用 ？喜歡就收藏，順便點個贊吧，你的支持是我最大的鼓勵！

微信搜 “前端GitHub”，回復 “電子書” 即可以獲得 160 本前端精華書籍哦。

往期精文

• 10 個 GitHub 上超火的 CSS 技巧項目，找到寫 CSS 的靈感！

• 10 個 GitHub 上超火的前端面試項目，打造自己的加薪寶庫！

• 10 個 GitHub 上超火和超好看的管理后臺模版，后臺管理項目有著落了

• 11 個超火的大廠前端代碼規范，你也能寫出詩一樣的代碼！

• 恕我直言，你可能連 GitHub 搜索都不會用 - 如何精準搜索的神仙技巧

• GitHub 上最火的、最值得前端學習的數據結構與算法項目！沒有之一

• 全球最火的 WEB 開發學習路線！沒有之一！3 天就在 GitHub 收獲了接近 1w 點贊

• GitHub 標星1.6W+，程序員不得不知的“潛規則”又火了，早知道就不會禿頭了

總結

以上是生活随笔為你收集整理的白嫖我常用的 11 个超火的前端必备在线工具，终于有时间上班摸鱼了的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。