不同格式的 Chrome 控制台日志记录元素

Question

当我使用 Chrome 开发工具来控制台记录一个元素时，它会以两种不同的格式打印。当我刷新浏览器时，它会在两种格式之间随机切换。

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

所需格式：https://i.stack.imgur.com/XV7fB.png

为什么会这样？ https://i.stack.imgur.com/YlEGQ.png

---

结束了包装日志功能：

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

Answer 1

不知何故，您的浏览器将console.log() 与console.dir() 混淆了。阅读区别here。

两种情况下我在我的机器上得到的输出 -

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

> console.dir(document.querySelector(".heading"));
  h1.heading

Answer 2

我能够在 Windows 10 上使用 Chrome v93 重现此结果。

DOM 元素的“所需格式”是 console.log 所期望的，而 JSON 类型输出是 console.dir 所期望的。

我发现将表达式包装在 DOMContentLoaded 或 onload 函数中似乎可以改善结果，但有时仍会显示完整的对象而不是预期的 DOM 元素。

window.onload = function() {
    console.log(document.querySelector(".heading")); 
}; 

我怀疑这是 Chrome 中的一个错误。我无法在 Firefox 或 Edge 中复制此行为。

我对这里发生的事情的最佳猜测是 Chrome 正在尝试在 DOM 完全加载之前记录元素。

这也可能有助于解释：

请注意，如果您在最新版本的 Chrome 和 Firefox 中记录对象，您在控制台上记录的内容是对对象的引用，不一定是对象的“值”在你调用console.log()的那一刻，但它是你打开控制台那一刻的对象的值。

https://developer.mozilla.org/en-US/docs/Web/API/Console/log

当我看到控制台中出现完整的对象（不需要的格式）时，我发现关闭 DevTools 并在不刷新页面的情况下重新打开似乎可以显示正确的结果。