这里有 5 个必须知道的控制台对象方法和技巧！

您是否仍在使用 2023 年的所有 JavaScript 调试需求？console.log

是时候升级您的技能并发现 JavaScript 控制台对象的全部功能了。

从 到 ，这些高级方法和技巧将帮助您提高调试输出的质量和可读性，并更轻松地对代码中的问题进行故障排除和修复。console.tableconsole.time

那么，为什么不在 2023 年加入 JavaScript 忍者调试器的行列，并学习这些基本技术呢？你的代码会感谢你。

😞 问题所在
仅使用的最大问题之一是它会使您的代码混乱并使其难以阅读。此外，它本身的信息量不是很大。它只是输出你传递给它的任何内容的值，没有任何上下文或其他信息。console.log

考虑到这一点，这里有十个你应该知道的 JavaScript 控制台对象方法和技巧（并尝试一下;我知道只是控制台.log更快，但它可以使您的调试体验更好，为自己的未来做！

1️⃣ 控制台表
此方法允许您以可读且易于理解的格式输出表格数据。不只是注销数组或对象，而是以表格格式显示数据，这使得扫描和理解更容易。console.table

// Output an array of objects as a table
const users = [
  { id: 1, name: 'John Doe' },
  { id: 2, name: 'Jane Doe' }
];

console.table(users);

这将以表格格式输出数组，每个对象的属性作为列，对象作为行。users
console.table
2️⃣控制台组
console.group和。这些方法允许您在控制台中创建嵌套的可折叠组。这对于组织和构建调试输出非常有用，因此您可以轻松查看代码不同级别发生的情况。console.groupEnd

console.group('User Details');
console.log('Name: John Doe');
console.log('Age: 32');
console.groupEnd();

这将在控制台中创建一个嵌套的、可折叠的组，标题为“用户详细信息”。组内的日志消息将缩进并分组在一起。

控制台组

3️⃣控制台时间
console.time和。这些方法允许您测量执行代码块所需的时间。这对于识别代码中的性能瓶颈并对其进行优化非常有用。

console.timeEnd
console.time('Fetching data');
fetch('https://reqres.in/api/users')
  .then(response => response.json())
  .then(data => {
    console.timeEnd('Fetching data');
    // Process the data
  });

这将测量从指定 URL 获取数据并解析 JSON 响应所需的时间。已用时间将在控制台中输出。

console.time

4️⃣console.assert
此方法允许您在代码中编写断言，这些断言是应始终为 true 的语句。如果断言失败，将在控制台中输出错误消息。这对于捕获错误并确保代码按预期工作非常有用。console.assert

function add(a, b) {
  return a + b;
}

// Test the add function
const result = add(2, 3);
console.assert(result === 5, 'Expected 2 + 3 = 5');

如果函数在给定输入 2 和 3 时未返回预期结果 5，这将在控制台中输出错误消息。add

console.assert

5️⃣设置日志样式
使用该对象输出样式和颜色。该对象允许您以不同的颜色和样式输出文本，从而使调试输出更具可读性和更易于理解。consoleconsole

您可以在语句中使用占位符来指定输出文本的 CSS 样式。%cconsole.log

console.log('%cHello world!', 'color: red; font-weight: bold;');

这将使用指定的CSS样式以红色和粗体输出文本“Hello world！”。

使用 CSS 设置控制台.log输出样式

顺便说一下，如果你想要更好的日志，你可能想使用一个专门的日志记录库，它提供了更多的设置。我在我写的这篇文章中添加了一个非常好的：https://dev.to/naubit/5-small-and-hidden-react-libraries-you-should-already-be-using-nb5

6️⃣控制台跟踪
使用该方法输出堆栈跟踪。这对于了解代码中的执行流以及确定特定日志消息的来源非常有用。console.trace

function foo() {
  console.trace();
}

function bar() {
  foo();
}

bar();

这将在控制台中输出堆栈跟踪，显示导致调用的函数调用序列。输出将如下所示：console.trace

console.trace

7️⃣console.dir
使用该方法以分层格式输出对象的属性。这对于浏览对象的结构以及查看其所有属性和方法非常有用。console.dir

const obj = {
  id: 1,
  name: 'John Doe',
  address: {
    street: '123 Main St',
    city: 'New York',
    zip: 10001
  }
};
console.dir(obj);

这将以分层格式输出对象的属性，允许您查看对象的结构及其所有属性和值。obj

console.dir

8️⃣控制台计数
使用该方法计算特定日志消息作为输出的次数。这对于跟踪特定代码路径的执行次数以及识别代码中的热点非常有用。

console.count
function foo(x) {
  console.count(x);
}

foo('hello');
foo('world');
foo('hello');

这将在控制台中输出字符串“hello”，后跟数字 1。然后，它将在控制台中输出字符串“world”，后跟数字 1。最后，它将再次输出字符串“hello”，后跟数字 2（因为它已被调用两次）。

console.count

9️⃣控制台.清除
使用该方法清除控制台输出。这对于保持调试输出井井有条且整洁以及更轻松地专注于感兴趣的信息非常有用。console.clear

console.log('Hello world!');
console.clear();
console.log('This log message will appear after the console is cleared.');

这将在控制台中输出字符串“Hello world！”，后跟一个空行（因为控制台已清除）。然后，它将输出字符串“清除控制台后将显示此日志消息”。

console.clear

1️0️⃣ ⃣控制台配置文件
使用 and 方法测量代码块的性能。这对于识别性能瓶颈以及优化代码以提高速度和效率非常有用。

console.profileconsole.profileEnd
console.profile('MyProfile');

// Run some code that you want to measure the performance of
for (let i = 0; i < 100000; i++) {
  // Do something
}

console.profileEnd('MyProfile');
这将开始分析 和 调用之间的代码块，并在执行调用时在控制台中输出结果。输出将包括有关执行代码所花费的时间的详细信息以及任何其他与性能相关的信息。console.profileconsole.profileEndconsole.profileEnd

console.profile

💭 最后的一些想法
在 2023 年，不要仅仅满足于 - JavaScript 控制台对象中有许多更强大、更有价值的工具和技术。console.log

从 到 ，这些方法和技巧将帮助您提高调试输出的质量和可读性，并更轻松地排查和修复代码中的问题。console.tableconsole.time

那么，为什么不在 2023 年提升您的调试技能并尝试一下这些技术呢？你的代码（和你的理智）会感谢你。