調(diào)試只會console.log?來看一看這六種驚艷的調(diào)試技巧!
Hello,大家好,我是 Sunday。
在日常開發(fā)中,大多數(shù)同學(xué)都會通過 console.log 的方式來進(jìn)行代碼調(diào)試。但是 console.log 是具備很多局限性的,比如:我們想要獲取某段代碼的執(zhí)行耗時,通過 console.log 就無法滿足需求。
那么怎么辦呢?其實對于 console 對象來說,除了 log 方法它還提供了很多其他的方法幫助我們進(jìn)行調(diào)試,利用這些方法可以極大地提升我們的工作效率~~
01:console.table
使用 console.table 可視化復(fù)雜的對象和數(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("這是一個利用trace的測試打印");
}
test();
}
fn();
打印結(jié)果如下:
圖片
03:console.time && console.timeEnd
使用 console.time && console.timeEnd 來記錄代碼的執(zhí)行耗時:
console.time('js 耗時')
const vNodes = []
for (let i = 0; i < 10000; i++) {
const vNode = {
type: 'div'
}
vNodes.push(vNode)
}
console.timeEnd('js 耗時')
打印結(jié)果如下:
圖片
04:console.assert
使用 console.assert 斷言你的判斷邏輯。
如果斷言為假,它拋出一個你指定的錯誤:
const myArray = []
console.assert(myArray.length > 0, "myArray 是空的!");
打印結(jié)果如下:
圖片
05:console.clear
在很多時候,我們的控制臺可能會打印非常多的內(nèi)容。所以,可以讓代碼在執(zhí)行到某一個特定的時機時,利用 console.clear() 清空控制臺
console.clear()
執(zhí)行之后會打印這個:
圖片
06:console.error
使用 console.error 直接打印一個錯誤級別的描述:
console.error('錯誤信息')
打印結(jié)果如下: