- Live and Learn - (8).png

前言

作为一名前端工程师，你一定使用过console.log打印数据到工作台进行代码代码调试、记录和测试。当你查看console对象的Api，会发现还有更多的使用方法，这篇文章就来简单介绍下其他有趣的console使用方法。

Table

console.table()将对象/数组打印成格式整齐的表格

console.table({
  'name': '大雄',
  'time': new Date().toLocaleString(),
  'Language': navigator['language'],
  'host': location.host,
});

Group

console.group()方法用于设置分组信息的起始位置，该位置之后的所有信息将写入分组

使用 console.groupEnd()方法来结束当前的分组。

使用console.groupCollapsed()方法来隐藏分组信息。

console.group('level 1');
  console.log('name', '大雄')
  console.log('host', location.host);
  console.groupCollapsed('Meta Info');
    console.log('time', new Date().getTime());
    console.log('Language', navigator['language']);
  console.groupEnd();
console.groupEnd();

样式日志

可以在输出日志的时候，添加CSS样式，让你的日子炫酷起来

console.log(
  '%clive and learn',
  'color: green; font-family: sans-serif; '
);

当然，还有更cool的写法

console.log(
    `\n%c⚠️ Warning ⚠️%c \nlive and learn \n\n%c大雄`,
    "color:#ceb73f; background: #ceb73f33; font-size:1.5rem; padding:0.15rem; margin: 1rem auto; font-family: Rockwell, Tahoma, 'Trebuchet MS', Helvetica; border: 2px solid #ceb73f; border-radius: 4px; font-weight: bold; text-shadow: 1px 1px 1px #000000bf;",
    'font-weight: bold; font-size: 1rem;color: #ceb73f;',
    "color: #ceb73f; font-size: 0.75rem; font-family: Tahoma, 'Trebuchet MS', Helvetica;",
  );

Time

console.time()主要用来测算代码运行时间，要和console.timeEnd结合起来使用。

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

输出：
codeRunTime: 0.040283203125 ms

Assert

console.assert()方法在第一个参数为 false 的情况下会在控制台输出信息

当你想在发生错误或某个条件为真或假时输出日志到控制台

const errorMsg = 'something error';
for (let num = 2; num <= 5; num++) {
  console.log(`${num}`);
  console.assert(num % 2 === 0, { num }, errorMsg);
}

Count

console.count()方法在调用时将数字（调用次数）写入到控制台，并且可以设置标签

const numbers = [112, 212, 31, 304, 691, 1220, 2140, 4230];
numbers.forEach((name) => {
  console.count('number');
});

Trace

console.trace()方法用于显示当前执行的代码在堆栈中的调用路径

function myFunction() {
  myOtherFunction();
}
 
function myOtherFunction() {
  console.trace();
}
myFunction()

Dir

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

console.dir(document.body)

Debug

如果你想在你的应用程序中设置了一些日志记录，在开发过程中依赖这些日志记录，但不希望用户看到。用console.debug()就可以做到这一点，它的功能与大多数构建系统完全相同，console.log但会被大多数构建系统删除，或者在生产模式下运行时被禁用。

日志级别

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

日志字符串格式

如果需要构建格式化字符串以进行输出，可以使用格式说明符使用 C语言风格的 printf 来完成此操作。

支持以下说明符：

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

console.log("Hello %s, welcome to the year %d!", "大雄", new Date().getFullYear());

输出：
Hello 大雄, welcome to the year 2022!

Clear

console.clear() 方法用于清除控制台所有信息。 console.clear() 方法在执行成功后，会在控制台输出: "Console was cleared"。

如何正确使用日志

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

你不知道的Console

前言