JavaScript 控制台 API：9 个实用技巧

如果你每天都用 JavaScript，我敢打赌你肯定console.log经常用这个方法。但是你有没有试过看看这个console对象是什么样子的？

好吧，让我们看看：

如你所见，consoleobject 拥有的方法比 丰富得多log。本文旨在揭开consoleAPI 的神秘面纱，并向你展示如何使用它。读完本文后，你应该能够正确显示日志、评估代码性能并更高效地调试代码。如果你在浏览器或 Node.js 中使用 JavaScript，那么本文应该对你有所帮助！

🎛️ 使用日志级别

使用不同的日志级别对于轻松调试和观察应用程序的运行情况非常有用。控制台 API 有几种方法可以记录消息：

• log：它将在控制台中显示一般消息
• debug：它将在控制台中显示调试消息
• info：它将在控制台中显示信息消息
• warn：它将在控制台中显示一条警告消息
• error：它将在控制台中显示一条错误消息

每种方法都可以用两种不同的方式使用。

• 您可以将要显示的一个或多个对象作为参数传递
• 您可以将带有替换字符串的字符串作为第一个参数传递，并且每个替换字符串都会拉取下一个参数以格式化字符串。

让我们看一个例子：

// with one or more objects as arguement
console.info("Toto", 1, object)

// Displays log :
// Toto 1 {test: 1}

// With the substitution strings
console.info("Hello, my name is %s. I am %d.", "Thomas", 30);

// Displays log :
// Hello, my name is Thomas. I am 30.

如果您记录了大量消息，请记住某些浏览器（如 Chrome 或 Firefox）允许使用正则表达式和日志记录级别过滤日志：

请注意，该方法生成的消息的日志级别log在不同浏览器之间可能有所不同。例如，Chrome 不会区分 和log，info而 Firefox 则会。

最后，如果您使用 nodeJS，您应该知道log，debug和info是相同的方法，它们都将消息打印到stdout。warn和error是相同的方法，它们都将消息打印到stderr。

🗃️ 群组日志

有时，对日志消息进行分组会很有用，这样可以提高可读性。控制台 API 提供了几种对日志消息进行分组的方法：

• group：创建一个新的内联组，所有后续输出将缩进一个级别。要移出上一个级别，请调用groupEnd()。
• groupCollapsed：创建一个新的内联组，所有后续输出将缩进一个级别。然而，与group()此不同的是，内联组一开始是折叠的，需要使用展开按钮才能展开。要退出上一级，请调用groupEnd()。
• groupEnd：退出当前内联组。

这是一个简单的例子：

function sharedFunc(n) {
    console.group('sharedFunc', {n})
    for(let i = 1; i <= n; i++) {
    console.info('I have been called %d !', i)
    }
    console.groupEnd()
} 

function foo(n) {
    console.group('foo', {n})
    sharedFunc(n)
    console.groupEnd()
}

function bar(n) {
    console.groupCollapsed('bar', {n})
    sharedFunc(n)
    console.groupEnd()
}

foo(1)
bar(2)
bar(3)
foo(1)

这样做的结果将通过缩进对日志消息进行分组，使它们更易读：

您可以看到每个组旁边都有一个小箭头，可以折叠或展开组的内容。

• 当您使用group方法时，该组将自动展开
• 当你使用groupCollapsed方法时，组会自动折叠

请注意，不同浏览器的界面可能有所不同。

最后，如果您使用 nodeJS，您将无法折叠或展开组，并且只会显示缩进。因此，group和groupCollapsed是相同的方法。

✅ 断言预期

你是否已经写过一段代码，目标是在出现问题时显示日志消息来进行调试？Console API 有一个方法可以检查断言，并在断言为 false 时显示日志消息：

• assert：如果第一个参数是，则将消息和堆栈跟踪记录到控制台false。

此方法可以以两种不同的方式使用：

• 您可以将要显示的一个或多个对象作为参数传递
• 您可以将带有替换字符串的字符串作为第一个参数传递，并且每个替换字符串都会拉取下一个参数以格式化字符串。

const life = 42
const object = {test: 1}

// with one or more objects as arguement
console.assert(life === 43, 'toto', 1, object)

// Displays error log :
// Assertion failed: Toto 1 {test: 1}

// With the substitution strings
console.assert(life === 43, 'life should be %d', 42)

// Displays error log :
// Assertion failed: life should be 42

以下是您在 Chrome 中看到的结果：

console.error使用此语法，您可以以比包装在条件块中更快、更简单的方式编写调试代码。

最后，如果您使用 nodeJS，您应该知道即使assert方法运行良好，它也会将日志消息发送到stdout。建议使用断言 API，它提供了更多方法，并在断言为 false 时stderr抛出AssertionError来将日志消息发送到。

🧮 计数代码执行

在调试过程中，您可能想知道一段代码或一个函数执行了多少次。控制台 API 提供了几种方法来记录代码的执行次数：

• count：记录使用给定标签调用此行的次数。
• countReset：重置具有给定标签的计数器的值。

该count方法将标签与计数值关联起来，方式与地图相同。每次调用该方法时，关联值都会加一，并在日志中显示其值。请注意，如果没有指定标签，则将字符串“default”设置为标签。我们来看一个例子：

function resetDay() {
   console.countReset('wake')
   console.countReset('exercise')
   console.countReset('eat')
   console.countReset('work')
   console.countReset('play')
   console.countReset('sleep')
}

for(let i = 0; i < 2; i++) {
   console.group(`day ${i}`) 
   console.count('wake')
   console.count('exercise')
   console.count('eat')
   console.count('work')
   console.count('eat')
   console.count('work')
   console.count('play')
   console.count('eat')
   console.count('sleep')
   resetDay()
   console.groupEnd() 
}

以下是您在 Chrome 中看到的结果：

⏱️ 代码执行时间

当你的应用运行缓慢时，你可能需要开始对代码进行计时，以便了解哪些地方需要优化。控制台 API 提供了几种方法来计时代码的执行时间：

• time：启动一个以指定名称作为输入参数的计时器。
• timeLog：将指定计时器的值记录到控制台。
• timeEnd：停止指定的计时器并记录time自启动以来经过的秒数。

请注意，如果没有指定名称，则字符串“default”将被设置为名称。让我们看一个例子：

console.time('test')
setTimeout(() => {
   console.timeLog('test')
   setTimeout(() => {
       console.timeEnd('test')  
   }, 3000)
}, 3000)

Chrome 中的结果如下：

📍 添加标记

如果您使用浏览器性能工具，您应该知道可以在执行工作流中添加标记。这会在工具界面中显示事件，从而简化调试。控制台 API 有一个方法可以做到这一点：

• timeStamp：向浏览器的性能工具添加标记。

console.timeStamp('test')

以下是 Firefox 中的结果：

✨ 在表格中显示数据

当你想在控制台中显示一个复杂的对象或数组时，你应该知道可以将其显示为表格，以便于阅读。控制台 API 有一个方法可以做到这一点：

• table：将表格数据显示为表格

以下是一个例子：

const robert = {name: "Robert", age: "30", favoriteColor: "blue"}
const jack = {name: "Jack", age: "35", favoriteColor: "pink"}
const marie = {name: "Marie", age: "20", favoriteColor: "green"}
const tom = {name: "Tom", age: "24", favoriteColor: "yellow"}
const people = [robert, jack, marie, tom]

console.table(jack)
console.table(people)

Chrome 中的结果如下：

🔎 显示堆栈跟踪

在调试时，您可能想知道代码运行时某个执行点的调用路径。控制台 API 有一个显示堆栈跟踪的方法：

• trace：输出堆栈跟踪。

使用方法如下：

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

foo();

Chrome 中的结果如下：

🧼 清理控制台

当你的控制台变得一团糟，你想删除所有东西时，控制台 API 为你提供了一种方法来做到这一点：

• clear：清除控制台。

使用方法如下：

// This will clear the console
console.clear()

Chrome 中的结果如下：

🎉 恭喜！

恭喜！您已经了解了所有关于控制台 API 的知识！希望这些知识能帮助您未来的调试。

如果您喜欢这篇文章，请不要犹豫：

• 在 Twitter 上关注我：@tbetous
• 分享这篇文章！

感谢您的关注和阅读🎉