掌握Console与断点调试是提升JS问题排查效率的关键。使用console.log()、error()、warn()、table()输出信息，通过Sources面板设置断点实现逐行调试，结合Step over/into/out控制执行流程，并利用条件断点和Watch表达式监控特定变量或条件变化，同时通过error和unhandledrejection事件捕获异常，快速定位并解决代码问题。
调试JavaScript代码是开发过程中必不可少的一环。掌握浏览器开发者工具中的Console和断点功能，能显著提升问题排查效率。下面介绍常用且实用的调试方法。
使用Console输出信息
Console是JS调试中最基础也最常用的工具，用于输出变量值、函数执行状态或错误提示。
- console.log()：打印普通信息，支持输出变量、对象、数组等
- console.error()：输出错误信息，显示为红色，便于识别问题
- console.warn()：输出警告信息，以黄色标识
- console.table()：将数组或对象以表格形式展示，结构清晰
例如，调试一个用户列表：
const users = [{name: 'Alice', age: 25}, {name: 'Bob', age: 30}];console.table(users);
在控制台中会以表格形式呈现数据，方便查看字段内容。
设置断点进行逐行调试
断点能暂停代码执行，让你检查当前上下文中的变量状态和调用栈。
- 打开开发者工具（F12 或右键“检查”），切换到Sources（Chrome）或Debugger（Firefox）面板
- 找到对应的JS文件，在行号左侧点击即可添加断点
- 刷新页面或触发对应操作，代码执行到该行时会自动暂停
断点生效后，可使用顶部的控制按钮：
- ▶️ Resume：继续执行直到下一个断点
- ⏭️ Step over：逐行执行，不进入函数内部
- ⤵️ Step into：进入函数内部逐行调试
- ⤴️ Step out：跳出当前函数
同时可在右侧查看Scope中的变量值，以及Call Stack的函数调用顺序。
利用条件断点与监听表达式
并非所有断点都需要每次触发。条件断点只在满足特定条件时暂停。
- 右键行号 -> Add conditional breakpoint
- 输入判断条件，如 i === 10，仅当循环到第10次时中断
还可以使用Watch面板，添加需要实时监控的表达式，比如跟踪某个对象属性的变化：
user.profile.name每当该值改变，Watch列表会自动更新其当前值。
捕获异常与堆栈追踪
遇到报错时，Console会显示错误类型、消息和出错文件行号。点击错误信息可直接跳转到对应代码位置。
未捕获的异常可通过以下方式监听：
window.addEventListener('error', (e) => {console.log('全局错误:', e.message);
});
对于Promise异常，建议监听：
window.addEventListener('unhandledrejection', (event) => {console.log('未处理的Promise拒绝:', event.reason);
});
基本上就这些。熟练使用Console输出和断点调试，配合作用域查看与表达式监听，就能快速定位大多数JS问题。关键是在实际开发中多练习，形成调试直觉。不复杂但容易忽略细节，比如条件断点和watch表达式，用好了能省下大量时间。
