如何在Chrome浏览器的Network面板中格式化JSON响应数据？

嘿，这个问题太常见了！我开发时也常碰到压缩后的JSON没法直接读，给你几个简单有效的解决方式：

1. 用Chrome自带的一键格式化功能 #

这是最省事的办法，Chrome本身就支持：

• 打开Network面板，找到你要查看的请求，切换到Response标签
• 看标签页的右上角，有个长得像{}的按钮，叫「Pretty print」（格式化打印），点击它
• 瞬间原本杂乱的JSON就会变成带缩进、层级分明的结构，还能点击折叠/展开每个节点，阅读起来超轻松

2. 手动复制到控制台格式化 #

要是Chrome没自动识别出这是JSON（比如后端没设置正确的Content-Type: application/json响应头），可以这么做：

• 把Response里的所有JSON文本全选复制
• 打开Chrome控制台（按F12或Ctrl+Shift+I），输入JSON.parse(，然后粘贴你复制的内容，再补个)，回车
• 控制台会直接输出格式化好的JS对象，你可以逐层展开查看细节
• 或者更直观一点，用console.log(JSON.parse('你的JSON内容'))，输出的结果同样是可交互的结构化对象

3. 在前端代码里直接格式化输出（开发阶段） #

如果你是在自己的前端代码中处理这个请求，也可以在获取数据后直接格式化打印到控制台：

// 示例：用fetch请求后端接口
fetch('/your-api-path')
  .then(res => res.json())
  .then(data => {
    // 用2个空格缩进格式化后打印
    console.log(JSON.stringify(data, null, 2));
  });

这里JSON.stringify的第三个参数2指定了缩进的空格数，你也可以换成4或者'\t'用制表符缩进，输出的文本会非常规整。

不管你的JSON是压缩过的还是格式混乱的，上面的方法都能轻松搞定，帮你快速读懂响应数据~

内容的提问来源于stack exchange，提问作者Nyi Nyi Hmue Aung