JavaScript调试技巧大全 - 快速解决常见代码问题

利用浏览器开发者工具查看错误信息

打开 Chrome 或 Firefox 的开发者工具，切换到“Console”面板，JavaScript 运行时的语法错误、引用未定义变量等问题会直接显示出来。比如你写了个 console.log(user.name)，但 user 是 undefined，控制台会明确告诉你哪里出错了。

点击错误信息还能跳转到对应的代码行，省得自己一行行找。

使用 console.log 调试是最直接的方式

虽然看起来土，但在关键位置加 console.log 输出变量值，是最快了解程序运行状态的方法。比如处理数组时不确定过滤结果是否正确：

const users = [{ name: 'Alice', age: 25 }, { name: 'Bob', age: 30 }];
const youngUsers = users.filter(u => u.age < 30);
console.log('筛选后的用户:', youngUsers);

这样一眼就能看出数据对不对。

进阶一点：用 console.table 查看对象数组

当输出的是多个对象组成的数组，console.table() 比普通 log 更清晰。它会以表格形式展示，字段对齐，看得更舒服。

console.table(users);

设置断点让代码暂停执行

在 Sources 面板里找到你的 JS 文件，点击行号可以设置断点。刷新页面，代码运行到那一行就会暂停。这时候你可以查看当前作用域里的变量值，一步步按 F10 单步执行，观察逻辑走向。

比如一个函数返回了意外的结果，你可以在函数内部设断点，看看每一步的计算是不是符合预期。

善用 debugger 关键字

不想手动点断点？直接在代码里写 debugger;。只要这行被执行，浏览器就会自动停下。

function calculatePrice(base, tax) {
    debugger;
    return base + (base * tax);
}

上线前记得删掉，不然用户打开网页可能会卡住。

检查网络请求是否成功

前端很多 bug 其实是接口返回的数据不对。在 Network 面板里看 xhr 或 fetch 请求的状态码、响应内容。比如你发现页面没显示数据，进去一看 response 是空的，或者 status 是 404，那问题就不在 JS 逻辑，而是后端接口没接好。

注意异步代码的执行顺序

很多人在 setTimeout 或 Promise 里打 log 发现顺序不对就懵了。记住：异步操作不会阻塞主线程。

console.log('第一步');
fetch('/api/data').then(res => res.json()).then(data => {
    console.log('第三步');
});
console.log('第二步');

实际输出是“第一步 → 第二步 → 第三步”。如果搞不清这个，调试时容易误判流程。

用 try-catch 捕获潜在异常

有些操作可能出错，比如 JSON 解析。加上 try-catch 能防止整个页面崩溃，也能帮你定位问题。

try {
    const data = JSON.parse(responseText);
} catch (e) {
    console.error('解析失败：', e.message);
}

错误信息会出现在控制台，方便排查原始数据格式是否有问题。

别忘了检查变量类型

JavaScript 动态类型容易踩坑。比如你用 == 判断，看似相等却因类型不同导致逻辑错误。可以用 typeof 或 === 来避免。

遇到奇怪的判断失效，不妨打印一下 typeof yourVar，说不定发现本该是数字的变量其实是字符串。

JavaScript调试技巧：快速定位和修复代码问题