console.dir 和 console.log 有什么区别

console.log 和 console.dir 最大的区别，不是“一个能看对象，一个不能”，而是它们在不同运行环境里对对象和 DOM 节点的展示方式不同。现代浏览器里两者经常看起来很像，所以真正有价值的问题是：什么时候 dir 能帮你更快定位结构，什么时候 log 就已经够用了。

目录

• 先说结论
• console.log 更像通用输出
• console.dir 更偏向对象结构查看
• 在浏览器里为什么你会觉得它们差不多
• Node.js 里怎么理解
• 什么时候不要只看控制台结果就下结论
• 怎么选
• 结论

先说结论

• 普通调试输出，大多数时候直接用 console.log
• 想更明确地查看对象可枚举属性结构时，用 console.dir
• 调试 DOM 节点时，两者在浏览器里尤其容易表现不同

console.log 更像通用输出

const user = { name: "Alice", age: 25 }

console.log(user)
console.log("current user", user)

它适合：

• 打印字符串、数字、布尔值
• 夹带上下文说明地输出变量
• 快速确认某一步代码有没有执行

如果你只想知道某个值“现在是什么”，console.log 通常足够。

console.dir 更偏向对象结构查看

const user = {
  name: "Alice",
  age: 25,
  hobbies: ["reading", "swimming"],
}

console.dir(user)

它更强调把对象当成可展开的属性树来看，而不是普通日志文本。调试复杂对象、类实例、浏览器对象时更有针对性。

在浏览器里为什么你会觉得它们差不多

因为现代 DevTools 已经把 console.log(obj) 做得很强了，打印对象时通常也能展开查看属性。所以很多教程里那种“log 只能看字符串，dir 才能看对象”的说法已经过时。

真正更容易观察到差异的是 DOM 节点：

const button = document.querySelector("button")

console.log(button)
console.dir(button)

浏览器里：

• console.log(button) 往往更接近元素节点的可视化展示
• console.dir(button) 更偏向 JS 对象属性结构

当你想看节点层级、标签结构、实时元素状态时，log 可能更顺手；想看属性和方法树时，dir 更明确。

Node.js 里怎么理解

在 Node.js 环境中，没有浏览器 DOM 这层差异，console.dir 更像是一个带可配置选项的对象查看工具，比如可以控制深度：

console.dir(config, { depth: null })

这在打印深层嵌套对象时比较有用。

什么时候不要只看控制台结果就下结论

控制台打印对象时，有个常见坑：你展开对象的时间点，可能已经晚于打印语句执行时。也就是说，你看到的是“当前展开时的对象状态”，不一定是“当时打印那一刻的快照”。

如果你需要更稳定地看序列化结果，可以：

console.log(JSON.stringify(data))

但这也有代价：

• 会丢掉函数、undefined、循环引用等信息
• 不适合所有对象

如果你正在调试可选属性、空值链路或对象拷贝问题，也可以结合看 可选链指南 和 JavaScript 对象复制指南。

怎么选

结论

• 现代浏览器里，console.log(obj) 和 console.dir(obj) 常常都能展开对象。
• 两者真正更明显的差异，通常出现在 DOM 节点展示和对象结构查看方式上。
• 普通开发调试先用 console.log 就够，只有当你明确要看对象树或更深结构时再切 console.dir。