Chrome控制台打印DOM元素有时显示节点形式有时显示标记形式的原因及固定显示节点形式的方法

我来帮你拆解这个问题——Chrome控制台这种“时而显示可展开节点、时而显示HTML标签字符串”的情况，是它特有的智能渲染逻辑导致的，和其他浏览器的控制台实现逻辑不一样。

为什么会有这种差异？ #

Chrome会根据DOM元素的挂载状态来决定打印的展示形式：

• 如果元素已经被挂载到当前页面的DOM树中（可以通过element.isConnected属性判断，返回true），控制台会渲染成可交互的节点形式，你能展开查看它的子元素、属性、样式等所有细节；
• 如果元素还没插入DOM树，或者已经从DOM中被移除（element.isConnected返回false），控制台会默认打印它的静态HTML标签字符串，因为此时它不属于当前文档的活跃DOM结构。

另外还有个容易忽略的点：Chrome控制台有延迟求值的特性——有时候你同步打印元素，但元素后续被挂载到DOM，当你点击展开控制台的打印结果时，它会读取元素的最新状态，这也可能让你觉得显示结果“忽变”。

如何让控制台始终显示节点形式？ #

如果你希望不管元素的挂载状态如何，都能看到可展开的节点视图，有几个可靠的方法：

1. 改用console.dir()打印
   console.dir()是专门为打印对象详细结构设计的API，对于DOM元素，它会直接展示完整的节点对象（包含所有属性、方法和子节点），完全不受元素是否挂载的影响。修改你的代码如下：

   const $dropdowns = document.querySelectorAll('.has-dropdown');
   console.dir($dropdowns[0]);
   const drp = $dropdowns[0].querySelector('.navbar-dropdown');
   console.dir(drp);
   

2. 把元素包装在对象里用console.log()打印
   如果你习惯用console.log()，可以把DOM元素放到一个普通对象中，控制台会先展示这个对象，展开后就能看到完整的节点结构：

   console.log({ dropdownElement: drp });
   

3. 使用占位符强制渲染节点
   你还可以利用Chrome控制台的格式化占位符%o，明确告诉控制台要以对象（节点）形式打印元素：

   console.log('当前下拉元素节点: %o', drp);
   

这几种方法都能确保你在Chrome控制台里每次都能看到可交互的DOM节点视图，不会再出现显示不一致的情况。

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