Chrome开发者工具中console.log打印HTML元素格式不一致的原因？

问题现象 #

运行以下代码时，控制台输出的DOM节点格式不一致：

const d = document.createElement('div');
console.log(d);
setTimeout(() => {
  const d = document.createElement('div');
  console.log(d);
});

第一个div被打印为普通对象结构，第二个则以可展开交互的HTML元素格式展示。

解决方案 #

• 专用打印方法：使用console.dirxml()替代console.log()，该方法专门用于渲染XML/HTML节点，无论同步还是异步场景，都会以HTML元素格式输出：

const d = document.createElement('div');
console.dirxml(d);
setTimeout(() => {
  const d = document.createElement('div');
  console.dirxml(d);
});

• 全局设置调整：打开Chromium控制台设置（右上角齿轮图标），在「Console」分类下，取消勾选「将HTML元素显示为对象」类选项（不同版本名称可能略有差异），但该设置无法100%消除异步场景的格式差异。
• 字符串化输出（无交互性）：如果坚持使用console.log()，可以将节点转为HTML字符串打印，但会丢失控制台的元素交互功能：

console.log(d.outerHTML);

原因说明 #

Chromium控制台存在内部优化逻辑：同步执行代码时，新创建的DOM节点尚未进入完整的文档状态，控制台会默认以对象格式打印；而在setTimeout这类异步回调中，节点处于浏览器可识别的DOM上下文，控制台会自动切换为HTML元素格式展示。

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