白嫖 11 個超火的前端必備線上工具,終於有時間上班摸魚了

天明夜盡發表於2020-12-03

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

前言

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

公眾號:前端GitHub,專注於挖掘 GitHub 上優秀的前端開源專案,收集、整理、推薦業界高品質前端資源合集,優秀的工具、庫、好的教程、瞭解業界更優秀的程式碼、工具、業界最新的技術,抹平你的前端資訊不對稱。

平時如何發現好的開源專案,可以看看這篇文章:GitHub 上能挖礦的神仙技巧 - 如何發現優秀開源專案


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

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

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

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

1. LightHouse

LightHouse 是一個開源的自動化工具,用於改進網路應用的質量。

可以將其作為一個 Chrome 擴充套件程式執行,或從命令列執行。

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

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

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

在裡面你可以看到它給你各個方面的建議,比如圖片、css、js 這些檔案的處理,還有 html 裡面標籤的使用,快取處理等建議,可以根據這些來對網站進行優化。

github.com/GoogleChrom…

2. Can I Use

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

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

比如查詢 transform 的瀏覽器支援情況:

再比如 proxy 的瀏覽器支援情況:

caniuse.com/

3. Carbon

Carbon 是一個線上的程式碼轉圖片工具。

相信小夥伴們見過很多人的部落格上面都有類似這種程式碼圖片吧?

Carbon 可以很容易的為你的程式碼建立漂亮的圖片。

特性

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

  • 定製化. 可定製圖片的語法主題,視窗樣式等

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

不過有個缺點就是國內網路訪問時,複製圖片很慢。

carbon.now.sh/

4. ios font

IOS 字型支援查詢和 IOS 系統自帶字型查詢。

iosfonts.com/

5. web 安全色查詢

web color 為了儘量讓使用者看到色彩相同的網頁,請儘量使用 216 色的 web 安全色。

www.bootcss.com/p/websafeco…

6. TinyPNG

PNG/JPG 圖片線上壓縮利器,智慧 PNG 和 JPEG 圖片壓縮。

TinyPNG 使用智慧有失真壓縮技術將您的 PNG 檔案的檔案大小降低。 通過選擇性的減少圖片中的顏色,只需要很少的位元組數就能儲存資料。 對視覺的影響幾乎不可見,但是在檔案大小上有非常大的差別。

tinypng.com/

7. 二維碼生成器

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

常用的工具也很多:

cli.im/

8. Shape Divider

定製各種形狀的網站分割槽 SVG 的工具,調整好了自己想要的形狀之後,可以一鍵複製和下載。

www.shapedivider.app/

9. json 格式化

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

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

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 混淆

www.sojson.com/

11. 站長工具

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

經常上站長工具可以瞭解 SEO 資料變化。

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

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

tool.chinaz.com/

最後

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

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

同是打工貓,生活不易啊!

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

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

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

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

下方倉庫很危險,請慎入!

原文地址:github.com/FrontEndGit…

平時如何發現好的開源專案,可以看看這兩篇文章:如何在 GitHub 上發現優秀開源專案如何使用 GitHub 進行精準搜尋的神仙技巧

可以加超級貓的 wx:CB834301747 ,一起閒聊 前端GitHub。

覺得有用 ?喜歡就收藏,順便點個贊吧,你的支援是我最大的鼓勵!

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

往期精文

相關文章