console.log 不够用，应优先使用 console.table()、console.group()、console.time()、console.assert() 等结构化调试方法，并结合断点调试、全局错误监听、console.dir 和 $0 等 dom 调试技巧。
console.log 不够用？先搞清它的替代方案
直接写 console.log 容易污染代码、漏删、掩盖真实执行路径。现代调试更依赖条件性、结构化和可追溯的输出方式。
-
console.table()适合查看数组或对象列表，比层层展开console.log更直观 -
console.group()和console.groupEnd()能折叠日志块，配合异步操作或循环时逻辑更清晰 -
console.time()/console.timeEnd()对比两段逻辑耗时，比手动记时间戳靠谱得多 -
console.assert(condition, msg)只在条件为false时输出，适合轻量级运行时断言
打断点比 console 更准：Chrome DevTools 的实用技巧
很多问题靠输出猜不到，比如变量被谁改了、异步回调没进、Promise 状态卡在哪——这时候必须进 Debugger。
- 在 Sources 面板里点击行号左侧设断点，支持条件断点：
event.target.id === 'submit-btn' -
debugger语句是硬编码断点，只在开发环境保留，上线前建议删掉或用构建工具移除 - 右键断点可设“仅当命中 N 次”或“仅当表达式为真”，避免在长循环里反复停住
- Watch 面板里加
this.state或response.data，比每次展开作用域更省力
捕获未处理错误和 Promise 拒绝
页面白屏、接口静默失败，往往不是逻辑错，而是异常没被捕获。控制台里看不到不代表没发生。
- 监听全局错误：
window.addEventListener('error', e => console.error('JS Error:', e.error)); - 捕获未处理 Promise 拒绝：
window.addEventListener('unhandledrejection', e => console.error('Unhandled Rejection:', e.reason)); - 注意：这些事件不会触发断点，但能帮你定位哪些地方忘了
.catch()或try/catch - Vue/React 项目中，这类错误可能被框架吞掉，务必开启
vue.config.js的devServer.overlay或 React 的React.StrictMode错误边界
console.dir 和 $0 在 DOM 调试中很关键
查元素绑定的事件、数据属性、原型链，console.log 只给快照，console.dir 才是实时可交互的对象树。
立即学习“Java免费学习笔记（深入）”；
- 选中页面元素后，在 Console 里直接输入
$0就是当前选中节点，$1是上一个，不用再document.querySelector -
console.dir($0)展开的是 DOM 对象本身（含方法、事件监听器），不是 HTML 字符串 -
getEventListeners($0)（Chrome 特有）能列出该元素所有绑定的事件，包括通过addEventListener添加的匿名函数 - 注意：
$0只在 Elements 面板选中元素后有效；刷新页面后失效，不能存成变量复用
Performance 面板看调用栈深度，或者用 chrome://inspect 连接移动端复现。 
