抛弃 console.log，5个调试技巧让 Bug 无处可逃

JavaScript , , , ,

虽然 console.log 简单直接，但在处理复杂问题时往往效率低下。分享 5 个强大的调试技巧，帮助你更快速地找出并解决问题。

1. 善用 debugger 断点

比起插入大量 console.log，设置断点能让我们更清晰地了解代码执行过程。

基础断点使用

function calculateTotal(items) {  
    debugger; // 代码会在这里暂停执行  
    let total = 0;  
      
    for (const item of items) {  
        total += item.price * item.quantity;  
    }  
      
    return total;  
}  
  
// 调用函数  
const cart = [  
    { name: 'T恤', price: 99, quantity: 2 },  
    { name: '鞋子', price: 299, quantity: 1 }  
];  
calculateTotal(cart);

条件断点

在 Chrome DevTools 中，右键点击行号，选择”Add conditional breakpoint”：

function processUsers(users) {  
    users.forEach((user, index) => {  
        // 当处理第5个用户时暂停  
        // 在 DevTools 中设置条件：index === 4  
        processUserData(user);  
    });  
}

2. console 的高级用法

虽然要避免过度使用 console.log ，但 console 家族还有许多强大的工具。

console.table

完美展示数组和对象数据：

const users = [  
    { id: 1, name: '张三', age: 28 },  
    { id: 2, name: '李四', age: 32 },  
    { id: 3, name: '王五', age: 25 }  
];  
  
// 以表格形式展示数据  
console.table(users);  
  
// 只显示特定列  
console.table(users, ['name', 'age']);

console.trace

查看函数调用栈：

function function1() {  
    function2();  
}  
  
function function2() {  
    function3();  
}  
  
function function3() {  
    console.trace('函数调用追踪');  
}  
  
function1();

使用时间追踪性能

console.time('数据处理');  
  
const data = someExpensiveOperation();  
processData(data);  
  
console.timeEnd('数据处理');

3. Source Map 调试生产代码

在生产环境中调试压缩后的代码是一场噩梦。使用 Source Map 可以将压缩代码映射回原始源码。

Webpack 配置

使用 Source Map 调试

即使代码被压缩，你仍然可以在浏览器中看到原始代码并设置断点。

4. 异步调试技巧

异步代码的调试往往最让人头疼。以下是一些实用技巧：

Async/Await 断点调试

Promise 链调试

5. 性能调试工具

Performance 面板使用

内存泄漏调试

欢迎补充。