javascriptgoogle-chromedomconsole.logdocumentfragment

Chrome outputs emtpy document fragment to the console before inserting it to the dom

When inserting a document fragment to the dom Chrome browser outputs empty document fragment to the console whereas Firefox outputs non-empty fragment before inserting and empty fragment after inserting. If a fragment is not inserted to the dom then Chrome also outputs non-empty fragment to the console. I'm running latest stable versions (Chrome 126 and Firefox 128)

const init = function() {
  let fn0 = function() {
    let fragment = document.querySelector('template').content.cloneNode(true);
    console.log('before insertion: ', fragment); // empty in Chrome but not in Firefox
    document.querySelector('ul').append(fragment);
    console.log('after insertion: ', fragment);
  };
  let fn1 = function() {
    let fragment = document.querySelector('template').content.cloneNode(true);
    console.log('no insertion: ', fragment); // non-empty in both
  };
  let buttons = document.getElementsByTagName('button');
  buttons[0].addEventListener('click', fn0);
  buttons[1].addEventListener('click', fn1);
};
window.addEventListener('load', init);
.container {
  width: 200px;
  height: 200px;
  display: flex;
  flex-direction: column;
  font-family: sans-serif;
}

.bar {
  flex-basis: max-content;
  display: flex;
  padding: 6px;
  gap: 6px;
}

.list {
  overflow: auto;
  border: 1px solid;
}

button {
  text-align: left;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>template test</title>
</head>

<body>
  <div class="container">
    <div class="bar">
      <button type="button">log document fragment before insertion, then insert the fragment and log the fragment after insertion</button>
      <button type="button">log document fragment without inserting</button>
    </div>
    <div class="list">
      <ul>
        <template>
          <li>list item</li>
        </template>
      </ul>
    </div>
  </div>
</body>

</html>

Solution

  • There are two points here. First, console is asynchronous, sou you can't really know when exactly your value will be actually rendered in the console. Second is that chrome actually shows you current state of the object and not it's state at the time you logged it. Consider this code:

    const obj = {a: 1};
console.log(obj);
obj.b = 2;
delete obj.a;

    If you try to log it in chrome, you will see that it have a shape you expect ({a: 1}). However, if you try to expand it to see properties, you will see that it has no "a" property at all, despite the fact that it was logged when property existed. Same thing happens with your DocumentFragment - you see it's state at "current" time, but expect to see "past". One more thing here is the difference in logging regular objects and DOM structures (like DocumentFrarment or other elements). In first case you see stringified version of it and then can expand to see real thing. In second case (your case) you see object from get go.

    This is pretty confusing, but can be very useful when you want to track how object changes during it's lifetime, especially when paired with breakpoints (set in browser or with debugger statement) without having to log same thing many many many times.