写ref="/tag/137/" style="color:#EB6E00;font-weight:bold;">JavaScript的时候，最头疼的不是写代码，而是代码跑不起来。页面点不动、数据出不来，浏览器还一脸无辜地显示空白。这时候别慌，学会调试，你就能像侦探一样，一步步揪出问题所在。
打开你的调试工具
几乎所有现代浏览器都自带开发者工具。在Chrome里，直接按F12，或者右键页面选择“检查”，就能看到一个新面板弹出来——这就是你的调试主战场。
这个面板里有很多标签页，先关注“Console”（控制台）和“Sources”（源文件）。控制台能直接告诉你哪里报错了，比如拼错函数名、括号没闭合，都会在这里亮红灯。
用console.log来“打桩”
最简单的调试方法，就是往代码里塞console.log()。它就像你在路上插的小旗子，告诉你程序有没有走到这一步，变量现在是什么值。
let username = '张三';
console.log('用户名是：', username);
if (username) {
console.log('用户已登录');
}
运行后去控制台看看，如果看到输出内容，说明代码执行到了那里。如果没有，那问题可能出现在前面。
别滥用alert
有人喜欢用alert()弹窗看变量，但弹一次就得点一次“确定”，体验很差。而console.log()不会打断流程，还能打印对象和数组，更适合调试。
设置断点，让代码暂停
想更深入地看代码运行过程？可以设断点。在Sources面板里找到你的JS文件，点击行号，就能在那里加个断点。刷新页面，代码运行到这一行就会自动暂停。
这时你可以把鼠标移到变量上，查看它的当前值。也可以用右边的“Scope”面板看所有变量。按F10可以单步执行，一行一行往下走，特别适合查逻辑错误。
function calculateTotal(price, tax) {
let total = price + tax;
return total * 1.1; // 假设这里算错了
}
console.log(calculateTotal(100, 10));
在return那行设个断点，你会发现total是110，再结合业务逻辑，就容易发现乘以1.1这步多余了。
读懂常见的错误提示
控制台里的红字别忽略。比如Uncaught TypeError: Cannot read property 'name' of undefined，意思是你要读一个undefined变量的name属性。通常是因为对象没正确初始化，或者异步请求还没回来就去取数据。
另一个常见的是is not a function，比如你写了myFunc()，但myFunc其实是个字符串或没定义。这时候回过头检查函数名拼写，或者是不是加载顺序有问题。
利用调试技巧解决实际问题
举个例子：你做个购物车，点了“添加”按钮没反应。先打开控制台，点一下按钮，看有没有报错。如果有，根据提示定位文件和行号；如果没有，就在按钮的点击事件函数里加console.log('按钮被点了')。
如果这句没输出，说明事件根本没绑定上，可能是DOM还没加载完就绑定了。这时候可以把代码放到window.onload里试试：
window.onload = function() {
document.getElementById('addBtn').addEventListener('click', function() {
console.log('按钮被点了');
// 添加商品逻辑
});
};
调试不是高手专属，而是每个写代码的人都会用的日常技能。多练几次，你会发现自己越来越快能找到问题根源，不再靠“猜”和“改完再刷”这种笨办法。