[!info] related notes

• 所属 MOC: 浏览器开发者工具 MOC
• 前置概念: 执行上下文, window 对象
• 并列概念: Sources 面板, Network 面板
• 易混淆概念: Elements 面板
• 关系笔记: 浏览器开发者工具

DevTools Console 面板

一句话定义

Console 面板是浏览器运行时日志窗口，也是一个可以直接执行 JavaScript 的 REPL。

核心内容

它最适合回答什么问题

• 程序有没有报错
• 某个变量当前值是什么
• 某个表达式会返回什么
• 某段代码是否真的执行到了

典型信息来源

• console.log / console.warn / console.error
• 浏览器运行时异常
• Promise rejection
• 手动输入表达式后的执行结果

常见使用场景

• 点击无反应，先看是否报错
• 验证全局变量、DOM 选择结果、接口响应挂载结果
• 临时调用函数、改对象值、触发某段逻辑
• 结合 Preserve log 观察页面跳转或刷新前后的日志链路

常用技巧

• 用 $0 引用当前在 Elements 中选中的节点
• 用 console.table 快速看结构化数据
• 按级别过滤日志，减少噪音
• 配合 source link 跳回源码位置

边界与易混淆点

• Console 有报错，不代表一定是根因，常常还要结合 Network 面板 或 Sources 面板
• Console 没报错，不代表程序正常，很多逻辑错误只会体现在状态和结果上
• Console 更适合快速验证，不适合长期替代断点调试

Related notes

• 浏览器开发者工具 MOC
• 执行上下文
• window 对象
• Sources 面板