可能还有你不知道的 JavaScript 控制台方法
无论你是 Web 开发的初学者，还是经验丰富的开发人员，你都可能会发现还有你不知道的 JavaScript 控制台方法。
控制台日志
打印内容
我们都知道使用 console.log() 方法输出日志到浏览器控制台，log() 方法是控制台对象的基础：
const hello = "Hello World!";
console.log(hello);
// Hello World!占位符输出：
- • %s 字符串
- • %d 整数
- • %f 浮点数
- • %o 对象的连接
- • %c css 格式字符串
const currentDate = new Date();
const formattedDate = new Intl.DateTimeFormat("zh-CM").format(currentDate);
console.log("Today's date is %s", formattedDate);
// Today's date is: 11/29/2023打印断言
console.assert( [,arg1, arg2……argn]) 第一个参数是用来判断是否打印断言的表达式，只有当表达式的值为false的时候，才会打印后续的参数：
const arr = [1, 2, 3];
// 打印断言，如果arr[0]的值不等于2，则打印提示信息
console.assert(arr[0] === 2, 'arr[0]的值不等于2');
级别日志
可以输出不同级别的日志：console.info()、console.warn()、console.error()，效果与类似 console.log()，但输出格式不同（取决于浏览器），通常可以通过日志记录级别过滤输出。
console.info("这是一个信息日志！");
// 这是一个信息日志！
console.warn("这是一个警告日志！");
// ⚠️ 这是一个警告日志！
console.error("这是一个错误日志！");
// 🛑 这是一个错误日志！显示表格
console.table() 它可以接受 JSON 或数组并以表格格式打印，在对 JSON 对象和数组进行可视化打印的时候简单易用，结果直观。
const dogs = [
{ name: "Yoshi", color: "Black", personality: "Calm" },
{ name: "Melanie", color: "Brown", personality: "Hyperactive" },
{ name: "Peppers", color: "white", personality: "Unpredictable" },
];
console.table(dogs);
计数器
console.count() 向控制台写入在同一行使用相同标签调用 count() 的次数。 就是如果你给count()传递的参数值不一样，那么是分开计数的。
for (let i = 0; i < 10; i++) {
console.count('我被调用了');
}
for (let i = 0; i < 10; i++) {
console.count(`我是${i}我被调用了`);
}
function fun (name) {
console.count(name)
}
fun('小王');
fun('小刚');
fun('小王');定时器
console.time() 方法是作为计算器的起始方法，该方法一般用于测试程序执行的时长。
console.timeLog() 当你需要中间计时器值以及诸如变量或对象值之类的额外信息时。
console.timeEnd() 方法为计算器的结束方法，并将执行时长显示在控制台。
每一个计时器必须拥有唯一的名字，time()的参数名和timeEnd()的参数名要一样。
如果一个页面有多个地方需要使用到计算器，可以添加标签参数来设置。
// 启动计时器
console.time();
for (i = 0; i < 100000; i++) {
// 代码部分
}
// 结束计时器
console.timeEnd();指定对象
console.dir() 输出以 JavaScript 形式表示的指定对象。
const obj = {
name: '某某渣',
age: 22,
sex: '男'
}
console.dir(obj);如果正在记录的对象是 HTML 元素，将输出其以 DOM 形式表示的属性。
日志分组
console.group() 方法用于设置分组信息的起始位置，该位置之后的所有信息将写入分组。
- • 使用
console.groupEnd()方法来结束当前的分组。 - • 使用
console.groupCollapsed()方法来隐藏分组信息。
console.group("Grouped Logs");
console.log("Log 1");
console.log("Log 2");
console.groupEnd();
// Grouped Logs
// Log 1
// Log 2
console.groupCollapsed("Collapsed Group");
console.log("Log 3");
console.log("Log 4");
console.groupEnd();
// > Collapsed Group创建痕迹
console.trace() 是一个很好的调试错误的办法，用于显示当前执行的代码在堆栈中的调用路径。可以查看函数在哪一些地方做了调用，同时也可以看一下一个变量在哪里做修改，具体怎么使用，可以配合watch方法的使用。
watch:{
'headerData':{
handler(newVal,oldVal){
console.trace()
}
}
}性能分析器
console.profile() 和 console.profileEnd() 新建一个性能分析器(基于cpu的使用情况)，用于函数性能分析的利器。
用法和time的一样，console.profile()开始，console.profileEnd()结束，需要传递一个参数作为标签使用，说俗了点就是为这个性能分析器起个名字。看下如下代码，我们测试几种不同for循环书写方式的耗时情况：
// 简单新建一个数组吧，新建一个一千万个成员为1的数组
let arr = new Array(10000000).fill(1);
// 第一种for循环书写方式
function fun1 () {
for (let i = 0, len = arr.length; i < len; i++) {}
}
// 第二种for循环书写方式
function fun2 () {
for (let i = arr.length; i --; ) {}
fun1();
}
// 第三种for循环书写方式
function fun3 () {
for (let i = 0, item; item = arr[i++]; ) {}
}
// 执行三个函数
function fun () {
fun1();
fun2();
fun3();
}
// 立即开始一个性能分析器
console.profile('测试for循环');
fun();
console.profileEnd('测试for循环');清除控制台
console.clear() 是一个用于清除浏览器控制台（Console）中所有输出信息的方法。执行这个方法后，控制台的输出会被清空，光标会回到第一行。这个方法对于想要清理控制台以便查看新的输出信息或者调试信息非常有用。需要注意的是，console.clear() 不会影响网页的实际内容，它只影响浏览器的控制台窗口。
console.clear();