console.log()需加标识前缀并避免遗留生产环境；优先用console.table()展示结构化数据；用console.group()收拢多步骤日志；console.warn()/error()具过滤与堆栈追踪能力，error可跳转源码。
console.log() 是最常用但容易被滥用的调试方式
它能快速输出变量值，但直接写 console.log() 而不加标识，在多人协作或长期维护时会难以定位来源。尤其在循环或事件回调中频繁调用，控制台刷屏后反而找不到关键信息。
实操建议：
- 给输出加前缀，比如
console.log('[userModule]', user)，方便搜索和过滤 - 避免在生产环境保留未删的
console.log()，可用构建工具（如 Webpack 的drop_console）自动移除 - 不要用
console.log()输出 DOM 元素后还试图读取其.innerHTML—— 控制台显示的是实时引用，展开时看到的可能是后续修改后的状态
用 console.table() 查看对象数组更直观
当调试接口返回的用户列表、配置项集合等结构化数据时，console.table() 比 console.log() 更易读。它自动提取对象的公共 key 生成表格，支持点击列头排序。
注意点：
- 只对数组或键名一致的对象有效；混合结构（如
[{id:1}, {name:'a', age:20}]）会显示空表 - 第二个参数可指定要显示的字段，例如
console.table(users, ['id', 'email']) - 不支持嵌套对象展开，深层属性仍需手动点开查看
console.group() 和 console.groupEnd() 控制输出层级
处理多步骤逻辑（如登录流程：校验 → 请求 → 存储 → 跳转）时，用 console.group() 把相关日志收拢，避免信息散乱。
常见误用：
- 忘记配对调用
console.groupEnd()，导致后续所有console.log()都被缩进，甚至影响其他模块输出 - 在异步回调里使用时，因执行时机不确定，分组可能错位。建议搭配
console.groupCollapsed()默认收起，减少干扰 - Chrome 支持
console.group('%c%s', 'color:red', 'ERROR')带样式，但 Firefox 不支持 %c，跨浏览器调试慎用
console.warn() 和 console.error() 触发真实警告/错误级别
它们不只是换颜色——console.warn() 会被浏览器开发者工具的「Warnings」过滤器捕获，console.error() 甚至能触发 sourcemap 解析和堆栈追踪，比普通 log 更适合标记异常路径。
关键区别：
-
console.error()输出的内容在 Chrome 中点击可跳转到源码行，console.log()不行 - 部分监控 SDK（如 Sentry）默认只捕获
console.error()，不监听console.warn() - 不要用
console.error(new Error('msg'))替代throw new Error()，前者不中断执行，也不进入 catch 流程
console 语句会在条件分支里悄悄执行，哪怕那段代码本不该运行——比如写在 if (false) { console.log('x') } 里，看着不会触发，但如果未来改成 if (flag)，就突然开始输出了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
