只会用console.log吗？关于console 的一些用法介绍

console

这个我想各位前端大佬应该都不会陌生，一般大部分我想都会使用console.log，来打印出自己想看的数据，现在给大家介绍下 console 对象的其他用法，话不多说上代码，看图说话：

1、 console.log 与 console.info

console.log 与 console.info 用法是一样的

console.log("Hello World")
console.info("Hello World")

2、console.count

function fn(name) {
    console.count();
    console.log(name)
}

fn("hello");
fn("world");

console.count 会打印出函数的执行次数；
如果要计算出这个函数传入相同参数的执行次数可以：

function fn(name) {
    console.count();
    console.log(name)
}

fn("hello");
fn("world");
fn("hello");

3、console.warn

输出警告消息

function fn(name) {
    if (!name) {
        console.warn("没有传递参数")
    }
    console.log(name)
}

fn();

4、console.error

输出错误信息

function fn(name) {
	if (!name) {
        console.error("没有传递参数")
    }
    console.log(name)
}

fn();

5、console.table

这个主要用于输出数组或者对象

    const arr = [1, 2, 3, 4, 5, 6];

    const obj = {name: "韩梅梅", age: 18};

    const objArr = [
        {name: "韩梅梅", age: 18},
        {name: "李雷", age: 19}
    ];
    
    const arrObj = {
        name: ["韩梅梅", "李雷"],
        age: [18, 19]
    };

    console.log(arr);
    console.table(arr);
    console.table(obj);
    console.table(objArr);
    console.table(arrObj);

console.table 会将数组或对象的key与value以表格的形式列出来，这样更能直观的看到键值对应的关系

6、console.group、console.groupCollapsed 与 console.groupEnd

用于将显示的信息分组，可以把信息进行折叠和展开。

group 与 groupCollapsed 用法是一样的，唯一的区别就是 group 的分组默认是展开的，而 groupCollapsed 默认是折叠起来的

console.group("a");
console.group("b");
console.log("c");
console.group("d");
console.log("e");
console.groupEnd();
console.groupCollapsed("f");
console.groupEnd();
console.groupEnd();
console.groupEnd();
console.log("g");

<div>
    <div>
        
    </div>
</div>

7、console.time 与 console.timeEnd

console.time 开始计算代码运行时间
console.timeEnd 结束计算，输出运行时间

 	function fn(name) {
        console.log(name);
    }

    function fn2() {
        for (let i = 0; i < 1000000; i++) {

        }
    }

    console.time("fn函数计时");
    fn("Hello");
    console.timeEnd("fn函数计时");

    console.time("fn2函数计时");
    fn2();
    console.timeEnd("fn2函数计时");

8、console.clear

清除当前控制台的所有输出，将光标回置到第一行。

console.clear()

9、console.assert

ssert 方法接受两个参数，第一个参数是 boolean || 表达式 || 函数返回boolean，第二个参数是字符串。只有当第一个参数为 false，才会输出第二个参数，否则不会有任何结果。

 console.assert(1 === "1", "表达式不成立")

10、console.trace

追踪函数调用的栈信息过程

    function fn1() {
        fn2()
    }
    
    function fn2() {
        fn3()
    }
    
    function fn3() {
        console.trace("查看函数过程");
        console.log("结束")
    }
    
    fn1();