console.dir()专用于结构化展示DOM元素的全部属性和方法，而console.log()仅输出HTML渲染快照；前者以可展开树形显示dataset、style、classList等动态属性，适合深度调试JS修改后的状态。
直接用 console.log 打印 DOM 节点，往往只看到一个缩略的 HTML 标签，点开后结构嵌套深、属性杂乱、事件监听器不可见——这根本不算“深度调试”。真正高效的 DOM 调试，靠的是结构化输出 + 语义化观察，核心在于让控制台“说人话”，而不是堆砌原始对象。
用 console.dir() 替代 console.log() 查看 DOM 元素内部结构
console.log(element) 输出的是元素在 DOM 树中的渲染快照（类似你在 Elements 面板看到的样子），而 console.dir(element) 输出的是该元素作为 JavaScript 对象的完整属性列表——包括 dataset、style、classList、attributes、甚至原生方法如 focus() 或 scrollIntoView()。它更接近“对象视角”，适合检查动态绑定的属性或 JS 修改后的状态。
- 比如：
const btn = document.querySelector('button');→console.dir(btn)能立刻看到btn.disabled是否为true，btn.dataset.id的值，以及btn.onclick是否被赋值 - 特别适合调试 Vue/React 组件中 ref 绑定的原生 DOM 节点，因为框架可能劫持了
log的默认行为，但dir始终返回纯净的属性树
用 console.table() 快速比对多个 DOM 节点的关键属性
当你需要横向对比一组节点（如表格行、列表项、表单控件）是否具备一致的 class、data 属性或状态时，console.table() 是最直观的方式。它自动提取数组中每个对象（或 DOM 元素）的指定属性，生成可排序、可筛选的表格。
- 示例：查看所有带
data-role="item"的节点的id、className和offsetHeight
const items = document.querySelectorAll('[data-role="item"]');<br> console.table(items, ['id', 'className', 'offsetHeight']); - 注意：传入 DOM 元素数组时，
console.table会尝试读取你指定的属性名；若属性不存在（如dataset.foo），列中显示undefined，这本身也是一种调试线索
结合 %o 占位符与对象简写，清晰标注 DOM 上下文
单独打印一个 DOM 节点容易丢失上下文——你不知道它来自哪个模块、处于什么流程阶段。用格式化占位符 %o 搭配对象简写，能一次性把节点和它的“身份信息”打包输出。
- 错误写法：
console.log(el);→ 控制台只显示<div id="app"></div>，无来源、无状态 - 推荐写法：
console.log('%o —— 父容器: %s, 是否可见: %s', el, el.parentElement?.tagName, el.offsetParent ? '是' : '否');
或更简洁：console.log({ el, parent: el.parentElement?.id, isVisible: !!el.offsetParent }); - 优势：既保留 DOM 节点的可交互性（点击可跳转到 Elements 面板），又附带语义化描述，避免反复切换上下文
用 console.assert() 在特定 DOM 条件不满足时触发中断
结构化输出不只是“展示”，更是“验证”。console.assert(condition, msg, ...) 在条件为 false 时才输出，并在 Chrome 中支持断点中断（勾选 Console 设置里的 “Break on caught exceptions” 或配合 debugger），实现“条件式深度检查”。
- 场景举例：
确保某个弹窗 DOM 在打开前已挂载且内容非空：const modal = document.getElementById('user-modal');<br>console.assert(modal, '❌ 弹窗 DOM 未找到');<br>console.assert(modal.innerHTML.trim(), '❌ 弹窗内容为空');<br>console.assert(modal.classList.contains('show'), '❌ 弹窗未显示'); - 关键点：断言失败时不仅输出提示，还会在 Sources 面板高亮对应行，方便立刻回溯 DOM 初始化逻辑
