很多开发者会使用console.log()来调试JavaScript。不过，除了这个，console对象还为我们提供了其他的方法。 console也就是控制台对象提供对浏览器调试控制台的访问。不同的浏览器，其工作方式各不相同，但是通常会提供一组事实上的功能。
最常见的控制台方法
- console.log(): 用于日志信息的常规输出
- console.info(): 信息记录
- console.debug(): 使用日志级别调试将消息输出到控制台
- console.warn(): 输出警告消息
- console.error(): 输入错误消息
自定义console.log()的CSS样式
console.log输出可以使用CSS格式说明DevTools样式
console.log('%c 这个消息的样式变了', 'color: white; font-size: 2em; background: teal');
字符串转换
%s- string
%i或%d- integer
%o或%0- object
%f-float
for (let i = 0; i <= 3; i++) {
console.log('你好%s,我给你打了 %d次招呼。', '吴阳', i+1);
}
console.assert()
如果第一个参数为 false，则在控制台输出信息。
console.assert(document.getElementById("demo"), "没有 ID 为 'demo' 的元素");
console.count()
记录 count() 调用次数，并输出到控制台。
可以添加标签。console.count() 每次调用，如果标签一样数字会增加 1，如果不一样则重新开始计数。
for (i = 0; i < 10; i++) {
if(i%2) {
console.count('odd');
} else {
console.count('even');
}
}
console.dir()
在控制台中显示指定JavaScript对象的属性，并通过类似文件树样式的交互列表显示。(🧐注：该特性是非标准的，请尽量不要在生产环境中使用它！)
const people = {
name: '吴阳',
handle: '@wuyang'
}
console.dir(people);
console.group() 和 console.groupEnd()
创建一个新的内联 group, 后续所有打印内容将会以子层级的形式展示。调用 groupEnd()来闭合组。
console.group(label)
label是可选的，用来给信息分组设置标签。
console.log("Runoob");
console.group("label1");
console.log("我在label1分组里。");
console.group('label2');
console.log("我在label2分组里。");
console.groupEnd();
console.groupCollapsed('label3');
console.log("我在label3分组里。这个分组现在是折叠的");
console.groupEnd();
console.log("我在label1分组里。");
console.groupEnd();
console.table()
console.table() 会把所有元素罗列在每一列，你可以使用 columns 参数选择要显示的列的子集：
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
var john = new Person("John", "Smith");
var jane = new Person("Jane", "Doe");
var emily = new Person("Emily", "Jones");
console.table([john, jane, emily], ["firstName"]);
先就这些😁。
