为何Chrome断点会改变渲染结果？如何用JS实现逐行显示效果？

背景与尝试 #

我想要实现**逐行显示（line-by-line shows）**的效果，了解到Chrome在DOM插入操作时会触发重排（reflow），于是编写了以下代码：

点击“Click Me”标签，预期逐行出现多行包含“-.-”的内容。

<!DOCTYPE html>
<html lang="en">
  <body>
    <div>
      <span id="clickme">Click Me</span>
    </div>
    <div id="container"></div>
    <script>
      const container = document.getElementById("container");
      const clickme = document.getElementById("clickme");

      clickme.addEventListener("click", () => {
        for (let i = 0; i < 10; ++i) {
          const child = document.createElement("div");

          for (let j = 0; j < 20; ++j) {
            const span = document.createElement("span");
            span.textContent = "-.- ";
            child.appendChild(span);
          }

          container.appendChild(child);
        }
      });
    </script>
  </body>
</html>

异常现象 #

实际运行时，Chrome会批量处理所有DOM变更，我通过性能录屏验证了这一情况：

对此结果感到困惑，我在for循环入口处添加断点观察，发现渲染结果与正常流程完全不同：
其余截图的渲染结果均为逐行显示

疑问 #

1. 为什么断点会改变Chrome的渲染流程？
2. 如何仅用JavaScript实现**逐行显示（line-by-line shows）**效果？

（注：我的原始需求比逐行显示更复杂，无法通过CSS过渡解决）

内容的提问来源于stack exchange，提问作者韩沅锡