不止 console.log！5 个高效调试技巧，让你秒变前端排错高手
在前端开发中，console.log 几乎是每个开发者的“第一调试工具”。它简单直接，却在复杂场景下显得力不从心。其实，浏览器和 JavaScript 本身已经为我们提供了更强大的调试方式。今天我来分享 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);
运行时浏览器会在 debugger 处暂停，你可以直接查看变量的值和堆栈情况。
条件断点
在 Chrome DevTools 中，右键点击行号 → Add conditional breakpoint，比如：
function processUsers(users) {
users.forEach((user, index) => {
// 在 DevTools 中设置条件：index === 4
processUserData(user);
});
}
只在满足条件时才中断，避免无意义的重复调试。
2. console 家族的高级用法
别只会 console.log，还有更好用的调试工具。
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']); // 只显示指定列
console.trace —— 调用栈定位
function a() { b(); }
function b() { c(); }
function c() { console.trace('调用栈'); }
a();
能直接看到函数的调用路径，快速定位调用链路。
console.time —— 性能分析
console.time('数据处理');
const data = someExpensiveOperation();
processData(data);
console.timeEnd('数据处理');
输出运行时间，方便比较不同实现的性能。
3. 使用 Source Map 调试生产环境
在生产环境中，代码通常会被压缩、混淆，调试起来非常痛苦。
启用 Source Map 后，即使发布到线上，你仍能在浏览器中看到原始代码：
// webpack.config.js
module.exports = {
devtool: 'source-map'
};
这样就能在生产环境中设置断点，定位问题更高效。
4. 异步调试的诀窍
异步代码常常让人摸不着头脑，以下技巧非常实用：
- Async/Await：设置断点时直接暂停在
await语句，避免一堆回调嵌套。 - Promise 链调试：配合
console.trace，快速分析回调链条。
Chrome DevTools 也支持 Async stack traces，能帮你追踪 Promise 的执行路径。
5. 性能 & 内存调试工具
有时 Bug 不在逻辑，而在性能。
- Performance 面板：分析页面运行时的 FPS、CPU 消耗。
- Memory 面板：检测内存泄漏，查看对象是否被意外持有。
这些工具比盲目打印日志更直观，尤其适合定位复杂的性能瓶颈。
总结
调试是一门技术活。学会用好 debugger、console 的高级功能、Source Map，以及浏览器的性能工具，你就能在排查问题时事半功倍。
👉 记住：调试的目标不是打印更多日志，而是更快找到问题的根源。