大家好，很高兴又见面了，我是"前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！
前端进阶
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();
/* 输出结果：
VM70:2 Hello
inner @ VM70:2
outer @ VM70:3
(anonymous) @ VM70:5
*/ 3.console.assert()
当断言失败时（即当第一个参数为 false 时），console.assert() 提供了一种方便的方法来简单地将某些内容记录为错误并在所有其他情况下忽略它。
const value = 10;
console.assert(value === 10, 'Value is not 10!');
// 什么也不输出
console.assert(value === 20, 'Value is not 20!');
// 打印 "Value is not 20!" 4.console.count()
可以使用 console.count() 来统计一段代码被执行了多少次。
Array.from({ length: 4 }).forEach(
() => console.count('items')
// 调用名称为items的counter
/*
items: 1
items: 2
items: 3
items: 4
*/
console.countReset('items');
//重置 名称为 'items'的counter 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(["apples", "oranges", "bananas"]);
// 输出
| Index | Values |
|-------|-----------|
| 0 | 'apples' |
| 1 | 'oranges' |
| 2 | 'bananas' |
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.clear()
用于清除控制台。
11.console.memory
console.memory 是 console 对象的一个属性，而不是一个方法。它可以用来查看当前内存的使用情况，如果使用过多的 console.log()会占用较多的内存，导致浏览器出现卡顿情况。
12.console.dir()
console.dir()方法可以在控制台中显示指定 JavaScript 对象的属性，并通过类似文件树样式的交互列表显示。它的语法如下：
console.dir(object);
它的参数是一个对象，最终会打印出该对象所有的属性和属性值。 在多数情况下，使用 console.dir()和使用 console.log()的效果是一样的。但是当打印元素结构时，就会有很大的差异了，console.dir()打印的是元素的属性：
13.console.dirxml()
console.dirxml()方法用于显示一个明确的 XML/HTML 元素的包括所有后代元素的交互树。 如果无法作为一个 element 被显示，就会以 JavaScript 对象的形式显示。
console.dirxml(object); 该方法会打印输出 XML 元素及其所以后代元素，对于 XML 和 HTML 元素对象，调用 console.log()和 console.dirxml()是等价的。
14.本文总结
本文主要和大家介绍Console.log的13个小技巧，同时提供了不同的使用案例。文末的参考资料提供了大量优秀文档以供学习，如果有兴趣可以自行阅读。如果大家有什么疑问欢迎在评论区留言。
参考资料
https://www.sciredev.com/blog/the-best-consolelog()-tips-and-tricks
https://www.30secondsofcode.org/articles/s/console-log-cheatsheet
https://itnext.io/10-console-tricks-to-debug-like-a-pro-66ee2225ec57
https://xie.infoq.cn/article/9101a40d8bac6c66af40785f6