Console的N种用法

Console的N种用法

打印调试信息

console.debug("Hello");

打印消息

普通消息

console.log("Hello");

信息

console.info("Hello");

表格

console.table([
    {
        first: 'Alex',
        last: 'Tom'
    },
	{
        first: 'Alixia',
        last: 'Jerry',
        info: '123243'
        
    },
    {
        first: 'Alia',
        last: 'Peter'
    }
]);

分组

const label = '分组名称';
console.group(label); # 默认分组是展开的
# console.groupCollapsed(label);  # 这个可以让分组不展开
console.log("Hello");
console.groupEnd(label);

对象结构

console.dir(document.body);

计时

console.time('loop');
const start = Date.now();
while (Date.now() - start < 2000){ 
    console.log("Hello");
}
console.timeEnd('loop');

计数

const start = Date.now();
while(Date.now() - start < 20){
    console.count('loop');
}
console.countReset('loop'); // 计数清零

堆栈

function b(){
    console.trace();
}
function a(){
    b();
}
a();

断言 (成功不显示信息，失败才显示)

function sum(a,b){
    return a+b;
}
console.assert(sum(1,2) === 3);

打印警告

console.warn("Hello");

打印错误

console.error("Hello");

清空消息

console.log(1);
console.clear(); # 清空消息
console.log(2);

给消息添加样式

const styles = `
padding: 5px;
background-color: #90442E;
color: white;
font-style: italic;
border: 5px solid #E06E3C;
font-size: 2em;`;
# 消息前加%c后面加样式变量
console.log('%c Hello World!',styles);