超越Console.log：掌握控制台技巧，优雅地调试代码

console.log() 之外的生活

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

有时，您需要以表格的形式展示数据，以便更好地进行分析。这时，您就可以使用 console.table() 方法。

例如，您有一个包含学生信息的数组：

const students = [
  { name: 'John Doe', age: 20 },
  { name: 'Jane Smith', age: 21 },
  { name: 'Michael Jones', age: 22 },
];

您可以使用 console.table() 方法将这个数组以表格的形式展示出来：

console.table(students);

这样，您就可以看到一个整齐的表格，其中包含了每个学生的名字和年龄。

console.dir()：查看对象的详细属性

console.dir() 方法允许您查看对象的详细属性，包括对象的原型链。

例如，您有一个名为 person 的对象：

const person = {
  name: 'John Doe',
  age: 20,
  address: {
    street: '123 Main Street',
    city: 'Anytown',
    state: 'CA',
  },
};

您可以使用 console.dir() 方法查看这个对象的详细属性：

console.dir(person);

这样，您就可以看到 person 对象的原型链以及对象的所有属性和方法。

console.error()：记录错误信息

console.error() 方法允许您记录错误信息，并在控制台以红色字体显示。

例如，您有一个函数，它可能会抛出一个错误：

function divide(a, b) {
  if (b === 0) {
    throw new Error('Division by zero');
  }

  return a / b;
}

您可以使用 console.error() 方法来记录这个错误信息：

try {
  divide(10, 0);
} catch (error) {
  console.error(error);
}

这样，当您运行这段代码时，您将在控制台看到错误信息：“Division by zero”。

console.group() 和 console.groupEnd()：分组输出信息

console.group() 和 console.groupEnd() 方法允许您将输出信息分组，以便更好地组织和管理控制台中的信息。

例如，您正在调试一个函数，您想将该函数的输出信息分组在一起：

console.group('Function output');
console.log('Line 1');
console.log('Line 2');
console.log('Line 3');
console.groupEnd();

这样，当您运行这段代码时，您将在控制台看到一个分组，其中包含了该函数的输出信息。

总结

以上只是控制台的众多技巧中的一小部分。通过熟练掌握这些技巧，您就可以在调试代码时更加高效和优雅。