title: Google Chrome's console.log() prints DOM nodes inconsistently
body: <p>Not a duplicate of <a href="https://stackoverflow.com/questions/24175017/google-chrome-console-log-inconsistency-with-objects-and-arrays">Google Chrome console.log() inconsistency with objects and arrays</a>, since this question is not about objects and arrays.</p>
  <hr />
  <p>Here is a simple HTML page:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
    &lt;link rel="stylesheet" href="css.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
  
    &lt;script&gt;
      for (const div of document.querySelectorAll("div")) {
        console.log(div);
      }
    &lt;/script&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Sometimes the results are shown as they presumably should:</p>
  <p><a href="https://i.stack.imgur.com/Yjhhx.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Yjhhx.png" alt="enter image description here" /></a></p>
  <p>and sometimes as if I used <code>console.dir()</code> instead of <code>console.log()</code>:</p>
  <p><a href="https://i.stack.imgur.com/k2ii0.png" rel="noreferrer"><img src="https://i.stack.imgur.com/k2ii0.png" alt="enter image description here" /></a></p>
  <p>Rarely, I get a mix:</p>
  <p><a href="https://i.stack.imgur.com/2eAfB.png" rel="noreferrer"><img src="https://i.stack.imgur.com/2eAfB.png" alt="enter image description here" /></a></p>
  <p>When I tried to create the <a href="https://stackoverflow.com/help/minimal-reproducible-example">minimal, reproducible example</a> shown above, I removed the <code>&lt;link&gt;</code>, 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 <code>css.css</code> is currently <em>completely</em> empty. So somehow the mere presence of the <code>&lt;link&gt;</code> tag seems to be at least related to the problem.</p>
  <p>Is there a reason for this behavior, or is it a bug?</p>