0
245
ViewsGoogle Chrome's console.log() prints DOM nodes inconsistently
Not a duplicate of Google Chrome console.log() inconsistency with objects and arrays, since this question is not about objects and arrays.
Here is a simple HTML page:
<head>
<link rel="stylesheet" href="css.css">
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
for (const div of document.querySelectorAll("div")) {
console.log(div);
}
</script>
</body>Sometimes the results are shown as they presumably should:
and sometimes as if I used console.dir() instead of console.log():
Rarely, I get a mix:
When I tried to create the minimal, reproducible example shown above, I removed the <link>, as it didn't seem to be related to the problem. However, after removing it, the inconsistency disappeared, so I restored it and tried to minimize the CSS itself, to the point where css.css is currently completely empty. So somehow the mere presence of the <link> tag seems to be at least related to the problem.
Is there a reason for this behavior, or is it a bug?