在日常开发中，大多数同学都会通过 console.log 的方式来进行代码调试。但是 console.log 是具备很多局限性的，比如：我们想要获取某段代码的执行耗时，通过 console.log 就无法满足需求。
打印不同级别信息
log、info、warn、error、debug
// 打印内容的通用方法
console.log('普通信息')
// 打印一条资讯类说明信息
console.info('资讯类说明信息')
// 打印一条警告信息
console.warn('警告信息')
// 打印一条错误信息
console.error('错误信息')
// 打印一条 debug 级别的消息。控制台配置为显示调试输出时才显示该消息
console.debug('调试信息')
console.table
使用 console.table 可视化复杂的对象和数组：
const myData = [
{ name: "程序员Sunday", age: 30 },
{ name: "Sunday", age: 25 }
];
console.table(myData);
console.trace
通过 console.trace 可以追踪函数的调用路径。这么说起来很抽象，简单来讲就是，把 console.trace() 放在一个方法中，一旦 console.trace() 被调用了，那么就会输出从一开始到 console.trace() 的所有方法的执行路径。
function fn() {
function test() {
console.trace("这是一个利用trace的测试打印");
}
test();
}
fn();
console.time && console.timeEnd
使用 console.time && console.timeEnd 来记录代码的执行耗时：
console.time('js 耗时')
const vNodes = []
for (let i = 0; i < 10000; i++) {
const vNode = {
type: 'div'
}
vNodes.push(vNode)
}
console.timeEnd('js 耗时')
timeLog() 方法记录使用 time() 启动的定时器的当前值。通过该方法，可以记录代码执行过程中的中间值或检查点。
console.time('Timer');
// Code execution
console.timeLog('Timer', 'Checkpoint 1');
// More code execution
console.timeLog('Timer', 'Checkpoint 2');
console.timeEnd('Timer');
console.assert
使用 console.assert 断言你的判断逻辑。如果断言为假，它抛出一个你指定的错误：
const myArray = []
console.assert(myArray.length > 0, "myArray 是空的!");
console.clear
在很多时候，我们的控制台可能会打印非常多的内容。所以，可以让代码在执行到某一个特定的时机时，利用 console.clear() 清空控制台
console.clear()
给打印编组,折叠
可以使用嵌套组来把一组关联的打印合并。用 console.group() 可以创建新的嵌套块，用 console.groupCollapsed() 创建默认折叠的块。嵌套组需要通过 console.groupEnd() 闭合。
// 为了方便观察，我用缩进表示了层级
console.log('A1')
console.group()
console.log('B1')
console.info('B2')
console.group()
console.warn('C1')
console.warn('C2')
console.groupCollapsed()
console.error('D1')
console.error('D2')
console.groupEnd()
console.warn('C3')
console.groupEnd()
console.debug('B3')
console.info('B4')
console.groupEnd()
console.debug('A2')
样式占位符
JavaScript 支持的占位符：
- %s：字符串
- %d：整数
- %i：整数
- %f：浮点数
- %o：DOM 对象
- %O：JavaScript 对象
- %c：CSS 样式
其中的 %c 是 JavaScript 特有的，可以标记从该 %c 开始后续行的样式。
console.log(`欢迎加入我们的%c大家庭`, `font-size: 30px; font-weight: bold; color: #ef475d`)
console.log(
`欢迎加入我们的%c大家庭
%c啦啦啦
`,
`font-size: 30px; font-weight: bold; color: #ef475d`,
`font-size: 24px; font-weight: bold; color: cornflowerblue`
)
console.dir
dir() 方法可显示指定 JavaScript 对象的交互式属性列表。它提供了对象结构的详细视图，包括对象的属性及其值。
const person = { name: 'John Doe', age: 30 };
console.dir(person);
dirxml
dirxml() 方法在控制台中显示指定 JavaScript 对象的 XML 表示形式。该方法在处理 XML 数据或可表示为 XML 的对象时特别有用。
console.dirxml(document);
profile
profile() 方法会启动 JavaScript 剖析器。它会记录代码特定部分的性能曲线，以便分析和优化代码的执行。
console.profile('Profile');
// Code to profile
await new Promise(r => setTimeout(r, 1000));
console.profileEnd();
memory
memory 方法提供有关 JavaScript 代码内存使用情况的信息。它会显示当前的内存消耗情况，并允许您跟踪与内存相关的优化。
console.memory
count
count() 方法用于计算被调用的次数。当想跟踪特定事件或函数的发生情况时，该方法很有帮助。 countReset() 方法重置使用 count() 创建的特定标签的计数。通过该方法，可以重新启动特定事件或函数的计数。
console.count('Click'); // Logs "Click: 1"
console.count('Click'); // Logs "Click: 2"
//countReset
console.count('Click');
console.countReset('Click');
console.count('Click'); // Logs "Click: 1"
