javascript - Google Chrome 调试器工作异常

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>