拋棄 console.log，五個(gè)調(diào)試技巧讓 Bug 無處可逃
作者：story
雖然 console.log 簡單直接，但在處理復(fù)雜問題時(shí)往往效率低下。分享五個(gè)強(qiáng)大的調(diào)試技巧，幫助你更快速地找出并解決問題。
雖然 console.log 簡單直接，但在處理復(fù)雜問題時(shí)往往效率低下。分享 5 個(gè)強(qiáng)大的調(diào)試技巧，幫助你更快速地找出并解決問題。
1. 善用 debugger 斷點(diǎn)
比起插入大量 console.log，設(shè)置斷點(diǎn)能讓我們更清晰地了解代碼執(zhí)行過程。
(1) 基礎(chǔ)斷點(diǎn)使用
function calculateTotal(items) {
debugger; // 代碼會(huì)在這里暫停執(zhí)行
let total = 0;
for (const item of items) {
total += item.price * item.quantity;
}
return total;
}
// 調(diào)用函數(shù)
const cart = [
{ name: 'T恤', price: 99, quantity: 2 },
{ name: '鞋子', price: 299, quantity: 1 }
];
calculateTotal(cart);(2) 條件斷點(diǎn)
在 Chrome DevTools 中，右鍵點(diǎn)擊行號，選擇"Add conditional breakpoint"：
function processUsers(users) {
users.forEach((user, index) => {
// 當(dāng)處理第5個(gè)用戶時(shí)暫停
// 在 DevTools 中設(shè)置條件：index === 4
processUserData(user);
});
}2. console 的高級用法
雖然要避免過度使用 console.log，但 console 家族還有許多強(qiáng)大的工具。
(1) console.table
完美展示數(shù)組和對象數(shù)據(jù)：
const users = [
{ id: 1, name: '張三', age: 28 },
{ id: 2, name: '李四', age: 32 },
{ id: 3, name: '王五', age: 25 }
];
// 以表格形式展示數(shù)據(jù)
console.table(users);
// 只顯示特定列
console.table(users, ['name', 'age']);(2) console.trace
查看函數(shù)調(diào)用棧：
function function1() {
function2();
}
function function2() {
function3();
}
function function3() {
console.trace('函數(shù)調(diào)用追蹤');
}
function1();(3) 使用時(shí)間追蹤性能
console.time('數(shù)據(jù)處理');
const data = someExpensiveOperation();
processData(data);
console.timeEnd('數(shù)據(jù)處理');3. Source Map 調(diào)試生產(chǎn)代碼
在生產(chǎn)環(huán)境中調(diào)試壓縮后的代碼是一場噩夢。使用 Source Map 可以將壓縮代碼映射回原始源碼。
- Webpack 配置
- 使用 Source Map 調(diào)試
即使代碼被壓縮，你仍然可以在瀏覽器中看到原始代碼并設(shè)置斷點(diǎn)。
4. 異步調(diào)試技巧
異步代碼的調(diào)試往往最讓人頭疼。以下是一些實(shí)用技巧：
- Async/Await 斷點(diǎn)調(diào)試
- Promise 鏈調(diào)試
5. 性能調(diào)試工具
- Performance 面板使用
- 內(nèi)存泄漏調(diào)試
責(zé)任編輯：趙寧寧
來源：
JavaScript
