Google Chrome DevTools Console输出DOM元素格式不一致问题咨询

Chrome DevTools控制台打印DOM元素时的格式差异，是因为它会根据元素是否挂载在当前DOM树中来自动切换显示方式：如果元素处于DOM树中，会显示可展开的HTML结构；如果元素已被移除或尚未挂载，就会输出对象形式。

要实现每次都以HTML格式输出，有几种靠谱的解决方法：

• 使用console.dirxml()替代console.log()
  这个方法是专门用来打印XML/HTML元素结构的，不管目标元素是否在DOM树中，都会强制输出HTML格式的节点，还能正常展开查看子元素：

  const boxes = document.querySelectorAll(".box")[0];
  console.dirxml(boxes);
  console.dirxml(document.getElementsByTagName("h2")[0]);
  

• 转成HTML字符串打印（适合仅查看结构）
  如果一定要用console.log()，可以提取元素的outerHTML属性，直接打印完整的HTML字符串：

  console.log(boxes.outerHTML);
  

  注意这种方式输出的是纯文本，无法像控制台节点那样交互展开。

• 把元素包装进数组打印
  Chrome控制台对数组内的DOM元素，会优先以HTML格式展示，点击数组中的元素仍能查看完整DOM结构：

  console.log([boxes]);
  

如果你的DOM元素已经从文档中移除，console.dirxml()是最稳定的选择，它完全不受元素挂载状态的影响。

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