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 面板；而 <code>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”，这些一般不影响，但可尝试重置设置
- 换用隐身窗口测试，排除插件干扰
