15种JavaScript console的方法

559 阅读3分钟

在JavaScript中,console对象是一个内置功能,它提供了一组用于显示调试信息的方法。这些方法是Web浏览器标准API的一部分,因此开发人员可以轻松访问。

在这个博客中,我将分享14个最常用的控制台方法。

console.log()

此方法将消息打印到控制台。

举例来说:

console.log("Hello, World!");

输出:

console.error()

在控制台显示错误消息。

通过红色显示信息,有助于识别和跟踪错误。

举例来说:

console.error("This is an error message!");

输出:

console.warn()

在控制台中显示警告消息。

使用黄色显示警告消息(在大多数浏览器中),使其易于与常规日志区分开来。

它通常用于显示,不一定是错误但可能导致问题的潜在信息。

举例:

console.warn("This is a warning message!");

输出:

console.info()

在控制台中显示提示性消息。

举例:

console.info("This is an informational message!");

输出:

console.debug()

向控制台显示调试消息。

举例:

console.debug("Debugging information!");

输出:

范例:

function calculateSum(a, b) {
  console.debug("Function called with arguments:", a, b);
  return a + b;
}

console.log(calculateSum(5, 3)); // Logs the debug message first, then the sum.

输出:

注意:某些浏览器可能会隐藏控制台中的console.debug()消息,除非启用了调试。

console.table()

使用此方法在控制台中以表格格式显示数据,从而更容易查看和分析数据。

举例:

const users = [
  { name: 'John Doe', age: 30, occupation: 'Software Developer' },
  { name: 'Jane Smith', age: 25, occupation: 'Graphic Designer' },
  { name: 'Mike Johnson', age: 35, occupation: 'Project Manager' },
];

console.table(users);

输出:

console.group()

使用此方法在控制台中创建一组相关消息。

这有助于组织日志以提高可读性。

举例:

console.group('User Details');
console.log('Name: John Doe');
console.log('Age: 30');
console.log('Occupation: Software Developer');
console.groupEnd();

输出:

console.groupEnd()

用于结束消息输出。

console.groupCollapsed()

将信息折叠,默认情况下,该组是隐藏的。

console.groupCollapsed('User Details');
console.log('Name: John Doe');
console.log('Age: 30');
console.log('Occupation: Software Developer');
console.groupEnd();

输出:

console.time() and console.timeEnd()

console.time()console.timeEnd()方法用于测量代码执行所用的时间。

举例:

console.time("timer1");  // Start the timer

// Example code block to measure time
for (let i = 0; i < 1000000; i++) {
  Math.sqrt(i); 
}

console.timeEnd("timer1");  // End the timer and log 

输出:

通过使用不同的标签,您可以让多个计时器同时运行。

举例:

console.time("timer1");
for (let i = 0; i < 500000; i++) {
  Math.sqrt(i);
}
console.timeEnd("timer1");

console.time("timer2");
for (let i = 0; i < 1000000; i++) {
  Math.sqrt(i);
}
console.timeEnd("timer2");

输出:

console.assert()

此方法用于测试条件是否为真。如果条件为false,则将错误消息记录到控制台。如果条件为真,则什么也不会发生。

console.assert(condition, message);

举例:

let age = 18;
console.assert(age >= 21, "Age must be 21 or older"); // Will display an error message because the condition is false

age = 22;
console.assert(age >= 21, "Age must be 21 or older"); // No output because the condition is true

输出:

console.count()

记录同一标签调用它的次数。

举例:

console.count("Count A");
console.count("Count A");

输出:

console.countReset()

将特定标签的计数重置回零。

如果您想从头开始计数,例如当用户导航离开页面然后返回时,这很有帮助。

举例:

console.count("Count A");
console.countReset("Count A");

输出:

console.dir()

显示JavaScript对象的属性的列表。

举例:

const person = {
  name: "John",
  age: 30,
  address: {
    city: "New York",
    zip: "10001"
  },
  greet() {
    console.log("Hello!");
  }
};

console.dir(person);

输出:

console.clear()

用于清除控制台。

原文:dev.to/devshefali/…