JSON格式化工具更新:新增JSON数组长度悬停提示功能,提升查看效率

|

这次更新的灵感,其实是被自己“坑”出来的。

我在调试一个接口的时候,粘贴了一大段 JSON 进去格式化,本来只是想确认某个数组里有多少个元素。要是数组只有十几个元素,我还能硬着头皮数一数,结果这次数组实在太长了,数到一半眼睛就开始发花,最后索性放弃。

于是心里冒出一个念头:工具能不能直接告诉我数组有多长?

功能更新:悬停即显

所以今天就给工具加了个小功能:只要把鼠标移动到 JSON 数组的 key 上,就会自动展示这个数组的长度。

比如你有个 users 数组,鼠标停在 "users" 上方,小浮框就会弹出来告诉你“数组长度:327”。这样一来,不需要翻来覆去拉进度条,更不用再手动敲 json.users.length 去验证。

这个功能看起来很小,但在实际使用中特别省事。对于日志、报表、配置文件这类动辄几百上千项的 JSON,省下的不仅是数数的时间,更是避免了频繁切换上下文的麻烦。

为什么这样设计?

有人可能会问:既然可以统计,为什么不在解析 JSON 的时候,就把所有数组的长度一次性算出来,直接标注在界面里?

我也想过,但最终还是决定用“悬停触发”的方式。原因有两个:

  1. 性能考虑
    大多数数组其实用户并不关心。如果每次都自动统计,遇到超大数组就可能拖慢编辑器的性能。想象一下,你只是想看一眼 JSON 结构,却因为后台默默数了一万多条元素,结果界面卡住了,这体验就很糟糕。
  2. 交互权衡
    并不是每个地方都需要显示“长度”这个信息。过多的提示会干扰视线,反而显得嘈杂。现在的做法是:当你真的想确认数组大小时,把鼠标移上去,工具再帮你算一次,并即时展示。这样既不浪费性能,也不打扰正常编辑。

简单说,就是“该出现的时候出现,该省略的时候省略”。

欢迎大家前往体验:

JSON工具
JSON工具
json.itzhai.com

小插曲

在开发的过程中,还遇到一个小问题:浮框的样式在浅色和暗色主题下有冲突。最初设计的背景是浅灰色,结果在暗黑模式下几乎看不清楚。最后干脆改成了半透明背景加描边,让浮框既不突兀,也能保持可读性。

另外,为了避免频繁计算,我给统计结果加了缓存。只要 JSON 没有变化,再次悬停就是瞬间返回。这样即便是大文件,也能保持流畅。

真实场景的好处

  • 日志分析:几千条日志记录装进一个数组,一眼就能知道数量。
  • 配置校验:想确认资源列表里有多少节点,悬停即可。
  • 调接口:很多 API 返回列表,过去要写 data.length 验证,现在直接工具帮忙。

这些场景下,省下的不只是时间,更是避免了“数到一半放弃”的无力感。

收尾

这次更新没什么宏大的功能,就是一个小细节。但正是这些小细节,让工具用起来更顺手。

以后遇到大数组,不用再一个个数了,把鼠标移到 key 上,工具会替你报数。小功能,大解脱。