浏览器控制台调试实用方法

许多程序员仅知道控制台的console.log，其实控制台API还包含一些其他实用方法，

这些方法在前端调试时会很有帮助。

目录

console.dir

查看对象属性和方法

输出DOM元素

 console.error

console.time和console.timeEnd

console.log

console.clear

 总结

---

console.dir

查看对象属性和方法

如果要查看所有对象的属性和方法，可以使用console.dir方法，直接将它们打印到控制台上。

代码示例：

<script src="./swiper-bundle.min.js"></script>
<script>
    var mySwiper = new Swiper ('.swiper', {
        loop: true, // 循环模式选项

        // 分页器bootstrap.min.css
        pagination: {
            el: '.swiper-pagination',
        },

        // 前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    })

    console.dir(mySwiper);
</script>

效果：

输出DOM元素

还可以输出DOM元素。

 console.error

代码示例：

let flag = false
if (!flag) {
    console.error('似乎有什么错误！')
}
// 一切正常

console.error的好处是还可以提供栈追踪。

console.time和console.timeEnd

可以用来跟踪函数调用所消耗的时间，这对优化代码有一定帮助。

代码示例：

console.time();
let num = 0;
for (let i= 0; i < 100000000; i++) {
    num += i;
}
console.timeEnd()

跟踪代码执行消耗时间。

效果：

console.log

打印对象。在JavaScript中，所有的对象都拥有toString方法。当将一个对象传递给console.log时，它可以将其作为对象或字符串进行打印。

代码示例：

console.log(new Array())
console.log(typeof (new Array()))
console.log('1111')
console.log(typeof '1111')
console.log(1111)
console.log(typeof 1111)

效果：

console.clear

清空控制台，可以把之前的调试打信息清空掉。

代码示例：

console.time();
let num = 0;
for (let i= 0; i < 100000000; i++) {
    num += i;
}
console.timeEnd()

console.log(num)

console.clear();

效果：

 总结

开始说的很多程序员只知道console.log，我就属于这种的只知道console.log；

最近在看JavaScript手册，才知道还有其他调试方法，自己试了试感觉之后开发调试前端回很有帮助。