谷歌浏览器调试器工作异常

Question

我目前正在W3Schools Template Page 中测试第二个示例并尝试记录该值，当我使用 F10 并继续按钮时，chrome 调试器中显示的值很奇怪，如下图所示。如果有人有任何想法，请告诉我。谢谢。

不按F10继续显示错误

Chrome Debugger 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)，那么您不会记录活动对象。

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>