为什么我开发了 JSON DevView：让 JSON 数据查看不再痛苦
作为一名全栈开发者，与 API 接口打交道几乎占据了我每天工作的一半时间。无论是调试后端接口，还是在前端排查数据问题，浏览 JSON 数据都是家常便饭。
然而，浏览器默认的 JSON 显示体验实在令人抓狂。这也是我开发 JSON DevView Chrome 插件的初衷。
😫 开发者的日常痛点
相信很多同行都遇到过以下场景，这些也是促使我造轮子的主要原因：
1. “一坨” 文本，阅读困难
浏览器默认打开 JSON 接口时，通常只是一堆未经格式化的纯文本。没有缩进，没有语法高亮，所有内容挤在一起。
- 以前的做法：
Ctrl+A全选 ->Ctrl+C复制 -> 打开 VS Code 或在线格式化工具 ->Ctrl+V粘贴 -> 格式化。 - 缺点：步骤繁琐，不仅打断心流，而且在不同窗口间切换非常低效。
2. 精准复制是个技术活
当我们需要提取某个深层嵌套字段的值（比如一个 Token 或 ID）时：
- 以前的做法：小心翼翼地用鼠标选中那个字符串，生怕多选了引号或少选了字符。如果需要复制这个字段的完整路径（例如
data.users[0].profile.id）去写代码，那就更得自己手动拼写，容易出错。
3. 数据结构一头雾水
面对一个返回 100 条数据的列表接口：
- 以前的做法：肉眼很难直接看出数组里到底有多少个元素，或者对象的层级结构是怎样的。如果不把数据拷出来折叠一下，很难快速理解整体结构。
💡 解决方案：JSON DevView
为了解决上述痛点，我开发了 JSON DevView。这是一款专注于提升开发者效率的 Chrome 插件，秉持 “Privacy First” 和 “Developer Friendly” 的原则。
核心功能
- 自动检测与美化
- 插件自动检测页面 JSON 内容，立即展示为带有语法高亮（默认 Monokai 深色主题）的交互式树状视图。无需任何额外操作。
- 智能节点操作
- 一键复制：在任意节点上，一键复制 Key、Value 或完整的 JSON Path。写代码时直接粘贴路径，效率倍增。
- 类型提示：直观显示字段类型（String, Number, Boolean 等），数组直接显示元素个数（如
Array(50)），数据量一目了然。
- 沉浸式体验
- 全屏深色模式，保护视力。
- 支持展开/折叠节点和设置默认展开深度，轻松查看大型 JSON 文件。
🛠️ 技术实现
- 构建工具：Vite + @crxjs/vite-plugin，实现秒级启动和 Content Script 热重载。
- UI 框架：React 18，组件化开发，性能优化。
- 核心组件：react-json-view，定制化封装，支持深色主题。
- 标准：完全遵循 Manifest V3 标准，确保长期稳定运行。
👋 结语
JSON DevView 现已发布。如果你也厌倦了复制粘贴 JSON 的日子，欢迎尝试这个小工具。它简单、纯粹，不做多余的事情，只为了让你看 JSON 更舒服一点。
📥 下载链接
- Chrome 商店：https://chromewebstore.google.com/detail/json-devview/ffadaikfholeedcalnnpkapoogaabcof
- Edge 商店：https://microsoftedge.microsoft.com/addons/detail/json-devview/mjbaafcdcfkflneegjehlhmkokbpbjla
希望它能成为你开发工具箱里的一员！
真诚邀请您走进我的知识小宇宙，关注我个人的公众号，在这里，我将不时为您献上独家原创且极具价值的技术内容分享。每一次推送，都倾注了我对技术领域的独特见解与实战心得，旨在与您共享成长过程中的每一份收获和感悟。您的关注和支持，是我持续提供优质内容的最大动力，让我们在学习的道路上并肩同行，共同进步，一起书写精彩的成长篇章!