Hello，大家好，我是 Sunday。

在日常開(kāi)發(fā)中，大多數(shù)同學(xué)都會(huì)通過(guò) console.log 的方式來(lái)進(jìn)行代碼調(diào)試。但是 console.log 是具備很多局限性的，比如：我們想要獲取某段代碼的執(zhí)行耗時(shí)，通過(guò) console.log 就無(wú)法滿(mǎn)足需求。

那么怎么辦呢？其實(shí)對(duì)于 console 對(duì)象來(lái)說(shuō)，除了 log 方法它還提供了很多其他的方法幫助我們進(jìn)行調(diào)試，利用這些方法可以極大地提升我們的工作效率~~

01：console.table

使用 console.table 可視化復(fù)雜的對(duì)象和數(shù)組：

const myData = [
  { name: "程序員Sunday", age: 30 },
  { name: "Sunday", age: 25 }
];
console.table(myData);

打印結(jié)果如下：

圖片

02：console.trace

使用 console.trace 可以明確函數(shù)的調(diào)用邏輯關(guān)系：

function fn() {
  function test() {
    console.trace("這是一個(gè)利用trace的測(cè)試打印"); 
  }
  test();
}
fn();

打印結(jié)果如下：

圖片

03：console.time && console.timeEnd

使用 console.time && console.timeEnd 來(lái)記錄代碼的執(zhí)行耗時(shí)：

console.time('js 耗時(shí)')
const vNodes = []
for (let i = 0; i < 10000; i++) {
  const vNode = {
    type: 'div'
  }
  vNodes.push(vNode)
}
console.timeEnd('js 耗時(shí)')

打印結(jié)果如下：

圖片

04：console.assert

使用 console.assert 斷言你的判斷邏輯。

如果斷言為假，它拋出一個(gè)你指定的錯(cuò)誤：

const myArray = []
console.assert(myArray.length > 0, "myArray 是空的!");

打印結(jié)果如下：

圖片

05：console.clear

在很多時(shí)候，我們的控制臺(tái)可能會(huì)打印非常多的內(nèi)容。所以，可以讓代碼在執(zhí)行到某一個(gè)特定的時(shí)機(jī)時(shí)，利用 console.clear() 清空控制臺(tái)

console.clear()

執(zhí)行之后會(huì)打印這個(gè)：

圖片

06：console.error

使用 console.error 直接打印一個(gè)錯(cuò)誤級(jí)別的描述：

console.error('錯(cuò)誤信息')

打印結(jié)果如下：

圖片