許多程序員僅知道控制臺的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.csspagination: {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手冊，才知道還有其他調試方法，自己試了試感覺之后開發調試前端回很有幫助。