在線使用地址： https://rodert.github.io/jsonformat/

@

在前端或后端開發(fā)過程中，我們幾乎每天都要和 JSON 打交道。
無論是調試接口、查看返回結果，還是排查數據格式問題，一個好用的 JSON 格式化工具都能極大提升效率。

最近我在 GitHub 上發(fā)現了一個小而美的開源項目——jsonformat，它主打「簡潔、輕量、可本地運行」的 JSON 格式化體驗。
本文就來帶大家一起看看這個項目的功能、實現方式，以及它的適用場景。

?? 項目簡介

項目地址： https://github.com/Rodert/jsonformat
作者： @Rodert
許可證： Apache 2.0
主要技術棧： HTML + CSS + JavaScript + highlight.js

jsonformat 是一個純前端實現的 JSON 格式化 / 校驗 / 美化工具。
不依賴任何后端服務，也不需要安裝，下載源碼后直接雙擊 index.html 即可使用。

換句話說——它就是一個可以「離線運行的 JSON.cn」。

在這里插入圖片描述

?? 功能體驗

打開頁面后，你會看到一個簡潔的界面：左側輸入 JSON 原文，右側實時展示格式化結果。
輸入任意一段亂序或壓縮過的 JSON，比如：

{"user":{"id":1,"name":"JJ"},"status":"ok"}

工具會自動在右側輸出帶有縮進和語法高亮的結構化視圖：

{
  "user": {
    "id": 1,
    "name": "JJ"
  },
  "status": "ok"
}

功能點包括：

• ? JSON 格式化與高亮顯示
• ? JSON 校驗，錯誤提示（如缺少逗號或引號）
• ? 實時預覽，無需點擊按鈕
• ? 響應式設計，移動端可用
• ? 離線使用，無需聯網

整體體驗非常接近 JSON.cn，但頁面更加干凈，沒有廣告，也不會上傳任何數據到服務器。

?? 技術實現解析

從項目結構來看，jsonformat 完全基于原生前端技術實現：

jsonformat/
 ├── index.html
 ├── css/
 │   └── style.css
 ├── js/
 │   ├── highlight.min.js
 │   └── main.js
 └── README.md

• 格式化邏輯 在 main.js 中實現，核心使用 JSON.parse() + JSON.stringify()。
• 語法高亮 由 highlight.js 提供，增強可讀性。
• 離線設計：所有依賴都本地存放，開箱即用。

這種架構意味著——它非常適合放在私有內網或調試機中使用。
你可以把整個文件夾放到 /tools/jsonformat，在瀏覽器打開就是一個完全獨立的 JSON 可視化工具。

?? 部署方式

官方提供了 GitHub Pages 自動部署流程，也可以本地運行。

方式 1：在線使用（GitHub Pages）

# 訪問作者的 Pages 部署鏈接
https://rodert.github.io/jsonformat/

方式 2：本地部署

git clone https://github.com/Rodert/jsonformat.git
cd jsonformat
# 直接雙擊 index.html 即可

整個運行過程無需依賴 Node.js 或構建工具，非常輕量。

?? 優(yōu)點與不足

?? 適用場景推薦

• 前端開發(fā)者調試 API 返回結果
• 后端工程師查看接口日志
• 安全環(huán)境（無外網）中的 JSON 可視化工具
• 想要一個輕量、純凈、可離線的 JSON 查看器

如果你需要更復雜的功能（如 JSON Schema 校驗、大文件分塊、Diff 對比等），可以考慮與 VS Code 插件或 jq 等命令行工具配合使用。

?? 改進建議

如果后續(xù)作者有計劃繼續(xù)迭代，以下功能值得考慮：

• ?? JSON 主題切換（淺色 / 暗色）
• ?? 大文件流式解析（避免阻塞主線程）
• ?? 文件導入導出（支持 .json 文件上傳）
• ?? JSON Schema 校驗與格式提示
• ?? VS Code / Chrome 插件版本

這些增強功能可以讓 jsonformat 從一個「小工具」升級為一個真正的「開發(fā)者利器」。

?? 總結

jsonformat 是一個非常干凈、實用的 JSON 格式化工具，適合需要快速處理 JSON 的開發(fā)者使用。
它沒有復雜依賴，也不需要聯網，直接打開即用。

如果你想搭建一個屬于自己的 JSON.cn，這個項目就是一個完美的起點。

?? GitHub 項目地址：https://github.com/Rodert/jsonformat