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

JavaScript是一种用于前端开发的脚本语言。它可以通过浏览器内置的解释器在客户端执行，使网页具有交互性和动态效果。JavaScript可以实现诸如网页交互、动画、表单验证、游戏等多种功能，作为前端开发者，js是必备知识，另外前端调试功能也是前端工程师必备的技能。

今天给大家分享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() 是一个用于调试 JavaScript 程序的方法，它可以在控制台中输出一条指定的信息，并在信息前面加上一个时间戳。它通常用于在代码中添加一些额外的调试信息，以帮助开发人员更好地理解程序的执行过程。

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

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

3.console.assert() 断言判断

console.assert() 是一个用于在控制台中执行断言的方法，它可以检查一个表达式的值，如果该表达式的值为 true，则在控制台中输出一条信息；否则，它将在控制台中输出一条警告信息。它通常用于在代码中添加一些额外的验证信息，方便前端开发人员进行判断逻辑的调试。

当断言失败时（即当第一个参数为 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命令可以很方便地在控制台中显示表格。

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()会占用较多的内存，导致浏览器出现卡顿情况。