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