這幾天簡(jiǎn)單整理了一下自己日常經(jīng)常使用的工具網(wǎng)站，把好用的分享給小伙伴們！

所以今天給大家?guī)淼氖?nbsp;11 個(gè) GitHub 上超火的前端實(shí)用在線工具 ，終于有時(shí)間上班摸魚了，嘻嘻~

喵~ 喵~ 喵~ 正文要開始了，上車坐穩(wěn)扶好了~

[[355675]]

1. LightHouse

LightHouse 是一個(gè)開源的自動(dòng)化工具，用于改進(jìn)網(wǎng)絡(luò)應(yīng)用的質(zhì)量。

可以將其作為一個(gè) Chrome 擴(kuò)展程序運(yùn)行，或從命令行運(yùn)行。

當(dāng)為 Lighthouse 提供一個(gè)要審查的網(wǎng)址，它將針對(duì)此頁面運(yùn)行一連串的測(cè)試，然后生成一個(gè)有關(guān)頁面性能的報(bào)告。

讓開發(fā)人員根據(jù)生成的頁面性能的報(bào)告，來進(jìn)行網(wǎng)站優(yōu)化和完善，提高用戶體驗(yàn)。

可以參考失敗的測(cè)試，看看可以采取哪些措施來改進(jìn)應(yīng)用。

在里面你可以看到它給你各個(gè)方面的建議，比如圖片、css、js 這些文件的處理，還有 html 里面標(biāo)簽的使用，緩存處理等建議，可以根據(jù)這些來對(duì)網(wǎng)站進(jìn)行優(yōu)化。

https://github.com/GoogleChro...

2. Can I Use

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

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

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

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

https://caniuse.com/

3. Carbon

Carbon 是一個(gè)在線的代碼轉(zhuǎn)圖片工具。

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

Carbon 可以很容易的為你的代碼創(chuàng)建漂亮的圖片。

特性

• GitHub gist 導(dǎo)入. 只需要在 url 后面加上 github gist id 就可以導(dǎo)入
• 定制化. 可定制圖片的語法主題，窗口樣式等
• 所見即分享. 點(diǎn)下鼠標(biāo)就可以分享到推特上面

不過有個(gè)缺點(diǎn)就是國(guó)內(nèi)網(wǎng)絡(luò)訪問時(shí)，復(fù)制圖片很慢。

https://carbon.now.sh/

4. ios font

IOS 字體支持查詢和 IOS 系統(tǒng)自帶字體查詢。

http://iosfonts.com/

5. web 安全色查詢

web color 為了盡量讓用戶看到色彩相同的網(wǎng)頁，請(qǐng)盡量使用 216 色的 web 安全色。

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

6. TinyPNG

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

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

https://tinypng.com/

7. 二維碼生成器

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

常用的工具也很多：

https://cli.im/

8. Shape Divider

定制各種形狀的網(wǎng)站分區(qū) SVG 的工具，調(diào)整好了自己想要的形狀之后，可以一鍵復(fù)制和下載。

https://www.shapedivider.app/

9. json 格式化

這是一個(gè) json 在線解析的網(wǎng)站，是我最常使用的一個(gè)網(wǎng)站。

功能包括了：json 在線解析，json 格式化，json 格式驗(yàn)證，json 轉(zhuǎn) xml，xml 轉(zhuǎn) json，json 壓縮，json 轉(zhuǎn)義，js 混淆加密，JSON 轉(zhuǎn)實(shí)體，json 在線，JSON 校驗(yàn)。

http://json.cn/

10. sojson

這是一個(gè)功能多到發(fā)指的網(wǎng)站！

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

而且還有更多：

• JSON 在線工具：JSON 在線解析、JSON 格式化、JSON 對(duì)比、JSON 壓縮
• 加密/解密：在線加密/解密 | JS 加密 | JS 解密 | AES | DES | MD5 | Base64
• 壓縮/格式化：在線壓縮/格式化/美化 | JSON | JS | HTML | Java | SQL
• 開發(fā)文檔：開發(fā)文檔/API文檔
• 前端 WEB 工具/前端工具
• 在線轉(zhuǎn)換：在線轉(zhuǎn)換 | 單位轉(zhuǎn)換 | 數(shù)據(jù)轉(zhuǎn)換 | 格式轉(zhuǎn)換
• 二維碼：二維碼生成 | 二維碼解析 | 動(dòng)態(tài)二維碼 | 二維碼美化
• 正則表達(dá)式：正則表達(dá)式 | 正則表達(dá)式測(cè)試工具 | 正則表達(dá)式教程
• 站長(zhǎng)工具：備案查詢 | SEO 檢測(cè) | HTTPS 檢測(cè) | 微信防封檢測(cè) | DNS 檢測(cè) | Robots 生成
• HTTP工具：HTTP 模擬請(qǐng)求 | HTTP 測(cè)試工具 | HTTP 協(xié)議 | GET/POST
• 房貸計(jì)算工具 房貸計(jì)算器 | 最新房貸計(jì)算器 | 2020房貸利率
• 生活工具：時(shí)間 | 萬年歷 | 放假 | 老黃歷 | 測(cè)網(wǎng)速 | 天氣
• 修改圖片：在線修改圖片 | 圖片尺寸修改 | 圖片壓縮 | 圖片美化 | 圖片批量處理 | 圖片水印
• JS 加密 / JS 解密：JS 解密 | JS 加密 | JS 美化 | JS 格式化 | JS 混淆

https://www.sojson.com/

11. 站長(zhǎng)工具

站長(zhǎng)工具是站長(zhǎng)的必備工具。

經(jīng)常上站長(zhǎng)工具可以了解 SEO 數(shù)據(jù)變化。

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

SEO 相關(guān)類的有 WHOIS 查詢，DNS 查詢過期域名查詢，NsLookup 查詢，域名刪除時(shí)間備案查詢刪除域名歸檔備案批量查詢等，除此之外，還有 IP 類，百度相關(guān)，測(cè)速/監(jiān)控，網(wǎng)頁相關(guān)，網(wǎng)站優(yōu)化人員必備。

https://tool.chinaz.com/

最后

最近加班有點(diǎn)嚴(yán)重，經(jīng)常都是晚上 11 點(diǎn)多才下班，所以文章更新慢了很多。

因?yàn)槲恼露际窃谕砩细纬鰜淼?，一篇文章要肝幾個(gè)晚上才行，肝到這里時(shí)，已經(jīng)過了零晨了，唉。