控制台 console.log() 的乐趣

---

theme: smartblue
highlight: a11y-dark

本文正在参加「金石计划 . 瓜分6万现金大奖」

• 原文链接：fun-with-consolelog💿 – 开发者社区(dev.to)
• 原文作者：艾丽西亚·赛克斯

如果你曾经开发过 Web 应用程序，那么你肯定熟悉console.log（...），这是一种将数据打印到控制台的方法；可用于调试、日志记录和测试。

这篇文章简要概述了可用于提升console.log(console)日志记录体验的 10 大技巧。

table

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

console.table({
  '时间戳': new Date().getTime(),
  '操作系统': navigator['platform'],
  '浏览器': navigator['appCodeName'],
  '语言': navigator['language'],
});

group

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

你可以选择通过传递字符串作为参数来为节指定标题。也可以在控制台中折叠和展开，但默认情况下也可以使用 groupCollapsed 而不是 group 来折叠节。你也可以在节中嵌套子节，但一定要记住用 groupEnd 结束每个组。

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

console.group('URL信息');
  console.log('协议', window.location.protocol);
  console.log('主机', window.origin);
  console.log('路径', window.location.pathname);
  console.groupCollapsed('Meta信息');
    console.log('提取日期', new Date().getTime());
    console.log('操作系统', navigator['platform']);
    console.log('浏览器', navigator['appCodeName']);
    console.log('语言', navigator['language']);
  console.groupEnd();
console.groupEnd();

带样式的日志

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

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

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

可以得到以下输出：

挺好看的吧？还可以做更多的事情，改变字体，样式，背景颜色，添加一些阴影和一些曲线等等……

console.log(
    `\n%c海拥摸鱼小游戏🎮很好玩!🚀`, 
    'color:#0dd8d8; background:#0b1021; font-size:1.5rem; padding:0.15rem 0.25rem; margin: 1rem auto; font-family: Rockwell; border: 2px solid #0dd8d8; border-radius: 4px;font-weight: bold; text-shadow: 1px 1px 1px #00af87bf;'
);

还有更多样式原作者在开发人员仪表板中使用的类似内容，代码在这里

时间

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

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

concatenation: 1206ms - timer ended

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

断言

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

第一个参数是要检查的布尔条件，后跟要打印的 0 个或多个数据点，最后一个参数是要输出的消息。Sowill 输出消息，因为第一个参数是。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);
}

---

计数

有没有发现自己手动递增一个数字进行日志记录？console.count()有助于跟踪执行某些内容的次数或输入代码块的频率。

你可以选择为计数器指定一个标签，以便管理多个计数器并使输出更清晰。
计数器将始终从 1 开始。你可以随时使用console.countReset()重置计数器，该计数器也采用可选的标签参数。

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

const numbers = [1, 2, 3, 30, 69, 120, 240, 420];
numbers.forEach((name) => {
  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

---

跟踪

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

你可以选择将数据也与堆栈跟踪一起输出。

---

dir

如果将大型对象记录到控制台，则可能会变得难以读取。console.dir()方法将以可扩展的树结构格式化它。

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

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

---

调试

你可能在应用中设置了一些日志记录，你在开发过程中依赖这些日志记录，但不希望用户看到。用console.debug()替换console.log日志语句就可以做到这一点，它的功能方式与大多数构建系统完全一样，但在生产模式下运行时会被剥离或禁用。

---

日志级别

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

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

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

---

多值日志

控制台对象上的大多数函数将接受多个参数，因此你可以向输出添加标签，或一次打印多个数据点，例如：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!", "World", new Date().getFullYear());
// Hello World, welcome to the year 2022!

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

---

clear

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

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

---

特殊浏览器方法

直接在浏览器控制台中运行代码时，你将可以访问几个速记方法，这些方法对于调试、自动化和测试非常有用。

其中最有用的是：

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

还有更多控制台速记命令，这是一个完整列表。

警告这些只能在开发工具控制台中工作，不适用于你的代码！

---

还有更多…

登录到控制台可以执行更多操作！有关更多信息，请查看MDN控制台文档或Chrome 开发控制台文档。

只是关于最佳实践的快速说明…

• 定义 lint 规则，以防止任何控制台.log语句合并到主分支中
• 编写一个包装函数来处理日志记录，这样你就可以根据环境启用/禁用调试日志，以及使用适当的日志级别，并应用任何格式。这也可用于与第三方日志记录服务集成，仅在一个位置进行代码更新
• 切勿记录任何敏感信息，浏览器日志可以被任何已安装的扩展程序捕获，因此不应被视为安全
• 始终使用正确的日志级别（info, warn, error），以使过滤和禁用更容易
• 遵循一致的格式，以便在需要时可以由计算机解析日志
• 始终用英语编写简短、有意义的日志消息
• 在日志中包含上下文或类别
• 不要过度，只记录有用的信息