console.log() 可能是是前端调试中最常用的一种调试方法了
但是除了log(),方法之外,console还有很多其他强大有用的功能
assert();
console.assert(f, msg);// assert,断言,接收两个参数, f是一个断言表达式,返回boolean类型,当且仅当f返回false,才会输出第二个参数, 否则第二个参数不会被输出。常用调试数据是否与预期一致。
clear();
console.clear();// 用于清除控制台输出,但是这个基本没用
count();
console.count();//用于记录被调用的次数
error();
console.error();// 这个没的说,主要是用于输出错误,一方面更醒目,另一方面会显示错误堆栈
group(); groupEnd();
console.group();// 顾名思义,用于将输出的信息分组;与console.groupEnd();成对使用console.group('outer'); console.group('inner'); console.log('inner infos'); console.groupEnd();console.groupEnd();
groupCollapsed();
console.groupCollapsed();//从方法名上可以看出该方法的含义是:分组折叠console.groupCollapsed('outer'); console.groupCollapsed('inner'); console.log('inner infos'); console.groupEnd();console.groupEnd();
info();
console.info(); // 等同于console.log();
table();
console.table();// 输出复合型数据,展示样式类似md风格tableconst data = [ {name: 'tom', age: 18}, {name: 'jerry', age: 18}, {name: 'li lei', age: 18}, {name: 'han meimei', age: 18}]console.table(data)
time(); timeEnd();
console.time(); // 与console.timeEnd();成对出现,中间为要执行的代码,输出中间代码块的执行时间console.time();const list = [];for (let i in 1000) { list.push(i)};console.timeEnd();
trace();
console.trace(); // 查看函数调用栈function a(param) { return b(param)}function b(param) { return c(param)}function c(param) { console.trace(); return param;}a(123)
warn();
console.warn(); // 顾名思义,输出警告信息 如:console.warn('这是个警告信息')
除了上边的方法,console对象还支持printf占位符
占位符 | 用途 |
%s | (string) 指代字符串 |
%d / %i | 整数 |
%f | 浮点数 |
%o | 可展开的DOM |
%O | 列出DOM属性 |
%c | 应用css样式输出console |
这里简单给大家做个有意思的示例(%c)
当然,console还有一些其他的方法,这里就不一一介绍了,有兴趣可以专门了解一下。