如何用 console.dir 展开查看 DOM 对象的原始属性而非 HTML 标签结构

console.dir 专用于以对象树形式展开 DOM 元素的可枚举属性和原型链，区别于 console.log 的 HTML 片段显示；需确保传入原生 Element 对象，并配合 Object.getOwnPropertyNames 等方法深挖不可枚举属性。

console.dir 本身就是用来查看 JavaScript 对象的可枚举属性和原型链的，它默认就以“对象树”形式展开 DOM 元素的原始属性（如 id、className、offsetTop、parentNode、style 等），而不是渲染成 HTML 标签结构 —— 这点和 console.log 在多数浏览器中对 DOM 元素的默认行为有本质区别。

确认你用的是 console.dir，不是 console.log

很多开发者误以为自己用了 console.dir，实际写的是 console.log。后者在 Chrome/Firefox 中常显示为可点击的 HTML 片段（类似 <div id="app">...），点开会跳转到 Elements 面板；而 console.dir 强制以纯对象视角展示：

• console.dir(document.body); → 展开后看到 clientHeight、children、dataset、__proto__ 等属性
• console.log(document.body); → 可能显示为高亮 HTML 节点（取决于浏览器和上下文）

避免被浏览器自动转换干扰

某些情况下，即使写了 console.dir，如果传入的是一个包装过的值（比如通过 innerHTML 或字符串拼接生成的伪节点），它可能不是原生 DOM 元素。确保你传入的是真实 Element 对象：

• ✅ 正确：console.dir(document.querySelector('#header'));
• ❌ 错误：console.dir('<div>hello</div>');（这是字符串，不是 DOM 对象）
• ⚠️ 注意：console.dir(Array.from(document.querySelectorAll('p'))) 会显示数组对象，每个元素才是 DOM 节点，需点开子项才见属性

配合 Object.getOwnPropertyNames 或 getOwnPropertyDescriptors 深挖

console.dir 显示的是“可枚举 + 常用属性”，但有些关键属性（如 offsetParent）是不可枚举的，或 getter/setter 属性不会直接显示值。此时可手动提取：

立即学习“前端免费学习笔记（深入）”；

• 看所有自有属性名：console.log(Object.getOwnPropertyNames(document.body));
• 查某个属性的描述符（含是否可枚举、是否有 getter）：console.dir(Object.getOwnPropertyDescriptor(document.body, 'scrollTop'));
• 强制展开所有自有属性（含不可枚举）：console.dir(Object.getOwnPropertyDescriptors(document.body));

在不同浏览器中保持行为一致

Firefox 和 Safari 的 console.dir 行为较统一；Chrome 自 90+ 版本起对 console.dir 加强了对象视图一致性。若仍看到 HTML 标签式输出，请检查：

• 是否启用了“Console Settings → Show object preview in console” 类似选项（个别旧扩展可能干扰）
• 是否在 DevTools 的 Console 设置中勾选了 “Group similar messages” 或 “Show timestamps”，这些一般不影响，但可尝试重置设置
• 换用隐身窗口测试，排除插件干扰