意想不到的前端调试技巧

相信大家和我一样，在进行浏览器调试的时候使用的最多的就是console.log()

有时候console.log()就不是很好用，比如我们要输出一个对象包含什么属性，难道用console.log()，一个个的进行打印输出吗？那样效率好像太低了。

1.console.table()，使用 console.table 可视化复杂的对象和数组

 const person = {
            name: '张三',
            age: 18,
            sex: '男'
        }
        function sayHello(person) {
            console.table(person)
            console.log(`你好，${person.name}，今年${person.age}岁，性别${person.sex}`)
        }

浏览器效果

2.console.trace()，使用 console.trace 可以明确函数的调用逻辑关系，输出当前的函数调用堆栈到控制台，这对于调试代码时查找函数调用路径很有帮助。

function func1() {
    func2();
}

function func2() {
    func3();
}

function func3() {
    console.trace();
}

func1();

浏览器效果

3.console.time && console.timeEnd

使用 console.time && console.timeEnd 来记录代码的执行耗时

// 开始计时
console.time('myTimer');

// 模拟一个耗时操作，比如一个循环
for (let i = 0; i < 1000000; i++) {
    // do something
}

// 结束计时并输出结果
console.timeEnd('myTimer');

4.console.assert()

console.assert()方法用于在代码中插入断言，如果表达式的结果为false，则会向控制台输出一条错误消息。

function divide(a, b) {
    console.assert(b !== 0, '除数不能为0');
    return a / b;
}

console.log("a / b = " + divide(10, 2));  // 输出：5
console.log("a / b = " + divide(10, 0));  // 由于断言失败，不会执行这一行，避免了除以0的错误

浏览器效果

5.console.clear

在很多时候，我们的控制台可能会打印非常多的内容。所以，可以让代码在执行到某一个特定的时机时，利用 console.clear() 清空控制台