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

Question

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

<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 完全加载之前记录该元素。

这也可能有助于解释一些：

Please be warned that if you log objects in the latest versions of Chrome and Firefox what you get logged on the console is a reference to the object, which is not necessarily the 'value' of the object at the moment in time you call console.log(), but it is the value of the object at the moment you open the console.

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

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