20 多种控制台方法将为您带来革命性地调试

您可能知道该console.log方法以及其他一些控制台方法，例如console.errorand console.dir，但实际上有超过 20 种控制台方法可供您使用。这些方法中的每一种都有自己的用例，如果您为每个用例使用正确的方法，您将大大提高调试质量。

我决定将这篇文章分成 4 个不同的部分。

1. 基本日志记录

2. 格式化日志

3. 性能记录

4. 实用程序日志记录

这些部分中的每一个都涵盖了一些针对总体目标的方法。这些部分还包括大量您不想错过的一般调试提示和技巧。

基本记录方法

首先，我们需要谈谈 5 种基本的日志记录方法。

1. log

2. debug

3. info

4. warn

5. error

这些方法中的每一个都以完全相同的方式工作。唯一的区别是它们在控制台中的显示方式。让我们看一个使用这些方法来比较它们的输出的例子。

console.log("Log")
console.debug("Debug")
console.info("Info")
console.warn("Warn")
console.error("Error")

如果您自己尝试一下，您可能看不到某些日志消息。那是因为您可以在浏览器控制台中显示/隐藏不同的日志记录级别。这些通常在控制台窗口上方配置。

这种显示/隐藏不同日志记录级别的能力是这些不同的日志记录方法如此有用的原因之一。您可以轻松配置要显示的内容，因此如果您只查找错误，则可以关闭所有非错误的日志记录级别，从而更容易消化正在发生的事情。

基本语法

现在使用这些方法的基本方法是将单个字符串或值传递给方法。这将在控制台中记录该值。不过，您不仅可以记录单个值。如果您想记录多个值，您可以在一个日志方法中执行此操作，只需将它们全部作为单独的参数传递即可。

console.log("Hello", "World", { name: "Kyle" })
// Hello World {name: 'Kyle'}

这将适用于 5 种基本日志记录方法中的任何一种，并且是将相关值全部记录在同一行上的好方法，而不是使用多个日志方法将每个值记录在自己的行上。

实时视图问题

浏览器尝试帮助调试的一件事是始终显示记录到控制台的任何对象的实时更新值。这意味着如果您运行以下代码并查看控制台，您可能会看到不同的输出，具体取决于您查看控制台的时间。

const person = { name: "Kyle" }
console.log(person)
person.name = "Sally"

在 Chrome 中，当您在控制台中展开对象时，它会计算要打印到控制台的值。这意味着如果您在运行代码以将名称更改为 Sally 之前在控制台中展开人员对象，即使您将名称更改为 Sally，它也会按预期显示。但是，如果在将名称更改为 Sally 后展开人员对象，您将看到登录到控制台的人员对象的名称是 Sally 而不是 Kyle，这是您注销人员时的实际值。

这有时是您想要的，因为您只关心最新的值，但很多时候您想知道该对象在记录到屏幕时的值是多少。解决此问题的一种简单方法是在将对象记录到屏幕之前对其进行克隆。

const person = { name: "Kyle" }
console.log({ ...person })
person.name = "Sally"

如果您的对象没有任何嵌套对象/数组，上述代码将起作用。如果您的对象中嵌套了对象/数组，您将需要编写自己的方法来深度克隆对象，或者只需序列化到 JSON 或从 JSON 序列化。

const person = { name: "Kyle" }
console.log(JSON.parse(JSON.stringify(person)))
person.name = "Sally"

高级字符串记录

在转向更独特的方法之前，我们需要介绍这些基本日志记录方法的最后一件事是如何进行高级样式设置。有时，打印出字符串/值的基本样式还不够，您需要对如何将输出打印到屏幕进行精细控制。这可以通过两种主要方式完成。

首先，您可以使用字符串格式化来格式化内容在字符串中的放置和打印方式。

console.log("String: %s, Int: %d, Decimal: %f, Object: %o", "Hello", 1, .1, { name: "Kyle" })
// String: Hello, Int: 1, Decimal: 0.1, Object: {name: 'Kyle'}

在上面的示例中，我们使用%s、%d、%f和%o作为占位符，用于将值插入到控制台输出中的位置。当您使用这些占位符时，传递给 log 方法的下一个值将打印在这些占位符值所在的位置。%s用于字符串占位符。%d用于整数占位符。%f用于小数占位符。%o用于对象占位符。

现在这是一个非常酷的功能，但老实说，它不是我经常使用的东西，因为我可以只使用标记的模板文字。

console.log("String: %s", stringVariable)
console.log(`String: ${stringVariable}`)
// Same output

第二种格式更有用，因为它允许您编写自定义 CSS 来设置日志样式。

console.log("Normal, %cRed, %cGreen", "color: red", "background-color: green; color: white")

该%c符号告诉 log 方法将作为 log 方法的下一个参数传递的任何 CSS 样式应用于%c. 这些样式将一直应用到日志方法的末尾或直到使用下一个%c符号。如果您想为特定用例提供非常精美的控制台消息，这是完美的选择。

格式化记录方法

现在我们终于完成了对基本日志记录方法的讨论，我们可以讨论一些更高级的日志记录方法，从一些改变输出格式的基本日志方法开始。

dir

该dir方法非常简单，因为它的工作原理与该log方法几乎相同，但有一个例外。该log方法会将 HTML 元素输出为可以遍历的 HTML，同时dir将所有内容都记录为 JSON。这意味着 HTML 元素在使用时将像对象一样被记录，dir这对于查看 HTML 元素的属性非常有用

image.png

table

该table方法对于以表格格式显示对象数组非常有用，这样可以更轻松地扫描小型数据集。

const people = [
  { name: "Kyle", age: 27, programmer: true },
  { name: "Sally", age: 15, programmer: false },
  { name: "John", age: 34, programmer: false },
  { name: "Beth", age: 72, programmer: true }
]
console.table(people)

console.table 示例

这使得扫描您的列表以更容易地查看数组中元素之间的差异。如果您的浏览器开发工具支持该功能，您还可以通过单击表格标题按表格中的特定列进行排序。

分组

格式化控制台输出的最后一种方法是使用 3 组方法。

1. group

2. groupCollapsed

3. groupEnd

这些方法的名称很容易解释，因为group和groupCollapsed方法都启动了一个组，唯一的区别是该groupCollapsed方法默认为在控制台中关闭该组，而group默认为打开该组。然后该groupEnd方法关闭当前组。在组的开始和结束之间发生的每个日志都将放在该组中。让我们看一个例子。

在上面的示例中，我们创建了 3 个不同的组。第一组没有传递给该group方法的值，因此它只是获得一个默认标签。第二组我们将标签传递Label给 group 方法，因此在输出中您可以看到它具有与该组关联的标签。我们还在此组内放置了一个折叠组，以展示您可以在组内任意嵌套组。您还可以在输出中看到折叠组默认未打开。

如果您需要输出大量相关信息，但不希望它填满控制台的整个输出，这些分组方法非常有用。

性能记录方法

我要讨论的下一组控制台方法是注重性能的方法。这些可以分为两组。

1. 时间相关

2. 探查器相关

基于时间的日志记录

第一组是最容易理解的，因为它所处理的只是计算两个函数调用之间的时间。它的工作方式也与分组非常相似。

console.time()
slowFunction()
console.timeEnd()
// default: 887.69189453125 ms

console.time("Label")
slowFunction()
console.timeEnd("Label")
// Label: 863.14306640625 ms

我们开始一个计时器，就像我们开始一个小组一样。如果我们愿意，我们可以给它传递一个标签，这将使我们的计时器与该标签相关联。定时器和组之间的唯一区别是，如果你给你的定时器一个标签，当你结束定时器时你也需要使用相同的标签。这是因为您可以一次运行多个不同的计时器，并且标签用于确定要停止哪个计时器。

定时器还有一个简洁的函数timeLog，可以让你打印出定时器的当前时间而不用结束它。

console.time("Label")
slowFunctionOne()
console.timeLog("Label")
slowFunctionTwo()
console.timeEnd("Label")
// Label: 920.578125 ms
// Label: 1855.43896484375 ms

就像timeEnd你需要将标签传递给它一样timeLog，它知道要使用什么计时器。

探查器日志记录

现在，如果您想将性能日志记录提升到一个新的水平，您可以使用分析器日志记录，它的工作原理与上面的基于时间的日志记录类似，但不是使用启动/停止简单的计时器，而是启动/停止内置于开发中的分析器浏览器的工具。

console.profile()
slowFunction()
console.profileEnd()

console.profile("Label")
slowFunction()
console.profileEnd("Label")

这将在您的浏览器开发工具中启动分析器并记录一堆与性能相关的信息。现在，根据您的浏览器，此信息位于不同的位置并以不同的方式显示。此外，这是一项非标准功能，因此某些浏览器可能不支持此功能或可能以一种奇怪的方式处理它。因此，除非您知道它如何与您的浏览器配合使用，否则我通常不建议使用此方法。

最后，在我们继续之前，我应该提到，就像基于时间的日志记录一样，您可以使用该timeStamp方法在您的分析器中添加一个标记，这样您就可以看到到达该点需要多长时间。

console.profile()
slowFunctionOne()
console.timeStamp()
slowFunctionTwo()
console.profileEnd()

实用程序记录方法

我要讨论的最后一组控制台方法并不真正适合上述任何类别，但它们仍然非常有用。

assert

这组中我最喜欢的控制台方法可能是assert. 这与基本的控制台方法完全相同，但它需要一个布尔值作为第一个参数。如果这个布尔值是真的，它不会做任何事情并且基本上完全跳过日志。如果布尔值为假，那么它将记录在布尔参数之后传递给 assert 方法的所有内容。它本质上就像将日志包装在 if 语句中。

console.assert(n === 1, "Not equal to one")
if (n !== 1) console.error("Not equal to one")
// Same output

此方法非常适合测试值以查看它们是否符合您的预期，如果您仅在出现意外情况时记录，这可以使您的日志更加清晰。

clear

这种方法听起来很简单。它只是从控制台清除所有值。

console.clear()

count和countReset

和函数可以count轻松countReset计算记录值的次数。这有点类似于计时器。

console.count()
console.count()
console.countReset()
console.count()
// default: 1
// default: 2
// default: 1

console.count("Label")
console.count("Label")
console.countReset("Label")
console.count("Label")
// Label: 1
// Label: 2
// Label: 1

该count函数采用一个可选标签来表示您正在计数的内容，然后如果您想重置计数，您必须将相同的标签传递给重置函数。

trace

我要谈论的最后一个控制台方法是trace. 这是一个非常简单的函数，它只是在调用方法时打印出当前的堆栈跟踪。这对于调试哪些函数正在调用其他函数以及弄清楚您如何到达代码中的特定位置非常有用。

结论

我打赌你没想到会有这么多控制台方法。我知道当我开始研究这篇文章时，我对大量独特的方法感到非常惊讶。希望这些新方法中至少有一种可以帮助您将调试技能提升到一个新的水平。