JS控制台console.log打印DOM元素刷新后展示变化原因及切换方法

<div class="buttons">
    <button>Press 1</button>
    <button>Press 2</button>
    <button>Press 3</button>
</div>
<script>
    const buttonContainer = document.querySelector('.buttons');
    console.log('buttonContainer', buttonContainer);
  
    buttonContainer.addEventListener('click', event => {
        console.log(event.target);
    })
</script>

这是Chromium内核浏览器（Chrome、Edge等）DevTools控制台的内置优化逻辑，属于预期正常行为：

• 首次打开控制台时，控制台默认按JS对象实例规则处理所有console.log输出的内容，DOM元素本质是JS对象，所以会直接展示可展开的完整属性、方法列表。
• 提前打开控制台再刷新页面时，DevTools会启用DOM元素预览优化，对打印的DOM节点优先渲染直观的HTML结构快照，方便开发者快速匹配节点和页面内容。

• 单次输出临时切换：右键点击控制台输出的DOM节点内容，在弹出菜单中选择「以JS对象形式展示」/「以DOM元素形式展示」，即可切换当前选中内容的展示格式。
• 全局默认格式修改：点击控制台右上角的齿轮图标打开设置面板，找到Console分类下的自定义格式设置器选项，关闭该选项后所有DOM元素默认输出属性方法列表，开启则默认展示HTML结构预览。
• 强制输出属性列表的快捷方法：不需要修改全局设置时，改用console.dir()方法打印DOM元素，例如console.dir(buttonContainer)，可以强制输出该元素的完整属性方法列表。

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