前端必备：console 10 中使用小技巧

目录

1、log 级别

2、console.trace() 堆栈跟踪

3.console.assert() 断言判断

4、console.clear() 清理控制台

5、console.time()

6、console.table()

7、console.group()

8、console.log() 支持 CSS

9、console.profile([label])

10.console.memory 显示内存占用情况的信息

---

1、log 级别

除了 console.log()之外，其他的console方法包括：

console.debug()、console.info()、console.warn() 和 console.error()也是非常有用，常用于定义不同级别的日志。

console.debug('Debug message');
// 在您的应用程序中设置了一些日志记录，在开发过程中依赖这些日志记录，但不希望用户看到,
//用 console.debug() 替换日志语句就可以做到这一点，它的功能与 console.log 完全相同，
// 但会被大多数构建系统删除，或者在生产模式下运行时被禁用
console.info('Useful information');
console.warn('This is a warning');
console.error('Something went wrong!');

2、console.trace() 堆栈跟踪

console.trace() 的功能与 console.log() 相同，但它额外显示了完整的堆栈跟踪，从而知道代码调用层级。

const outer = () => {
  const inner = () => console.trace('Hello');
  inner();
};
outer();

3.console.assert() 断言判断

当断言失败时（即当第一个参数为 false 时），console.assert() 提供了一种方便的方法来简单地将某些内容记录为错误并在所有其他情况下忽略它。

const value = 50;
console.assert(value === 10, 'Value is not 10!');
// 输出为空
console.assert(value === 50, 'Value is not 50!');
// 打印 "Value is not 50!"

4、console.clear() 清理控制台

主要用于清除控制台里面的内容。

5、console.time()

console.time() 提供了一种快速检查代码性能的方法，但由于其准确性低，不应用于真正的基准测试。

console.time('slow comp');
//启动“slow comp”计时器
console.timeLog('slow comp');
// 打印“slow comp”计时器的值
console.timeEnd('slow comp');
// 停止和打印'slow comp'计时器的值

6、console.table()

使用console.table命令可以很方便地在控制台中显示表格。

console.table(["姓名", "年龄", "地址"]);

7、console.group()

console.group() 允许将日志分组到可折叠的结构中，当有多组日志时特别有用。

console.group('Outer');
// 创建一个标记为"Outer"的组
console.log('Hello');
// 打印在 'Outer'内部
console.groupCollapsed('Inner');
// 创建一个标记为Inner”的组，已折叠
console.log('Hellooooo');
// 在'Inner'中打印日志
console.groupEnd();
// 组'Inner'结束
console.groupEnd();
// 结束“Outer”组
console.log('Hi'); // Log outside of any group

8、console.log() 支持 CSS

可以在 console.log() 中使用 %c 字符串替换表达式将 CSS 应用于日志的一部分。

console.log(
  'CSS can make %cyour console logs%c %cawesome%c!',
  // 目标字符串格式
  //每个字符串是应用于每个连续 %c 的 CSS
  'color: #fff; background: #1e90ff; padding: 4px',
  //应用样式
  '', // 清除style
  'color: #f00; font-weight: bold',
  // 应用样式
  '' // 清除style
);

输出结果如下:

9、console.profile([label])

如果可以在需要时开始分析，而不是从一开始就保持打开状态，可以使用 console.profile() 。完成分析后，只需调用 console.profileEnd()。举个例子：

function thisNeedsToBeProfiled() {
  console.profile('thisNeedsToBeProfiled()');
  // 其他代码逻辑
  console.profileEnd();
}

打印日志并添加到 Profile 面板中。

10.console.memory 显示内存占用情况的信息

console.memory 是 console 对象的一个属性，而不是一个方法。

它可以用来查看当前内存的使用情况，如果使用过多的 console.log()会占用较多的内存，导致浏览器出现卡顿情况。