console怎么打印JSON

Console打印JSON：前端调试的必备技巧

在前端开发过程中，我们经常需要调试和查看JavaScript对象或JSON数据，浏览器的开发者工具（DevTools）提供了强大的console对象，其中打印JSON数据是开发者最常用的功能之一，本文将详细介绍如何使用console方法打印和格式化JSON数据,帮助你更高效地进行调试。

基础打印：console.log()

最基本的方法是使用console.log()来打印JSON数据，当你有一个JavaScript对象时，可以直接将其传递给console.log()：

const user = {
  id: 1,
  name: "张三",
  age: 25,
  hobbies: ["编程", "阅读", "旅行"]
};
console.log(user);

在控制台中，你会看到这个对象的展开视图,可以点击查看各个属性。

美化输出：console.log(JSON.stringify())

当需要以更易读的格式查看JSON时，可以使用JSON.stringify()方法：

const user = {
  id: 1,
  name: "张三",
  age: 25,
  hobbies: ["编程", "阅读", "旅行"]
};
console.log(JSON.stringify(user, null, 2));

这里的第二个参数null表示不进行过滤，第三个参数2表示缩进2个空格,使输出更加美观。

分组显示：console.group()

对于复杂的嵌套JSON，可以使用console.group()来组织输出：

const data = {
  user: {
    id: 1,
    name: "张三",
    profile: {
      email: "zhangsan@example.com",
      phone: "13800138000"
    }
  },
  settings: {
    theme: "dark",
    notifications: true
  }
};
console.group("用户信息");
console.log(JSON.stringify(data.user, null, 2));
console.groupEnd();
console.group("设置");
console.log(JSON.stringify(data.settings, null, 2));
console.groupEnd();

这样控制台会显示分组后的结构,便于查看不同部分的数据。

表格形式展示：console.table()

当JSON数据是数组形式时，console.table()可以将其以表格形式展示,非常直观：

const users = [
  { id: 1, name: "张三", age: 25 },
  { id: 2, name: "李四", age: 30 },
  { id: 3, name: "王五", age: 28 }
];
console.table(users);

或者指定要显示的列：

console.table(users, ["id", "name"]);

条件打印：console.assert()

有时你只想在特定条件下打印JSON数据，可以使用console.assert()：

const user = { id: 1, name: "张三", age: 25 };
console.assert(user.age > 30, "用户年龄信息:", user);

只有当断言条件为false时,才会打印后面的信息。

性能测量：console.time()与console.timeEnd()

如果需要查看处理JSON数据所需的时间,可以使用性能测量方法：

const largeData = Array(1000).fill().map((_, i) => ({ id: i, value: Math.random() }));
console.time("JSON处理");
const jsonString = JSON.stringify(largeData);
console.timeEnd("JSON处理");

高级技巧：自定义格式化输出

你可以结合多种console方法实现更复杂的调试输出：

const debug = (data, label = "数据") => {
  console.group(label);
  console.log("原始数据:", data);
  console.log("JSON格式:", JSON.stringify(data, null, 2));
  console.groupEnd();
};
const user = { id: 1, name: "张三", age: 25 };
debug(user, "用户调试信息");