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