灏天阁

控制台 console.log() 的乐趣

· Yin灏

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

table

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

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

image.png

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();

image.png

带样式的日志

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

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

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

可以得到以下输出：

image.png

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

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;"
);

image.png

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

image.png

时间

另一种常见的调试技术是测量执行时间，以跟踪操作所需的时间。这可以通过使用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

image.png

还有一个非标准方法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);
}

image.png

计数

有没有发现自己手动递增一个数字进行日志记录？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()遍历堆栈跟踪，并输出调用了哪些方法以到达某个点。

显示控制台.trace 的示例输出的屏幕截图

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

dir

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

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

显示控制台.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），以使过滤和禁用更容易
  • 遵循一致的格式，以便在需要时可以由计算机解析日志
  • 始终用英语编写简短、有意义的日志消息
  • 在日志中包含上下文或类别
  • 不要过度，只记录有用的信息

- Book Lists -