console 的常见用法
1.debug 打印调试信息,custom levels 需要勾选 Verbose
console.debug('debug');
2.log 普通打印
console.log('log');
3.info 信息,不同的浏览器 info 的样式可能不同的
console.info('info');
4.table 表格
console.table([ { value: 1, label: 'debug' }, { value: 2, label: 'log' }, { value: 3, label: 'info' }, ]);
5.group
label 作为组名,group 为分组开始,groupEnd 为分组结束,以 groupCollapsed 做分组开始,默认为折叠状态
const label = 'Package elephant'; console.group(label); // console.groupCollapsed(label); console.log('Package1'); console.log('Package2'); console.log('Package3'); console.log('Package4'); console.groupEnd(label);
6.dir 对象结构, 方便查看函数/对象的结构
console.dir(document.body);
7.计时,方便统计函数执行的时间
console.time('loop'); const start = Date.now(); while (Date.now() - start < 2000) {} console.timeEnd('loop');
8.计数,可以统计函数的执行次数
const start1 = Date.now(); while (Date.now() - start1 < 20) { console.count('loop'); } console.countReset('loop');
9.堆栈, 查找函数的调用层次
function b() { console.trace(); } function a() { b(); } a();
10.断言,可以用于简单的测试,错误时会输入信息,正确时不会有输出
function sum(a, b) { return a * b; } console.assert(sum(1, 2) === 3);
11.打印警告信息
console.warn('warn');
12.打印错误信息
console.error('error');
13.clear 清空消息
console.log(1); console.clear(); console.log(2);
14.自定义样式消息, 打印内容以 ’%c‘ 开始
const styles =
padding: 5px;
background-color: antiquewhite;
color: white;
font-size: 14px;
; console.log('%cstyle', styles);