Text nodes vs Text nodes within Elements – Why do some come with quotes in Chrome

I am trying to produce a match to the output from Chrome Devtools (Elements) view, but I can’t see why some elements on the Chrome view read <P>Lorem ipsum</P> and some read <P>"Lorem Ipsum"</P> as both are text nodes within an element.

I have a demonstrator that shows the problem (both coming out as quoted – see Lorem1 and Lorem5)

var _TAG = 1;
var _TEXT = 3;
var _COMMENT = 8;
// ----------------------------------------------------------
function dge(id) {
  return document.getElementById(id);
}
// ----------------------------------------------------------
function getVisibleHTML(tx) {
  return tx.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
}
// ----------------------------------------------------------
function getTracePart(node) {
  if (node.nodeType == _TEXT) {
    if (node.nodeValue.trim() != '') return '<text>&quot;' + node.nodeValue + '&quot;</text>';
    else return '';
  }
  if (node.nodeType == _TAG) return getVisibleHTML(node.outerHTML);
  if (node.nodeType == _COMMENT) return '<BR><comment>&lt;--' + (node.nodeValue) + '--&gt;</comment><BR>';
  return 'NODE TYPE ' + node.nodeType;
}
// ----------------------------------------------------------
function write(tx) {
  dge('trace').innerHTML += tx;
}
// ----------------------------------------------------------
function doWalkTree(container) {
  for (var c = 0; c < container.childNodes.length; c++) {
    var child = container.childNodes[c];
    if (child.nodeType == _TAG) {
      write('<BR>&lt;' + child.tagName + '&gt;');
      doWalkTree(child);
      if (child.tagName != 'BR') write('&lt;/' + child.tagName + '&gt;');
      write('<BR>');
    } else write(getTracePart(child));
  }
}
// ----------------------------------------------------------

doWalkTree(dge('test'));
div,p, ul {
    border:solid 1px red;
    margin:10px;
    padding:10px;
}
span {
    border-radius:9px;
    padding:2px 8px 2px 8px;
    margin:5px;
    background-color:#e9e9e9;
    display:inline-block;
}
text {
   color:#77c592;
}
comment {
    color:#8facdd;
}
<div id='test'>

  <p>Lorem1 ipsum <b>dolor</b></p>

  <br>Lorem2 ipsum dolor

  <p><!--test-->Lorem3 ipsum dolor</p>

  Lorem4 ipsum dolor
  
  <p>Lorem5 ipsum dolor</p>
</div>

<hr>

<h5>Post Normalized result trace....</h5>
<div id='trace'></div>

I also have a demo running on jsfiddle (https://jsfiddle.net/Abeeee/3ts74boa/95/) but any assistance would be great.

Thanks