console.dir输出DOM对象的属性树而非HTML字符串，它以可展开树形结构展示dataset、classList、offsetParent等易被console.log忽略的属性，并支持{depth: null}全展开。
console.dir 输出的是 DOM 对象的属性树，不是 HTML 字符串
当你用 console.log 打印一个 DOM 元素（比如 document.querySelector('div')），浏览器默认展示它的「HTML 表现形式」——类似 <div class="box"></div> 这种可点击跳转到 Elements 面板的视图。而 console.dir 强制把它当纯 JavaScript 对象处理，展开的是它身上的所有自有属性、原型链属性、getter/setter、方法等，这才是你查 offsetTop、clientWidth、dataset 或自定义属性的真实入口。
DOM 元素上哪些属性容易被 console.log 忽略但 console.dir 能看到
这些是常见却常被误以为“不存在”的属性，console.log 不显示，console.dir 会明确列出：
-
dataset：HTML5 自定义数据属性（如data-id="123"）映射成的对象 -
classList和className的差异：前者是DOMTokenList实例，后者只是字符串；console.dir能点开classList看value、length、contains()方法 - 所有只读属性：
offsetParent、scrollHeight、computedStyleMap()（新版 API） - 事件监听器相关：虽然不会直接列出绑定的回调函数，但能看到
onclick、oninput等属性值（null或函数引用）
Node.js 环境下不能直接用 console.dir 查 DOM
DOM 是浏览器环境特有的，Node.js 没有 document 或 Element 类型。如果你在 Node 中执行 console.dir(document)，会报 ReferenceError: document is not defined。这点必须确认运行上下文——前端调试时有效，服务端或 Jest 测试中需用 JSDOM 模拟环境，否则连对象都构造不出来。
深度不够？加 { depth: null } 参数强制全展开
默认情况下，console.dir 对嵌套对象只展开 2–3 层，遇到 style、attributes、children 这类对象时会显示 ▶ CSSStyleDeclaration 或 ▶ NamedNodeMap，点一下才展开。想一步到位看全，必须显式传参：
立即学习“前端免费学习笔记（深入）”；
console.dir(element, { depth: null });
注意：这个参数在浏览器中支持良好（Chrome/Firefox/Edge 均可用），但在旧版 Safari（≤16.4）可能被忽略；Node.js 中该选项也有效，但仅对普通 JS 对象起作用。
真正卡住人的地方往往不是“怎么用”，而是没意识到 console.dir 和 console.log 输出的根本不是同一类信息——一个是对象结构快照，一个是渲染语义快照。DOM 调试时，别让 log 的 HTML 视图带偏了你查属性的路径。
