控制台输出是断点的有力搭档，应结合不同console方法区分信息类型、选用合适输出方式、在关键节点插入针对性日志，并用条件输出减少干扰。
控制台输出不是断点的替代品，而是它的有力搭档。它帮你快速验证假设、缩小问题范围，再配合断点深入细节，调试效率明显提升。
用不同 console 方法区分信息类型
别只用 console.log()。遇到报错优先看 console.error()，它带堆栈且在控制台中高亮红色；警告类逻辑问题用 console.warn()；调试中间状态可用 console.info() 或 console.debug()（需在控制台设置中启用 debug 级别）。这样一眼就能分辨信息性质，避免在一堆 log 里翻找关键线索。
结合变量结构选对输出方式
简单值直接 log 没问题，但对象或数组建议用 console.table()，能清晰展示字段和索引；DOM 元素别用 log，改用 console.dir()，才能看到完整的属性树和事件监听器；嵌套深的对象可加标签名，比如 console.log('user data:', user)，方便在控制台快速定位。
在断点前后插入针对性输出
不是每行都打 log，而是在关键节点加：函数入口打印参数、计算前打印原始数据、返回前打印结果。例如：
将一个或多个 UI 原型图、线框图、产品截图或设计稿转换为标准化、可直接交付的 PRD 风格文档，供产品、设计、前端和测试共同使用。适用于 Codex 需要分析 PC 网页、桌面端、移动端、响应式页面、独立弹窗、表单、表格、看板、数据大屏或多页面流程截图，还原页面结构与交互，强制套用固定文档模板，抽取跨页面共享规则，或把一组原型沉淀为单页规范文档加整体业务流程文档的场景。不适用于纯视觉审美点评、代码实现、接口设计、埋点方案、竞品分析或无 UI 输入的业务需求创作。
立即学习“前端免费学习笔记（深入）”；
- fetchUser() 开头：console.log('fetching user id:', id)
- then 回调里：console.log('raw response:', res)
- 处理后：console.log('parsed user:', parsed)
这样配合断点，你既能宏观看流程走向，又能微观查某次执行的具体值。
用条件输出减少干扰
循环或高频调用中，盲目 log 会刷屏。可在代码里加判断，比如 if (i === 5) console.log('at index 5:', item)；或者用 console.count('render') 统计某段逻辑执行次数；甚至用 console.group() 和 console.groupEnd() 把相关日志折叠起来，保持控制台清爽。
