浏览器中如何格式化 JSON？5 种最简单方法（2026 教程）

🌐 浏览器格式化 JSON 的 5 种方法#

在浏览器中查看 API 响应或 JSON 文件时，经常遇到压缩成单行的情况。本文介绍5 种无需安装软件的浏览器格式化方法，让你快速获得可读性强的 JSON 数据。

graph LR A[浏览器格式化 JSON] --> B[开发者工具] A --> C[浏览器扩展] A --> D[在线工具] A --> E[书签脚本] A --> F[地址栏技巧]

方法一：开发者工具（推荐⭐⭐⭐⭐⭐）#

Chrome / Edge#

步骤详解：

graph TD A[打开 JSON 链接] --> B[按 F12 打开 DevTools] B --> C[切换到 Console 标签] C --> D[粘贴 JSON 变量] D --> E[查看格式化结果]

实操演示：

打开 JSON 链接
```
1
https://api.example.com/data.json
```
按 F12 打开开发者工具

在 Console 中输入：

1
// 方法 1：直接查看
2
JSON.parse(document.body.innerText)
3

4
// 方法 2：美化输出
5
console.dir(JSON.parse(document.body.innerText))
6

7
// 方法 3：格式化字符串
8
JSON.stringify(JSON.parse(document.body.innerText), null, 2)

复制格式化结果：
- 右键点击输出结果
- 选择 “Store as global variable”
- 在 Console 输入 copy(JSON.stringify(temp1, null, 2))

Firefox#

内置 JSON 查看器：

Firefox 自带优秀的 JSON 查看器！

1
1. 直接访问 JSON 链接
2
2. 自动显示树形视图
3
3. 可折叠/展开节点
4
4. 支持搜索和过滤

功能亮点：

✅ 语法高亮
✅ 节点折叠
✅ 值复制
✅ 路径显示

Safari#

启用开发者菜单：

1
1. Safari → 偏好设置 → 高级
2
2. 勾选 "显示开发菜单"
3
3. 按 Option+Cmd+C 打开控制台

格式化方法：

1
// 与 Chrome 类似
2
JSON.stringify(JSON.parse(document.body.innerText), null, 2)

方法二：浏览器扩展（推荐⭐⭐⭐⭐）#

Chrome/Edge 扩展推荐#

1. JSON Viewer Pro ⭐⭐⭐⭐⭐

安装步骤：

1
1. 访问 Chrome 网上应用店
2
2. 搜索 "JSON Viewer Pro"
3
3. 点击 "添加至 Chrome"
4
4. 自动启用

功能特色：

1
{
2
  "features": [
3
    "自动格式化 JSON 响应",
4
    "语法高亮显示",
5
    "树形视图浏览",
6
    "一键复制/下载",
7
    "自定义主题",
8
    "支持大文件"
9
  ]
10
}

使用效果：

1
访问前：{"name":"John","age":30}
2
访问后：
3
{
4
  "name": "John",
5
  "age": 30
6
}

安装链接：https://chrome.google.com/webstore

2. JSON Formatter ⭐⭐⭐⭐⭐

独特优势：

🎨 可折叠对象
🔍 搜索过滤
📊 图表可视化
🔗 原始/格式化切换

快捷键：

1
Ctrl+U - 切换视图
2
Ctrl+F - 搜索
3
Ctrl+C - 复制

3. JSON Vue ⭐⭐⭐⭐

轻量级选择：

⚡ 快速加载
🎯 专注核心功能
📦 仅 50KB

Firefox 扩展#

JSON Viewer：

1
Firefox 扩展 ID: json-viewer@mozilla.org
2
功能：内置查看器增强版

方法三：在线工具（推荐⭐⭐⭐⭐⭐）#

快速操作步骤#

graph LR A[复制 JSON] --> B[打开星点工具站] B --> C[粘贴到输入框] C --> D[点击格式化] D --> E[复制结果]

🌟 推荐工具#

星点工具站 - JSON 格式化工具

网址：https://www.xingdian.net/app/json/format/

使用步骤：

1
1. 访问星点工具站 JSON 格式化工具
2
2. 粘贴 JSON 数据到输入框
3
3. 点击 "格式化" 按钮
4
4. 立即显示格式化结果
5
5. 点击 "复制" 按钮复制结果

核心优势：

✅ 完全免费 - 无需注册，无限使用
✅ 本地处理 - 数据不上传服务器，安全可靠
✅ 秒级响应 - 毫秒级格式化速度
✅ 支持大文件 - 可处理 100MB+ JSON 文件
✅ 功能全面 - 格式化、压缩、校验、树形视图
✅ 中文界面 - 操作简单，上手即用

SEO 优化提示：

星点工具站提供专业的 JSON 在线格式化服务
支持 JSON 美化、压缩、校验等多种功能
是开发者和数据分析师的首选工具

方法四：书签脚本（推荐⭐⭐⭐）#

创建书签工具#

步骤：

新建书签
```
1
右键书签栏 → 添加页面
```

填写信息

1
名称：格式化 JSON
2
网址：[见下方代码]

书签脚本代码：

1
javascript:(function(){
2
    var body = document.body.innerText;
3
    try {
4
        var json = JSON.parse(body);
5
        var formatted = JSON.stringify(json, null, 2);
6
        var pre = document.createElement('pre');
7
        pre.textContent = formatted;
8
        pre.style.cssText = 'background:#f4f4f4;padding:20px;overflow:auto;white-space:pre;';
9
        document.body.innerHTML = '';
10
        document.body.appendChild(pre);
11
    } catch(e) {
12
        alert('不是有效的 JSON: ' + e.message);
13
    }
14
})();

使用方法：

1
1. 打开 JSON 链接
2
2. 点击书签 "格式化 JSON"
3
3. 页面自动格式化

增强版书签脚本#

功能更多：

1
javascript:(function(){
2
    var body = document.body.innerText.trim();
3
    try {
4
        var json = JSON.parse(body);
5
        var formatted = JSON.stringify(json, null, 2);
6

7
        var html = `
8
            <div style="position:fixed;top:10px;right:10px;z-index:9999;">
9
                <button onclick="copyJSON()" style="padding:10px 20px;background:#4CAF50;color:white;border:none;cursor:pointer;">复制</button>
10
                <button onclick="toggleView()" style="padding:10px 20px;background:#2196F3;color:white;border:none;cursor:pointer;">切换视图</button>
11
            </div>
12
            <pre id="json-content" style="background:#f4f4f4;padding:20px;overflow:auto;white-space:pre;margin-top:60px;">${formatted}</pre>
13
        `;
14

15
        document.body.innerHTML = html;
16

17
        window.copyJSON = function() {
18
            navigator.clipboard.writeText(formatted);
19
            alert('已复制到剪贴板');
20
        };
21

22
        window.toggleView = function() {
23
            var pre = document.getElementById('json-content');
24
            pre.style.whiteSpace = pre.style.whiteSpace === 'pre' ? 'pre-wrap' : 'pre';
25
        };
26
    } catch(e) {
27
        alert('JSON 格式错误：' + e.message);
28
    }
29
})();

方法五：地址栏技巧（推荐⭐⭐）#

Chrome 地址栏格式化#

步骤：

1
1. 访问 JSON 链接
2
2. 在地址栏添加 ?format=true
3
3. 部分 API 会返回格式化结果

示例：

1
原始：https://api.github.com/users/github
2
格式化：https://api.github.com/users/github?format=pretty

使用 View Source#

Chrome/Edge：

1
1. 在 JSON 链接前加 view-source:
2
2. 地址：view-source:https://api.example.com/data.json
3
3. 按 Enter
4
4. 查看带语法高亮的源码

📊 方法对比#

综合评分#

方法	易用性	速度	功能	推荐指数
开发者工具	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐⭐
浏览器扩展	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐
在线工具	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
书签脚本	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐
地址栏技巧	⭐⭐	⭐⭐⭐	⭐⭐	⭐⭐⭐

🎯 场景化推荐#

日常开发#

1
首选：浏览器扩展（JSON Viewer Pro）
2
理由：自动格式化，无需手动操作

临时查看#

1
首选：星点工具站（<https://www.xingdian.net/app/json/format/>）
2
理由：快速便捷，无需安装，专业 JSON 格式化工具

调试 API#

1
首选：开发者工具
2
理由：集成在开发环境中

频繁使用#

1
首选：书签脚本
2
理由：一键格式化，效率最高

💡 进阶技巧#

1. 开发者工具快捷操作#

1
// Chrome Console 快捷命令
2

3
// 复制格式化 JSON
4
copy(JSON.parse(document.body.innerText))
5

6
// 查看特定字段
7
JSON.parse(document.body.innerText).data.users
8

9
// 搜索
10
JSON.parse(document.body.innerText).$0

2. 扩展配置优化#

JSON Viewer Pro 配置：

1
{
2
  "theme": "dark",
3
  "fontSize": 14,
4
  "collapseDepth": 2,
5
  "showLineNumbers": true,
6
  "syntaxHighlighting": true
7
}

3. 批量处理#

1
// 书签脚本批量格式化
2
javascript:(function(){
3
    var links = document.querySelectorAll('a[href*=".json"]');
4
    links.forEach(link => {
5
        link.target = '_blank';
6
        link.textContent += ' 📋';
7
    });
8
    alert('已标记所有 JSON 链接，点击可在新窗口打开');
9
})();

🔒 安全提示#

注意事项#

1
1. **敏感数据**
2
   - 避免使用不明在线工具
3
   - 优先使用本地扩展
4

5
2. **扩展权限**
6
   - 只安装官方扩展
7
   - 检查权限要求
8

9
3. **脚本来源**
10
   - 不运行未知书签脚本
11
   - 审查代码后再使用

💬 总结#

5 种浏览器格式化 JSON 方法：

✅ 开发者工具 - 开发者首选
✅ 浏览器扩展 - 最方便
✅ 在线工具 - 最快速
✅ 书签脚本 - 最灵活
✅ 地址栏技巧 - 备用方案

推荐组合：

日常：JSON Viewer Pro 扩展
临时：星点工具站 - 专业 JSON 格式化工具
调试：Chrome DevTools

:::tip[相关资源]

JSON 格式化完整指南 :::https://www.xingdian.net/app/json/format/