C

console.log() 的乐趣💿

2025-05-25

console.log() 的乐趣💿

如果您曾经开发过 Web 应用程序，那么您会熟悉console.log(...)该方法，它将数据打印到开发人员控制台；对于调试、日志记录和测试很有用。

运行console.log(console)，你会发现这个对象还有很多其他功能console。
这篇文章简要概述了 10 个可以用来提升日志记录体验的巧妙技巧。

内容

表格

该console.table()方法将对象/数组打印为格式整齐的表格。



console.table({
  'Time Stamp': new Date().getTime(),
  'OS': navigator['platform'],
  'Browser': navigator['appCodeName'],
  'Language': navigator['language'],
});
Enter fullscreen mode Exit fullscreen mode

屏幕截图显示了 console.table 的示例输出

团体

使用 将相关的控制台语句与可折叠部分组合在一起console.group()。

您可以选择通过传递字符串作为参数来为章节添加标题。章节可以在控制台中折叠和展开，但您也可以使用 而groupCollapsed不是来默认折叠章节group。您还可以在章节内嵌套子章节，但请务必记住使用 结束每个组groupEnd。

以下示例将输出一个打开的部分，包含一些信息



console.group('URL Info');
  console.log('Protocol', window.location.protocol);
  console.log('Host', window.origin);
  console.log('Path', window.location.pathname);
  console.groupCollapsed('Meta Info');
    console.log('Date Fetched', new Date().getTime());
    console.log('OS', navigator['platform']);
    console.log('Browser', navigator['appCodeName']);
    console.log('Language', navigator['language']);
  console.groupEnd();
console.groupEnd();
Enter fullscreen mode Exit fullscreen mode

屏幕截图显示了 console.group 的示例输出

风格化原木

您可以使用一些基本的 CSS 来设置日志输出的样式，例如颜色、字体、文本样式和大小。请注意，不同浏览器对此的支持程度差异很大。

例如，尝试运行以下命令：



console.log(
  '%cHello World!',
  'color: #f709bb; font-family: sans-serif; text-decoration: underline;'
);
Enter fullscreen mode Exit fullscreen mode

您应该得到以下输出：

屏幕截图显示了控制台中使用 CSS 的示例

很酷吧？其实还有很多功能可以做！
比如更改字体、样式、背景颜色，添加一些阴影和曲线……

屏幕截图显示了控制台中使用 CSS 的示例

这是我在开发人员仪表板中使用的类似内容，代码在这里

屏幕截图显示了控制台中使用 CSS 的示例

时间

另一种常见的调试技巧是测量执行时间，以跟踪操作所需的时间。这可以通过使用console.time()并传入标签来启动计时器，然后使用console.timeEnd()并传入相同的标签来结束计时器来实现。您还可以使用以下方法在长时间运行的操作中添加标记：console.timeLog()



console.time("concatenation");
let output = "";
for (var i = 1; i <= 1e6; i++) {
  output += i;
}
console.timeEnd("concatenation");
Enter fullscreen mode Exit fullscreen mode 


concatenation: 1206ms - timer ended
Enter fullscreen mode Exit fullscreen mode

屏幕截图显示了 console.time 的示例输出

还有一种非标准方法，console.timeStamp()它在性能选项卡中添加标记，以便您可以将代码中的点与时间轴中记录的其他事件（如绘画和布局事件）关联起来。

断言

您可能只想在发生错误或某个条件为真或为假时将日志记录到控制台。这可以使用 来实现console.assert()，除非第一个参数是 ，否则它不会将任何内容记录到控制台false。

第一个参数是需要检查的布尔条件，后面跟着 0 个或多个想要打印的数据点，最后一个参数是要输出的消息。console.assert(false, 'Value was false')由于第一个参数是 ，所以会输出消息false。



const errorMsg = 'the # is not even';
for (let num = 2; num <= 5; num++) {
  console.log(`the # is ${num}`);
  console.assert(num % 2 === 0, { num }, errorMsg);
}
Enter fullscreen mode Exit fullscreen mode

屏幕截图显示了 console.assert 的示例输出

数数

您是否曾经发现自己手动增加一个数字来记录？console.count()这有助于跟踪某件事的执行次数，或者代码块的输入频率。

您可以选择为计数器添加标签，这样您就可以管理多个计数器并使输出更清晰。
计数器始终从 1 开始。您可以随时使用 重置计数器console.countReset()，它也接受一个可选的标签参数。

以下代码将增加数组中每个项目的计数器，最终值为 8。



const numbers = [1, 2, 3, 30, 69, 120, 240, 420];
numbers.forEach((name) => {
  console.count();
});
Enter fullscreen mode Exit fullscreen mode

以下是标记计数器的示例输出。

屏幕截图显示了 console.count 的示例输出

如果您使用值而不是标签，则每个条件值都会有一个单独的计数器。例如：



console.count(NaN);         // NaN: 1
console.count(NaN+3);       // NaN: 2
console.count(1/0);         // Infinity: 1
console.count(String(1/0)); // Infinity: 2
Enter fullscreen mode Exit fullscreen mode

痕迹

在 JavaScript 中，我们经常使用深度嵌套的方法和对象。您可以使用它console.trace()来遍历堆栈跟踪，并输出调用了哪些方法到达某个点。

屏幕截图显示了 console.trace 的示例输出

您可以选择传递数据，并将其与堆栈跟踪一起输出。

目录

如果您将大型对象记录到控制台，可能会难以阅读。该console.dir()方法会将其格式化为可扩展的树形结构。

以下是目录样式控制台输出的示例：

屏幕截图显示了 console.dir 的示例输出

您还可以使用 以类似的方式打印基于 XML 或 HTML 的树console.dirxml()。

调试

您可能在应用中设置了一些日志记录，这些日志记录在开发过程中依赖，但不希望用户看到。将日志语句替换为console.debug()即可实现这一点，其功能与 完全相同，console.log但会被大多数构建系统移除，或在生产模式下禁用。

日志级别

你可能已经注意到，浏览器控制台中有几个过滤器（信息、警告和错误），它们允许你更改记录数据的详细程度。要使用这些过滤器，只需将日志语句替换为以下语句之一：

  • console.info()- 用于记录目的的信息消息，通常包括小写“i”和/或蓝色背景
  • console.warn()- 警告/非严重错误，通常包括三角形感叹号和/或黄色背景
  • console.error()- 可能影响功能的错误，通常包括圆形感叹号和/或红色背景

在 Node.js 中，在生产环境中运行时，不同级别的日志会写入不同的流，例如error()，将写入stderr，而log输出到stdout，但在开发过程中，它们都会正常出现在控制台中。

多值日志

对象上的大多数函数console都会接受多个参数，因此您可以向输出添加标签，或一次打印多个数据点，例如：console.log('User: ', user.name);

但是，打印多个带标签的值的更简单方法是使用对象解构。例如，如果你有三个变量（例如x，y和z），你可以将它们用花括号括起来，将它们记录为一个对象，这样每个变量的名称和值都会被输出 - 就像console.log( { x, y, z } );

屏幕截图显示了控制台解构的示例输出

日志字符串格式

如果您需要构建格式化的字符串来输出，您可以使用格式说明符通过 C 样式 printf 来执行此操作。

支持以下说明符：

  • %s- 字符串或任何其他转换为字符串的类型
  • %d/ %i- 整数
  • %f- 漂浮
  • %o- 使用最佳格式
  • %O- 使用默认格式
  • %c- 使用自定义格式（更多信息）

例如



console.log("Hello %s, welcome to the year %d!", "Alicia", new Date().getFullYear());
// Hello Alicia, welcome to the year 2022!
Enter fullscreen mode Exit fullscreen mode

当然，您也可以使用模板文字来实现相同的目的，这对于较短的字符串来说可能更容易阅读。

清除

最后，当您查找事件的输出时，您可能希望清除页面首次加载时记录到控制台的所有内容。您可以使用 来实现console.clear()，它将清除所有内容，但不会重置任何数据。

通常还可以通过单击 Bin 图标来清除控制台，以及使用过滤器文本输入来搜索它。

特殊浏览器方法

当直接在浏览器的控制台中运行代码时，您将可以使用一些简便方法，这对于调试、自动化和测试非常有用。

其中最有用的是：

  • $()- 简写Document.querySelector()（选择 DOM 元素，jQuery 风格！）
  • $$()- 与上面相同，但用于selectAll返回数组中的多个元素时
  • $_- 返回最后计算的表达式的值
  • $0- 返回最近选择的 DOM 元素（在检查器中）
  • $1...$4也可以用来抓取之前选择的 UI 元素
  • $x()- 允许您使用 Xpath 查询选择 DOM 元素
  • keys()和values()- Object.getKeys() 的简写，将返回 obj 键或值的数组
  • copy()- 将内容复制到剪贴板
  • monitorEvents()- 每次触发给定事件时运行命令
  • 对于某些常见的控制台命令（例如console.table()），您不需要输入前面的console.，只需运行table()

还有更多控制台简写命令，这里是完整列表。

警告这些仅在开发工具控制台中起作用，并且不会在您的代码中起作用！

还有一些...

控制台日志记录功能远不止于此！更多信息，请参阅MDNconsole文档或Chrome 开发者控制台文档。

只是关于最佳实践的简短说明......

  • 定义一个 lint 规则，以防止任何 console.log 语句被合并到主分支
  • 编写一个包装函数来处理日志记录，这样你就可以根据环境启用/禁用调试日志，以及使用适当的日志级别和应用任何格式。这也可以用于与第三方日志服务集成，只需在一个地方进行代码更新。
  • 切勿记录任何敏感信息，任何已安装的扩展程序都可以捕获浏览器日志，因此不应将其视为安全
  • 始终使用正确的日志级别（例如info，， ）以便更轻松warn地error进行过滤和禁用
  • 遵循一致的格式，以便机器可以根据需要解析日志
  • 始终使用英语撰写简短、有意义的日志消息
  • 在日志中包含上下文或类别
  • 不要过度，只记录有用的信息
如果您喜欢这类东西，
请考虑关注以了解更多：)		 在 GitHub 上关注 Lissy93在 Twitter 上关注 Lissy_Sykes
文章来源：https://dev.to/lissy93/fun-with-consolelog-3i59
Devto 翻译
PREV
超级有用的 CSS 资源🌈
NEXT
浏览器开发工具：终极指南🔥