VS Code中console.log打印DOM元素为何有时显HTML树有时显JSON属性

• 优先使用console.dirxml()打印DOM元素，该API专门用于输出XML/HTML结构的节点树，不会出现全量属性列表的展示效果，用法和console.log()完全一致：

  console.dirxml(xyz)
  

• 如果你习惯使用console.log()，可以给方法传入多个参数，第一个参数添加任意字符串前缀，控制台会默认将后续的DOM参数渲染为HTML树样式：

  console.log('目标元素', xyz)
  

• 临时切换已输出内容的展示格式：右键点击已经输出的类JSON属性树，选择「Show as HTML element」即可切换为HTML树视图，该操作仅对当前输出项生效
• 快速校验指定属性无需滚动长列表：直接打印你需要校验的属性值即可，比如要确认class属性可以直接执行console.log(xyz.className)，输出结果直接展示目标值，不需要展开节点查找

内容的提问来源于stack exchange，提问作者jbans