JSONProbe 使用指南

多数据源 · 探针编程 · 差异对比 · 树视图
返回主界面

快速开始

1
输入 JSON 数据

在左侧「JSON数据源」面板输入或粘贴 JSON。输入时实时校验,状态栏会显示 JSON有效 ✓ 或具体错误信息,并同步统计字符数。

2
新建探针

点击顶部「新建Probe」按钮,探针列表会插入一张进入编辑态的卡片(默认名 Probe_1,自动递增),名称输入框自动聚焦。填写名称、描述(可选)和 JavaScript 代码。

3
编写代码并保存

用 data 变量访问 JSON 数据,例如 return data.users.filter(u => u.active);。 点击卡片底部「保存」立即执行,结果显示在右侧预览面板;编辑过程中代码还会每秒自动实时求值一次。

4
查看与迭代

点击任意探针卡片可切换右侧预览的结果。修改 JSON 数据后所有探针自动重新执行,无需手动刷新。

多 JSON 数据源

支持同时维护多份 JSON 数据(例如接口返回 A 与接口返回 B),每份数据在探针里都是一个独立变量。

编辑器工具栏

按钮 功能
格式化 将 JSON 格式化为 2 空格缩进
压缩为单行 移除所有空白字符
转义处理 对内容做字符串转义(引号、换行等)
复制JSON 复制当前编辑器内容
记忆当前JSON 存入本地历史记录(自动去重,最多 100 条)
查看历史 打开历史浮层,一键还原或单条删除
清空 清空当前编辑器

快速操作

左下「快速操作」区对当前激活的数据源生效:验证JSON、美化并复制、压缩并复制、去除转义。

探针编程手册

代码中可用的变量与函数

名称 说明
data / data2 / … 各 JSON 数据源解析后的对象,变量名与标签名一致
其他探针名称 直接使用探针名作为变量,引用其最近一次执行结果(如 Probe_1)
console.log(...) 输出调试日志(自动带 [Probe: 名称] 前缀)
compare('探针名') 深度比较两个探针的结果,返回差异列表数组
diff(a, b) / a.diff(b) jdd 引擎差异对比,结果渲染为差异视图,见差异对比
Array Object JSON Math 等 标准内置对象均可用,支持 ES6+ 语法

执行规则

探针链式处理:先用 Probe_1 做清洗,再建 Probe_2 直接写 return Probe_1.map(...),即可层层加工,每个中间结果都可单独查看。

卡片操作

代码示例

数据过滤
筛选出满足条件的元素
// 返回所有活跃用户 return data.users.filter(u => u.active);
数据映射
转换结构,只保留需要的字段
// 提取 ID 和大写姓名 return data.users.map(u => ({ id: u.id, name: u.name.toUpperCase() }));
数据聚合
统计总数、计数等派生指标
// 统计活跃用户占比 const users = data.users; const active = users.filter(u => u.active).length; return { total: users.length, active };
多数据源处理
同时使用 data 与 data2 等多个数据源
// 合并两份数据中的用户列表 return [...data.users, ...data2.users];
引用其他探针
直接用探针名作为变量,或使用 compare()
// 变量形式:链式加工 return Probe_1.slice(0, 10); // 函数形式:取两个探针结果的差异列表 return compare('Probe_1');
差异对比(diff)
函数或方法两种写法,结果渲染为差异视图
// 函数形式 return diff(data, data2); // 方法形式:任何对象(含运行时生成的)都支持 return data.users[0].diff(data2.users[0]);

差异对比(diff)

探针返回 diff(a, b) 或 a.diff(b) 的结果时,右侧预览区会自动切换为差异视图(基于 jdd 差异引擎):

限制:参与比较的对象必须是可序列化的标准 JSON——值为 undefined 或包含循环引用时会报错提示。

结果预览与树视图

性能保护:超过约 200KB 的结果不做树形渲染,保持纯文本展示。

实时代码补全

探针代码编辑区内置类 VS Code 的智能补全,基于当前 JSON 数据源的真实结构:

↑ ↓ 选择候选 · Enter / Tab 接受 · Esc 关闭 · Ctrl / ⌘ + Space 手动触发。

导出与导入

典型用法:把「数据 + 探针」一起导出存档,换设备或排查问题时一键还原整套分析现场。

界面与主题

常见问题

Q: 探针提示「没有有效的JSON数据」?

A: 所有数据源都没有有效 JSON(为空或格式错误)。请先在左侧输入合法的 JSON,状态栏显示 JSON有效 ✓ 后探针才能执行。

Q: 为什么探针名称不能随便起?

A: 探针名会作为变量名注入到其他探针中(如 Probe_1),所以必须是合法的 JavaScript 变量名且不能与其他探针重名。使用中文、空格或数字开头的名称将无法被引用。

Q: 代码里没写 return 会怎样?

A: 会自动把最后一行非空代码作为返回值。例如只写 data.users.length,结果就是该表达式的值。

Q: 在探针里修改 data 报错或无效?

A: 数据源对象是只读的(Proxy 保护),防止探针污染原始数据。请返回新对象,例如 data.users.map(u => ({ ...u, tag: 'x' }))。

Q: diff 报「无法参与比较」?

A: 参与比较的值必须是可 JSON 序列化的数据。常见原因:取到了 undefined(路径写错),或对象中存在循环引用。

Q: compare() 和 diff() 有什么区别?

A: compare('探针名') 用于比较两个已执行探针的结果,返回普通差异列表数组,可继续加工;diff(a, b) 可比较任意两个对象,返回专用差异结果,预览区会渲染摘要 + 双栏详情视图。

Q: 结果没有变成树视图?

A: 超过约 200KB 的结果出于性能考虑保持纯文本;diff 结果则固定显示差异摘要视图,均属正常。

Q: 探针执行失败怎么排查?

A: 卡片上会直接显示错误信息,依次检查:

  • JSON 数据是否有效;
  • 代码语法是否正确(编辑时语法错误不会破坏上次结果,但保存时会校验);
  • 引用的探针名 / 数据源变量是否存在;
  • 数组、对象访问路径是否越界或写错。