Chrome DevTools console.log打印元素格式随机切换的原因及解决

问题复现场景 #

测试代码如下：

<h1 class="heading">Heading</h1>
<script>
  console.log(document.querySelector(".heading"));
</script>

打印结果会随机在两种格式间切换：一种是交互式DOM树预览格式（期望输出），另一种是普通JS对象展开格式（异常输出）。

触发原因 #

这个现象是时机竞争导致的，核心触发点有两个：

• 脚本执行和DevTools初始化的时序冲突
  如果页面刷新时DevTools还未完全启动，或者Console面板的渲染逻辑还未完成注册，此时执行console.log打印DOM元素，控制台会直接把DOM元素当做普通JS对象序列化输出，呈现为属性展开的格式；如果Console面板在脚本执行前已经完成初始化，就会默认把DOM元素渲染为可交互的DOM树预览格式。
• DevTools激活面板的优先级调度
  如果刷新页面时你停留在Elements、Network等其他面板，DevTools会把Console面板的渲染逻辑优先级调低，也有概率触发对象序列化输出逻辑，导致格式变化。

自定义log函数生效的原因 #

你封装的log函数如下：

function log(value) {
    window.addEventListener("load", function () {
        console.log(value);
    });
}

这个方案生效的核心是把console.log的执行时机强制推迟到window.load事件触发后，此时页面所有资源加载完毕，DevTools的所有面板也已经完成初始化，不存在时序竞争问题，所以每次都能输出期望的DOM树预览格式。

替代解决方案 #

如果不想依赖window.load的延迟执行，也可以用控制台原生API强制固定输出格式：

• 要稳定输出DOM树预览格式，使用console.dirxml()替代console.log()
• 要稳定输出DOM元素的属性对象格式，使用console.dir()替代console.log()

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