Chrome控制台打印document.querySelector获取元素显示异常求助

在Chrome 104.0.5112.79版本中，使用document.querySelector获取h1元素并通过console.log打印时，多数情况下控制台只显示带下拉箭头的元素属性结构，而非完整的HTML标签内容；偶尔刷新页面后能正常显示。Firefox和Safari无此问题。相关代码如下：

HTML文件 #

<head>
    <title>Javascript Demo</title>

    <style>
        h1 {
            color: red;
        }

        div {
            color: coral;
        }
    </style>
</head>

<html>
    <body>
        <h1>Welcome to JavaScript DOM Review</h1>
        <div class="output">Div 1</div>
        <div class="output">Div 2</div>

        <script src="dom.js"></script>
    </body>
</html>

dom.js文件 #

const h1Tag = document.querySelector('h1');
console.log(h1Tag);

const divTags = document.querySelectorAll('div');
console.log(divTags);

原因分析 #

这是Chrome该特定版本控制台的渲染bug，当DOM元素在控制台日志准备渲染时，元素状态还未完全被控制台的DOM解析器捕获，导致默认展示属性结构而非HTML标签视图。

解决方案 #

1. 使用console.dirxml()替代console.log()
   该方法专为打印DOM元素的HTML结构设计，能在Chrome中稳定显示标签内容：

   const h1Tag = document.querySelector('h1');
   console.dirxml(h1Tag);
   
   const divTags = document.querySelectorAll('div');
   divTags.forEach(tag => console.dirxml(tag));
   

2. 转为HTML字符串打印
   直接输出元素的HTML代码，避免控制台渲染差异：

   console.log(h1Tag.outerHTML);
   divTags.forEach(tag => console.log(tag.outerHTML));
   

3. 升级Chrome版本
   此bug在后续Chrome版本中已被修复，升级到最新稳定版可彻底解决问题。

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