为什么在 2023 年仅使用 console.log 是大忌🚀

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

2023 年了，你还在使用它console.log来满足所有 JavaScript 调试需求吗？

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

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

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

😞 问题

使用 just 的最大问题之一console.log是它会使你的代码变得混乱，难以阅读。此外，它本身的信息量也不大。它只会输出你传入的值，没有任何上下文或其他信息。

考虑到这一点，这里有十个你应该知道的JavaScript 控制台对象方法和技巧（并尝试一下；我知道直接使用 console.log 会更快，但它可以让你的调试体验更好，为了你的未来自己动手做吧！）。

1️⃣ console.table

此方法允许您以可读且易于理解的格式输出表格数据。它不是简单地输出数组或对象，而是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表格格式输出数组，其中每个对象的属性作为列，对象作为行。

2️⃣console.group

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 响应所需的时间。实际用时将输出到控制台。

4️⃣console.assert

此方法允许您在代码中编写断言，这些语句应始终为真。如果断言失败，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');

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

5️⃣设置日志样式

使用console对象输出样式和颜色。该console对象允许您以不同的颜色和样式输出文本，使您的调试输出更具可读性和易于理解。

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

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

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

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

6️⃣console.trace

使用该console.trace方法输出堆栈跟踪。这有助于理解代码的执行流程以及识别特定日志消息的来源。

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

function bar() {
  foo();
}

bar();

这会在控制台中输出一个堆栈跟踪，显示导致调用的函数调用序列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这将以分层格式输出对象的属性，使您能够看到对象的结构及其所有属性和值。

8️⃣console.count

使用此console.count方法计算特定日志消息的输出次数。这有助于跟踪特定代码路径的执行次数，并识别代码中的热点。

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

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

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

9️⃣控制台.清除

使用此console.clear方法清除控制台输出。这有助于保持调试输出井然有序，让您更轻松地专注于感兴趣的信息。

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

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

1️⃣0️⃣console.profile

使用console.profile和console.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.profile这将开始分析和调用之间的代码块console.profileEnd，并在调用执行时将结果输出到控制台console.profileEnd。输出将包含执行代码所花费的时间以及任何其他与性能相关的信息。

💭 最后一些想法

在 2023 年，不要仅仅满足于此——JavaScript 控制台对象中console.log还有更多强大、更有价值的工具和技术。

从console.table到console.time，这些方法和技巧将帮助您提高调试输出的质量和可读性，并使您更容易排除故障和修复代码中的问题。

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

哦，还有……

🌎 让我们联系起来！

• 推特：@thenaubit