Google Chrome调试器工作很奇怪

Question

我当前正在测试W3Schools模板页面中的第二个示例，并试图记录该值，当我使用F10和继续按钮时，Chrome Debugger中显示了怪异的值，如下所示。如果有人有任何想法，请让我知道。谢谢。

在不使用F10

的情况下继续显示错误

Chrome调试器GIF

在"代码"中，来自数组中的文本将在Console.log之后添加，但在日志之前以某种方式添加了数组值。要测试我还直接记录了该项目

                var myArr = ["Audi", "BMW", "Ford", "Honda", "Jaguar", "Nissan"];
                function showContentArray() {
                    var temp, item, a, i;
                    //get the template element:
                    temp = document.getElementsByTagName("template")[0];
                    //get the DIV element from the template:
                    item = temp.content.querySelector("div");
                    //for each item in the array:
                    for (i = 0; i < myArr.length; i++) {
                        debugger;
                        //Create a new node, based on the template:
                        a = document.importNode(item, true);
                        console.log(a);
                        console.log(document.importNode(item, true));
                        //Add data from the array:
                        a.textContent += myArr[i];
                        //append the new node wherever you like:
                        document.body.appendChild(a);
                    }
                }

  <button onclick="showContentArray()">Show content Array</button>
  <template>
      <div class="templateClass">I like:</div>
  </template>

我在这里插入代码。

注意：我正在使用静态HTML页面

Answer 1

如果单步浏览代码，则获得正确的控制台日志，但是如果单击"继续按"按钮，您会看到不正确的日志记录。

我怀疑这是因为控制台与调试器不同步。代码记录一个DOM节点，然后立即修改节点的内容。到控制台实际显示已记录的节点时，其内容已更改，因此您可以在日志中看到更新的内容。

如果将其更改为console.log(a.textContent)，则您不会记录Live对象。

var myArr = ["Audi", "BMW", "Ford", "Honda", "Jaguar", "Nissan"];
function showContentArray() {
  var temp, item, a, i;
  //get the template element:
  temp = document.getElementsByTagName("template")[0];
  //get the DIV element from the template:
  item = temp.content.querySelector("div");
  //for each item in the array:
  for (i = 0; i < myArr.length; i++) {
    debugger;
    //Create a new node, based on the template:
    a = document.importNode(item, true);
    console.log(a.textContent);
    console.log(document.importNode(item, true));
    //Add data from the array:
    a.textContent += myArr[i];
    //append the new node wherever you like:
    document.body.appendChild(a);
  }
}

<button onclick="showContentArray()">Show content Array</button>
<template>
      <div class="templateClass">I like:</div>
  </template>