JSON 查看器在线指南：树视图、JSONPath、搜索与大文件处理

试用我们的免费 JSON 查看器/树工具 →

什么是 JSON 查看器，为什么需要它

JSON 查看器是一种工具，它解析原始 JSON 文本并将其渲染为结构化的交互式显示（通常是可折叠的树）。虽然 JSON 设计上是人类可读的，但来自 API、数据库和配置文件的实际 JSON 通常嵌套很深、压缩成一行或跨越数千行。以纯文本方式阅读这样的数据是不切实际的。

JSON 查看器通过提供视觉层次结构（颜色编码类型、缩进和展开/折叠控件）、搜索和过滤功能以及路径显示来解决这个问题，显示到任何选定节点的精确 JSONPath。

JSON 查看器必不可少的常见场景：

• API 调试：检查 REST 或 GraphQL 响应以验证响应结构是否符合预期。
• 配置文件：导航具有数百个嵌套键的 Kubernetes、Terraform 或应用程序设置的复杂配置。
• 数据分析：探索从数据库、分析平台或第三方 API 导出的 JSON 数据集。
• 故障排除：在生产调试期间查找深藏在大型 JSON 负载中的特定字段。
• 学习和文档：通过视觉探索不熟悉的 API 的响应格式来了解其结构。

JSON 树视图 vs 文本视图 vs 表格视图

JSON 查看器通常提供多种显示模式，每种适合不同的任务。

树视图（层次结构）

树视图将 JSON 渲染为可折叠的层次结构。对象和数组成为可展开的节点，原始值是叶节点。树视图是最流行的模式，因为它保留了 JSON 的自然结构。

最适合：探索不熟悉的数据结构、导航深层嵌套对象、理解父子关系、复制 JSONPath 表达式。

文本视图（原始/格式化）

文本视图将 JSON 显示为带语法高亮的格式化纯文本。适合查看原始数据、复制整个部分或手动编辑。

最适合：快速格式化压缩的 JSON、复制原始数据、并排比较小文档、直接编辑 JSON。

表格视图（表格化）

表格视图将对象数组的 JSON 渲染为行和列，类似电子表格。当 JSON 包含同质数据时，这种视图非常强大。

最适合：分析相似对象的数组、按列值排序和过滤、导出为 CSV、跨行比较记录。

导航大型 JSON 文件：搜索、过滤和折叠

处理包含数千或数百万节点的 JSON 文件时，高效导航至关重要。

按键或值搜索

最基本的导航工具是全文搜索。输入键名或值，查看器会高亮所有匹配的节点。高级查看器支持正则搜索和过滤模式。

大型 JSON 文件的搜索技巧：

• 先搜索键名了解结构，再搜索特定值。
• 使用正则模式匹配部分值：user.*admin。
• 对于非常大的文件，过滤模式（仅显示匹配项）比高亮模式更有用。

折叠和展开控件

折叠和展开控件让你管理树的可见深度：

• 全部折叠：将整个树缩减为顶层键。
• 展开到第 N 层：将树展开到特定深度。
• 展开此分支：仅展开选定节点及其子节点。
• 切换兄弟节点：展开或折叠同一层级的所有兄弟节点。

路径显示和复制

点击树中的节点时，查看器显示该节点的完整 JSONPath。例如 $.users[1].email。此路径可一键复制，直接用于 JSONPath 库或 jq 查询。

试用我们的免费 JSON 查看器/树工具 →

JSONPath：查询 JSON 数据

JSONPath 是 JSON 的查询语言，类似于 XML 的 XPath。它使用点表示法和括号表达式从 JSON 文档中提取特定值。

最常用的 JSONPath 表达式：

另请参阅：JSON Formatter

JSONPath 在各主要语言中都有库支持：jsonpath-ng（Python）、jsonpath-plus（JavaScript）、JsonPath（Java）和 GJson（Go）。

// JSONPath usage examples with sample JSON
// Given this JSON document:
{
  "store": {
    "book": [
      { "category": "fiction", "author": "Orwell", "title": "1984", "price": 8.99 },
      { "category": "fiction", "author": "Tolkien", "title": "The Hobbit", "price": 12.99 },
      { "category": "science", "author": "Hawking", "title": "A Brief History", "price": 9.99 }
    ],
    "bicycle": {
      "color": "red",
      "price": 199.95
    }
  }
}

// JSONPath queries:
$.store.book[*].author       // ["Orwell", "Tolkien", "Hawking"]
$.store.book[0].title        // "1984"
$.store.book[?(@.price<10)]  // [{...1984}, {...Brief History}]
$..price                     // [8.99, 12.99, 9.99, 199.95]
$.store.book[-1:]            // [{...Brief History}] (last book)

浏览器 DevTools 中的 JSON 查看器

Chrome、Firefox、Edge 和 Safari 的开发者工具都内置了 JSON 查看器。这些通常是在开发过程中检查 API 调用中 JSON 的最快方式。

Chrome DevTools

在 Chrome 中，打开 DevTools（F12），转到网络标签，点击 API 请求，选择预览子标签。Chrome 将 JSON 响应渲染为可折叠树。也可在控制台中使用：

// Chrome DevTools Console - useful JSON commands

// Pretty print any JavaScript object
console.log(JSON.stringify(myObject, null, 2));

// Copy formatted JSON to clipboard
copy(JSON.stringify(myObject, null, 2));

// Store a network response as a global variable:
// 1. Network tab > right-click response > "Store as global variable"
// 2. This creates temp1, temp2, etc. in Console
// 3. Explore: temp1.data.users[0]

// Parse JSON string in console
const data = JSON.parse('{"name":"test","count":42}');

// Filter object keys
Object.keys(data).filter(k => k.startsWith('user'));

// Get all values at a path
data.items?.map(item => item.name);

Chrome 技巧：右键点击树中的节点可复制值、属性名或路径。在控制台中使用 copy() 将大对象复制到剪贴板。

Firefox DevTools

Firefox 提供专用的 JSON 查看器，当你导航到返回 application/json 的 URL 时自动激活。

Firefox 技巧：直接导航到 API 端点 URL，Firefox 会用内置查看器渲染 JSON 响应。

JSON 查看器扩展和桌面工具

虽然浏览器 DevTools 涵盖基本查看，但专用工具提供高级功能如 JSONPath 查询、模式验证、差异比较和处理超大文件。

jq -- 命令行 JSON 处理器

jq 是最广泛使用的命令行 JSON 处理工具。安装：brew install jq（macOS）、apt install jq（Ubuntu）或 choco install jq（Windows）。

常用 jq 查看 JSON 的模式：

# Pretty print JSON (most basic use)
cat response.json | jq '.'

# Extract a specific field
cat response.json | jq '.data.users[0].name'

# Get all names from an array
cat response.json | jq '.users[].name'

# Filter array elements
cat response.json | jq '.users[] | select(.role == "admin")'

# Format API response inline
curl -s https://api.example.com/users | jq '.'

# Extract and reshape data
curl -s https://api.example.com/users | jq '[.[] | {name: .name, email: .email}]'

# Count array elements
cat response.json | jq '.users | length'

# Get unique values
cat response.json | jq '[.users[].department] | unique'

# Flatten nested arrays
cat response.json | jq '[.departments[].employees[]]'

fx -- 终端交互式 JSON 查看器

fx 是终端中的交互式 JSON 查看器。不同于 jq 输出结果后退出，fx 在终端中提供完全可导航的树。安装：npm install -g fx。

# Interactive terminal JSON viewer
cat response.json | fx

# Apply JavaScript expression
cat response.json | fx '.users.map(u => u.name)'

# Pipe from curl
curl -s https://api.example.com/data | fx

# fx keybindings in interactive mode:
# Enter  - expand/collapse node
# e      - expand all
# E      - collapse all
# /      - search
# .      - show JSONPath of current node
# y      - copy current node to clipboard

gron -- 让 JSON 可 grep

gron 将 JSON 转换为离散赋值语句，每行一个，使其可用标准 Unix 工具 grep。当你知道要找的值但不知道它在结构中的位置时非常有用。

# Transform JSON to greppable format
$ echo '{"name":"Alice","roles":["admin","user"],"address":{"city":"NYC"}}' | gron
json = {};
json.address = {};
json.address.city = "NYC";
json.name = "Alice";
json.roles = [];
json.roles[0] = "admin";
json.roles[1] = "user";

# Now grep for what you need
$ cat huge-response.json | gron | grep "email"
json.users[0].email = "alice@example.com";
json.users[1].email = "bob@example.com";
json.users[2].contacts.email = "charlie@example.com";

# Reverse gron output back to JSON
$ cat huge-response.json | gron | grep "email" | gron --ungron
{
  "users": [
    { "email": "alice@example.com" },
    { "email": "bob@example.com" },
    { "contacts": { "email": "charlie@example.com" } }
  ]
}

处理 API 响应（REST 和 GraphQL）

在处理 API 响应时 JSON 查看器不可或缺。REST API 默认返回 JSON，GraphQL 响应始终是 JSON。

检查 REST API 响应

典型工作流是用 curl 或 Postman 发起请求，然后将响应导入查看器。

# Fetch and view API response
curl -s https://api.example.com/users?page=1&limit=10 | jq '.'

# Check response structure
curl -s https://api.example.com/users | jq 'keys'
# Output: ["data", "meta", "pagination"]

# Inspect pagination metadata
curl -s https://api.example.com/users | jq '.pagination'
# Output: {"page": 1, "per_page": 10, "total": 342, "total_pages": 35}

# Extract specific fields from all items
curl -s https://api.example.com/users | jq '.data[] | {id, name, email}'

# Check for error responses
curl -s https://api.example.com/invalid | jq '.error // "No error field"'

# Save formatted response to file
curl -s https://api.example.com/users | jq '.' > users-formatted.json

调试 REST API 时注意：

• 响应结构：验证嵌套对象和数组是否符合预期的 schema。
• 分页元数据：检查 next、previous、total 和 page 字段。
• 错误响应：API 错误通常包含 code、message 和 details 字段。
• null vs 缺失字段：null 值和省略的键在大多数 API 中有不同语义。

检查 GraphQL 响应

GraphQL 响应始终遵循 {"data": {...}, "errors": [...]} 结构。常见检查任务包括验证嵌套连接返回正确深度、检查 errors 数组中的部分错误、验证字段别名是否正确解析。

// Typical GraphQL response structure
{
  "data": {
    "users": {
      "edges": [
        {
          "node": {
            "id": "usr_001",
            "name": "Alice",
            "posts": {
              "totalCount": 42,
              "edges": [
                { "node": { "title": "Getting Started with GraphQL" } }
              ]
            }
          }
        }
      ],
      "pageInfo": {
        "hasNextPage": true,
        "endCursor": "YXJyYXljb25uZWN0aW9uOjE="
      }
    }
  },
  "errors": null
}

// Use jq to extract from GraphQL responses:
// All user names:
jq '.data.users.edges[].node.name'
// Post counts:
jq '.data.users.edges[].node | {name, posts: .posts.totalCount}'

试用我们的免费 JSON 查看器/树工具 →

查看时进行 JSON Schema 验证

JSON Schema 定义 JSON 文档的预期结构、类型和约束。将 JSON 查看器与 schema 验证结合，不仅可以查看数据，还可以验证其是否符合预期。

JSON Schema 指定哪些字段是必需的、类型、数字范围、字符串的正则模式以及嵌套结构。

• 缺失必需字段以警告图标或红色高亮标记。
• 类型不匹配（如预期数字却是字符串）以下划线标记。
• 模式违规（如邮箱不匹配正则）显示预期模式。
• 额外属性（schema 中未定义的）可高亮为意外属性。

// JSON Schema example for a User object
{
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "type": "object",
  "required": ["id", "name", "email"],
  "properties": {
    "id": {
      "type": "integer",
      "minimum": 1
    },
    "name": {
      "type": "string",
      "minLength": 1,
      "maxLength": 100
    },
    "email": {
      "type": "string",
      "format": "email"
    },
    "role": {
      "type": "string",
      "enum": ["admin", "user", "viewer"]
    },
    "settings": {
      "type": "object",
      "properties": {
        "theme": { "type": "string", "enum": ["light", "dark"] },
        "notifications": { "type": "boolean" }
      }
    }
  },
  "additionalProperties": false
}

// Validate with ajv (JavaScript)
import Ajv from 'ajv';
const ajv = new Ajv();
const validate = ajv.compile(schema);
const valid = validate(data);
if (!valid) console.log(validate.errors);

流行的 JSON Schema 验证库包括 ajv（JavaScript）、jsonschema（Python）和 json-schema-validator（Java）。

处理大型 JSON 文件

标准 JSON 查看器将整个文档加载到内存中，对几 MB 的文件没问题。但现代应用经常产生 50 MB、500 MB 甚至几 GB 的 JSON 文件。

流式解析器

流式解析器逐个令牌处理 JSON，内存使用保持恒定：

• Python：ijson 提供迭代器接口。
• Node.js：JSONStream 提供流式解析器。
• 命令行：jq --stream 启用流模式。

# Python: Stream large JSON with ijson
import ijson

with open('huge-dataset.json', 'rb') as f:
    # Iterate over items in the "users" array without loading all into memory
    for user in ijson.items(f, 'users.item'):
        if user.get('role') == 'admin':
            print(user['name'], user['email'])

# Node.js: Stream with JSONStream
const JSONStream = require('JSONStream');
const fs = require('fs');

fs.createReadStream('huge-dataset.json')
  .pipe(JSONStream.parse('users.*'))
  .on('data', (user) => {
    if (user.role === 'admin') {
      console.log(user.name, user.email);
    }
  });

# Command line: jq streaming mode
jq --stream 'select(.[0][-1] == "email") | .[1]' huge-dataset.json

JSON 查看器中的延迟加载

基于 Web 的 JSON 查看器可以通过仅渲染可见节点、按需获取更深层级来实现延迟加载。

在我们的在线查看器中处理超大 JSON 时：粘贴或上传文件，树最初只渲染顶层节点。展开节点时仅渲染其直接子节点。

大型 JSON 性能技巧

• 用 jq 预过滤：加载到查看器前只提取需要的部分。
• 分割大数组：用 jq -c ".[]" 每行输出一个对象（JSON Lines 格式）。
• 使用 JSON Lines (JSONL)：每行存储一个 JSON 对象，允许逐行处理。
• 100 MB 以上的文件避免使用浏览器查看器：使用命令行工具（jq、fx、gron）。

JSON 安全：敏感数据和令牌

来自 API 和日志的 JSON 数据经常包含不应共享、记录或公开暴露的敏感信息。

• API 令牌和密钥：Authorization 头、API 密钥和 Bearer 令牌经常出现在 JSON 响应中。
• 会话和刷新令牌：OAuth 令牌、JWT 和会话标识符可被用于冒充用户。
• 个人身份信息（PII）：姓名、邮箱、电话号码、IP 地址。
• 数据库连接字符串：配置 JSON 可能包含带凭据的数据库 URL。
• 内部 URL 和端点：内部 API 的 JSON 可能暴露内部服务 URL 和端口。

安全查看 JSON 的最佳实践：

• 敏感数据使用本地或离线 JSON 查看器 -- 我们的工具在浏览器中处理所有内容，不会将数据发送到任何服务器。
• 分享前编辑敏感字段：用 "[REDACTED]" 替换令牌值。
• 使用 jq 在分享前删除敏感字段：jq "del(.auth, .tokens, .secrets)" response.json。
• 不要将包含令牌的原始 API 响应提交到版本控制。将 *.json 响应转储添加到 .gitignore。

# Redact sensitive fields before sharing JSON

# Remove specific keys with jq
cat response.json | jq 'del(.auth, .token, .session_id, .api_key)'

# Replace values while keeping structure
cat response.json | jq '
  .token = "[REDACTED]" |
  .users[].email = "[REDACTED]" |
  .database.password = "[REDACTED]"
'

# Redact all string values matching a pattern
cat response.json | jq '
  walk(if type == "string" and test("Bearer |sk-|eyJ") then "[REDACTED]" else . end)
'

# Strip sensitive headers from API response logs
cat api-log.json | jq '.request.headers |= del(.Authorization, .Cookie, ."X-API-Key")'

常见问题

最好的在线 JSON 查看器是什么？

最好的在线 JSON 查看器提供交互式树视图（折叠/展开）、全文搜索、JSONPath 支持、路径复制和语法高亮。它应在浏览器中本地处理数据以确保安全，并支持大文件。我们的免费 DevToolBox JSON 查看器满足所有这些要求。

如何查看大型 JSON 文件而不导致浏览器崩溃？

50 MB 以下的文件粘贴到带延迟加载的 JSON 查看器。更大的文件使用命令行工具如 jq、fx 或 gron。用 jq 预过滤只提取需要的部分。

JSON 查看器和 JSON 格式化工具有什么区别？

JSON 格式化工具将压缩的 JSON 添加缩进和换行。JSON 查看器更进一步，将数据渲染为交互式树，支持折叠/展开、搜索、路径显示，有时还有 schema 验证。

如何使用 JSONPath 查询 JSON 数据？

JSONPath 使用点表示法和括号表达式导航 JSON 结构。根用 $ 表示，点表示法访问对象键（$.store.book），括号表示法访问数组索引（$[0]），通配符匹配所有元素（$.store.book[*].author）。

不装扩展可以在 Chrome 中查看 JSON 吗？

可以。Chrome DevTools（F12）在网络标签预览面板中以可折叠树显示 JSON 响应。也可在控制台中输入 JSON.stringify(yourObject, null, 2) 格式化任何对象。

将敏感 JSON 粘贴到在线查看器安全吗？

取决于工具。我们的 DevToolBox JSON 查看器在浏览器中使用 JavaScript 本地处理所有内容，不会将数据传输到任何服务器。对于包含 API 令牌或 PII 的敏感数据，始终使用本地或仅客户端的查看器。

jq 是什么？与在线 JSON 查看器相比如何？

jq 是命令行 JSON 处理器，擅长脚本编写、自动化和处理超大文件。在线 JSON 查看器提供可视化的交互体验。自动化和大文件用 jq，快速可视化探索用在线查看器。

如何将 JSON 树视图转换为扁平结构？

使用 gron（输出 path=value 赋值语句）、jq 的 path 表达式或 JavaScript 库 flat。扁平化对搜索、比较和导入电子表格格式很有用。

好的 JSON 查看器将处理 JSON 数据的体验从令人沮丧的文本滚动转变为直观的可视化探索。无论你使用我们的在线工具快速调试、Chrome DevTools 进行 API 开发，还是 jq 进行命令行自动化，掌握 JSON 查看工具将每天为你节省大量时间。

使用我们的免费在线工具即时查看、探索和导航 JSON 数据。 →