🧪 JSON Hover 全面测试页

加载此页面测试扩展的所有功能。确保扩展已启用，悬停 👁 或点击图标触发。

📄 1. 基础 JSON 类型 静态文本悬停

简单对象 悬停查看树形预览
{"name":"张三","age":30,"active":true,"score":95.5}
嵌套对象 默认折叠深度 2 层
{"user":{"profile":{"name":"李四","contact":{"email":"li@example.com","phone":"13800138000"}},"roles":["admin","editor"],"meta":{"created":"2024-06-01","lastLogin":"2024-12-01T10:30:00Z"}}}
数组 数组格式预览
[{"id":1,"name":"Alice"},{"id":2,"name":"Bob"},{"id":3,"name":"Charlie"},{"id":4,"name":"Diana"}]
混合类型 布尔值蓝色 / null 灰色斜体 / 数字橙色
{"string":"text","number":42,"float":3.14,"bool_true":true,"bool_false":false,"null_val":null,"negative":-10,"large":999999999}
空对象/数组 边界情况
{} [] {"empty":{},"items":[]}
深层嵌套 大量嵌套层级
{"a":{"b":{"c":{"d":{"e":{"f":{"g":{"h":{"i":{"j":"deep"}}}}}}}}}}

❌ 2. 不应触发预览的文本 负向测试

文本原因预期
{invalid} 不是合法 JSON 不触发
{"a"} 不完整 JSON 不触发
{} 长度 < 10 不触发
hello world 纯文本 不触发
<div>html</div> HTML 标签 不触发
{"ignored":true} data-json-hover-ignore 属性 不触发

✏️ 3. 输入框测试 聚焦后出现 👁

单行输入框 点击 👁 打开编辑器，应用时压缩为一行
简单输入框 基础 JSON
多行文本域 (textarea) 应用时保留格式
空值/无效值 不应触发

🔢 4. 大 JSON 测试 超过 500KB 走 Worker

动态生成大 JSON 点击按钮后悬停查看
600KB 的 JSON 会触发大文件提示，确认后在 Web Worker 中解析
预置大 JSON 输入框 内容较大时会有提示

🔄 5. 动态内容 (SPA 模拟) MutationObserver 测试

动态添加 点击按钮添加新的 JSON 元素

📋 6. 表格场景 常见于后台系统

ID 名称 配置 状态
1 服务A {"host":"10.0.1.1","port":8080,"timeout":30,"retry":3,"health":{"path":"/health","interval":10}} 正常
2 服务B {"host":"10.0.1.2","port":9090,"ssl":true,"cors":{"origins":["*"],"methods":["GET","POST"]}} 告警
3 服务C {"host":"10.0.1.3","port":3306,"database":{"name":"prod","pool":20,"backup":{"enabled":true,"cron":"0 0 * * *"}}} 正常

📦 7. 代码块场景 pre / code 标签

JSON 在 pre 标签中 整块代码
{
  "swagger": "2.0",
  "info": {
    "title": "API Documentation",
    "version": "1.0.0",
    "description": "RESTful API for user management"
  },
  "paths": {
    "/users": {
      "get": {
        "summary": "获取用户列表",
        "parameters": [
          { "name": "page", "in": "query", "type": "integer" },
          { "name": "size", "in": "query", "type": "integer" }
        ]
      }
    }
  }
}
JSON 在 code 标签中 行内代码
{"method":"POST","endpoint":"/api/v1/users","headers":{"Content-Type":"application/json"}}

🎯 8. 编辑器功能测试 完整工作流

测试流程 按步骤操作验证
  1. 聚焦下方输入框 → 右上角出现 👁 图标
  2. 点击 👁 → 弹出编辑器，展示格式化后的 JSON
  3. 点击 校验 → 状态栏显示 "✅ 有效 JSON"
  4. 点击 压缩 → 编辑区变成一行（不用手动操作）
  5. 点击 美化 → 恢复为格式化多行
  6. 修改一个值，再次点击 校验 → 验证修改后的 JSON
  7. 点击 应用 → 回填到输入框并关闭编辑器（输入框内容变为一行）
  8. 再次点击 👁 → 编辑器读取压缩后的 JSON 并自动格式化展示
  9. 点击 复制 → 复制当前内容到剪贴板
  10. 点击 📌 固定 → 编辑器保持打开；按 ESC → 不关闭
  11. 再次点击 📌 取消固定 → 按 ESC → 关闭