Question

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

在不使用F10的情况下继续显示错误

在代码中，数组中的文本在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)，那么您就不会记录实时对象。

＆＃13;

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);
  }
}

＆＃13;

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

＆＃13;

谷歌Chrome调试器工作很奇怪

1 个答案: