前言

有時候在撰寫程式時，會需要一些小工具，例如 Base64 編碼&解碼、時間戳轉換、文字跳脫轉換…。
雖然網路上有許多類似的網站，但公司內部有資安問題，不便使用。而且為了這些小需求，每次都要寫個小程式也麻煩。

剛好最近我一直在使用 Google Antigravity 做一些小東西玩玩，想說這種簡單的需求，應該也可以透過 AI 完成。
於是就誕生出這個純前端小網站~ (有開源程式碼，需要的各位也可以 copy 回去)

[小廣告] 我製作了一款可愛的「企鵝魔法師」貼圖~
歡迎下載：LINE 貼圖、Telegram 貼圖 (免費)

網站介紹

馬上前往試玩~

網站截圖

工具清單

目前此網站有以下類別與工具，主要是加入我有機會用到的工具：

🔄 轉換

• 時間戳轉換 — Unix 時間戳與日期格式互轉
• 顏色轉換 — HEX、RGB、HSL 顏色格式相互轉換
• 大小寫轉換 — 變數命名風格轉換 (camelCase、snake_case 等)
• JSON ↔ YAML — JSON 與 YAML 格式互轉
• Cron 表達式 — Cron 排程表達式解析與下次執行時間計算
• 轉 Docker Compose — 將 docker run 指令轉為 docker-compose.yml

🔐 編碼 / 解碼

• Base64 編碼/解碼 — Base64 編碼與解碼
• URL 編碼/解碼 — URL 編碼與解碼
• HTML 編碼/解碼 — HTML 特殊字元編碼與解碼
• JWT 解碼 — 解析 JWT Token 的 Header 與 Payload
• Unicode 編碼/解碼 — 文字與 Unicode (\uXXXX) 互轉
• GUID/UUID 生成 — 批次生成隨機 GUID/UUID
• 密碼生成 — 產生高強度的隨機密碼
• Hash & Checksum — 計算 MD5、SHA-256 等雜湊值

📝 格式化

• JSON 格式化 — JSON 資料美化、驗證與壓縮
• SQL 格式化 — 美化與壓縮 SQL 查詢語句
• HTML 格式化 — HTML 程式碼美化與排版
• JavaScript 格式化 — JavaScript 程式碼美化
• CSS 格式化 — CSS 樣式表美化與壓縮
• YAML 格式化 — YAML 語法檢查與格式化

🌐 網路連線

• URL 解析 — 解析 URL 的各個組成部分 (Protocol、Host、Path、Params…)
• HTTP 狀態碼 — HTTP Status Codes 查詢與說明
• cURL 分析 — 解析 cURL 指令並顯示詳細資訊

✏️ 文字處理

• 正規表示式 — Regex 語法測試與驗證
• 文字跳脫 — 文字轉義 (Escape) 與還原 (Unescape)
• 文字計數 — 統計字元、字數、行數、句子與段落數
• Markdown 預覽 — 即時 Markdown 語法預覽與渲染
• 假文生成 — 產生 Lorem Ipsum 假文，用於 UI 排版測試

🖼️ 圖片處理

• 圖片壓縮 — 圖片壓縮 (JPEG/PNG/WebP)
• 色輪配色 — 提供補色、相似色等多種調色盤方案
• 色票 — 常用色票 (Tailwind、Material、中國傳統色)
• 圖片 ↔ Base64 — 圖片與 Base64 編碼互轉
• QR Code 生成 — 自訂顏色與容錯率的 QR Code 產生器

網站原始碼

如果想要自己布署，以下我也提供 GitHub 開源程式碼，想要自己修改、加新工具也可：
https://github.com/Jia35/DevTools

* 別忘了順手給顆 Star 星星~😆

結語

現在有了生成式 AI，想要自己開發什麼小工具真的越來越方便了~
例如這陣子就做了 網站、Electron exe、瀏覽器擴充套件、手機 APP…等等相關應用工具 👍

對生成式 AI 感興趣的讀者，記得追蹤 FB 粉專『 IT空間 』，以免錯過最新的發文通知呦~🔔

參考：
DevTools — 開發者工具箱

有時候，我們真的只需要 20 秒的瘋狂勇氣，哪怕就算會出糗，事情的結果也一定會有所改變的。

—— 《我們買了動物園》