Javascript angularjs-调试dom作为其呈现

如何在DOM呈现时调试它？我四处寻找，找不到任何明确的答案。很可能我只是没有搜索正确的关键字。。。谁知道呢

例如，假设在表行上应用了ng repeat指令

假设我们在指令使用的模板中有：

<table class="table table-striped table-condensed">
  <tr ng-repeat="myObject in myObjects">
    <td>{{myObject.name}}</td>
    <td>{{myObject.description}}</td>
  </tr>
</table>

这使我感到非常高兴。然而，如何才能在呈现html时以某种方式查看它呢？有没有什么方法可以让我在每次迭代中设置某种断点来查看“myObject”是什么（以及我可以访问的所有属性，例如“name”和“description”）的当前迭代

目前我正在使用VisualStudio代码和chrome调试工具，尽管这只适用于javascript

---

希望我问的这个问题是正确的！如果有人能帮助我，我将不胜感激。：）

您可以在DOM修改上设置断点，如中所示。不过，这可能行不通

大多数框架不会以您描述的渐进方式修改DOM。通常的方法是在后台创建元素节点，然后将完整的更新集添加到DOM中

例如（最小但说明性）：

因此，实际上无法“在添加节点时”查看节点。修改往往是“一次”进行的，而呈现框架会竭尽全力确保最少的单独DOM修改

---

像React这样的现代框架甚至都不这样做。相反，它们有自己的数据结构来表示元素，并且只在同步阶段（在它们管理的可见页面和抽象页面之间）修改DOM以实际呈现它们，执行尽可能少的操作（可能涉及转换元素，而不是删除和添加元素）.

因此，当您写出HTML并在其中添加数据绑定表达式时。。。你只是希望你做对了吗？似乎您必须编写数据绑定表达式并不断重新加载页面。我的意思是，如果我试图绑定到{{myObject.somethingElse}}，显然它不起作用，但是我怎么能看到我有一个未定义的属性，或者至少在某个地方看到错误消息呢？一个简单的调试方法是用你试图猜测的对象的

JSON.stringify（）

呈现

元素。除此之外，您应该将尽可能多的逻辑移到控制器和工厂中，并使视图尽可能简单

    link: function (scope, element, attrs) {
      scope.myObjects= [{ name: 'foo', description: 'desc for foo' },
      { name: 'bar', description: 'desc for bar' },
      { name: 'baz', description: 'desc for baz' }];
...

const node = document.createElement('div')

node.appendChild(document.createElement('h1'))
node.appendChild(document.createElement('p'))
node.appendChild(document.createElement('p'))

document.body.appendChild(node) // not actually added until this runs