杜劲松自建在线 JSON 查看器「有方 JSON 查看器」

贡献一个在线JSON查看器

最近我发现，用了很多年的那个 json 在线视图网站，广告越来越勤。前几次我都忍了。上周三下午，我在联调一个接口，日志平台把响应压成一行，三千多个字符，连个换行都舍不得给。我要从里面抠一段 base64 解码，眼睛先花了，还是从浏览器书签夹里翻出它。

底下顶上来一条广告，左右各弹出一块，页面被挤得只剩中间一溜。我把它们挨个点掉，广告没走，只缩小了一圈，下半截还赖在视窗里，跟办了暂住证似的。

刚选中一段字符串准备复制，底下又弹回半截，页面一跳，选区没了。第二次按 Ctrl+C，焦点还在广告 iframe 里，粘出来还是上一条日志。

我盯着屏幕愣了十几秒，同事问怎么了，我说没事，跟广告较劲呢。回家搜了一圈现成的，功能一个比一个多，恨不得给你做成一个 JSON 工作站。我只想看看报文，索性自己做一个，就一个页面。

周末两天，用原生 HTML、CSS、JavaScript 攒了三个文件，没框架，没构建。代码大部分是 AI 写的，我负责提需求、挑毛病，顺便决定哪些功能不做，基本是个监工。

我不是前端，真让我一行行敲，两天大概只能敲出个报错页面。

名字很直白：有方 JSON 查看器，地址是 https://json.waywise.imadc.cn/ 。格式化 JSON 的工具满地都是，我装个插件也能用。真让我动手的，是几个平时用着别扭的小地方。

报错别只说“语法错误”

有次我改一段接口返回，少了个逗号。几千个字符压成一行，浏览器只丢给我一句 Unexpected token，剩下的靠猜。

我从头扫了两遍，没找到，最后把后半段删了才定位到。半段报文也跟着没了。

做这个查看器时，我先把错误定位加上了。解析失败时，行号栏那一行直接变红，整行高亮，下面告诉你第几行第几列、是缺逗号还是引号没闭合。

隐藏空值

调一个接口的时候，返回 180 多个字段，一半是 null。我只关心其中两个字段，剩下的像来开会的，坐满了不说话。

满屏 null 往下滚，滚到后面都忘了自己要找什么。

我加了个「隐藏空值」。打开以后，对象里值为 null 的属性不显示，数组里的 null 保留。

false、0、空字符串也不隐藏。它们是有意义的，跟 null 不是一回事。

只动右边的树，左边你贴的原文和复制出来的东西不受影响，关掉就回来了。

行号

排查日志的时候，经常碰到一行拉得老长，显示器再宽也白搭。

我不让它出横向滚动条，超长的一行只能折着。折行之后，行号就跟文本对不上了。

有些工具索性不显示行号，或者显示的是折行后的行号，等于没给。

我把行号栏按真正的行来渲染，滚动时也只画视口里的几十个。报错那行变红，行号跟着红。

手抖

有时候我只是想给请求体加两个字段，不想开 IDE。

在 textarea 里手写 JSON，回车不缩进，括号少一半，引号中英文混着来，像用左手写的。复制到 Postman，先报个语法错。

后来我加了几个很朴素的编辑辅助。回车按当前层级缩进；输入 {、[ 或者双引号，自动补一对，光标停在中间；再输闭合符号直接跳过。

刚补出来的空对，退格一次删一双。已经写了内容的，还是按单字符删。

所有改写都走 setRangeText，Ctrl+Z 还能用。

中文引号我没做，输入法一切换就回到手动挡。

主题

我晚上看报文多，白底盯久了眼睛发酸，就顺手加了个主题按钮，算是给自己谋福利。

亮色、暗色、跟随系统，点一下循环切。配色走 GitHub 那套：亮色是 GitHub Light，暗色是 GitHub Dark。默认跟随系统，系统变暗它也跟着变；手动选过之后刷新还记得。按钮在「视图」标题栏右上角，不用翻菜单。

取舍

先说不接后端。页面纯静态，JSON 只在浏览器里解析，内网机器上丢到 nginx 就能用。

没有账号，也没有保存和分享，刷新就清空，只有主题会记住。刚贴的东西，刷新一下就当没来过。分享我想过，一加就得有服务端，算了。

树用了虚拟滚动，只渲染视口上下各 8 行，行高固定 22px。长字符串横向滚、不折行，行高也不能随内容变，这是拿样式换性能。我知道不优雅，但 1.9MB 的样本拖起来不卡，丑就丑点吧。

还有两个深度上限：树最多展开 120 层，再深就显示「层级过深，已折叠」；校验器超过 512 层直接报错。我是被一份畸形数据吓过才加的，那玩意儿一展开，浏览器直接卡死。

没用框架。我平时写 Java，前端不熟，三个文件、一个 app.js，出问题好查。状态同步全靠手写，代码不如组件化清爽，但我也没打算把它写成个大项目。

它现在做不到什么

它干不了 JSONPath 那一套，也不是 jq 的网页版。想按条件筛数组、做聚合，它只会装死；JSON5 和注释也不认，带 // 的配置贴进去，直接报错。

YAML、XML、CSV 互转没有，JSON Schema 校验也没有。它主业是看 JSON，别指望它兼职做翻译。

窄屏没适配，手机上能打开，但左右分栏挤得难受。几百 MB 的日志也别往里塞，1.9MB 的样本我试过，再大它可能当场躺平。

我用它最多的是临时看接口返回、改一段测试请求体、在内网机器上查报文。当日常编辑器不行，团队协作也不行。

地址

在线用：https://json.waywise.imadc.cn/

代码还没开源，等哪天有空了放到 GitHub 上。

用着不爽就说，别客气。能贴一段脱敏的 JSON 更好，不然我只能掐指一算了。

反正我现在查接口都开它，广告是没了，清净。